Hexo+Github博客搭建教程

2021-04-19

Word count: 4.1k | Reading time≈ 14 min

前言

新手小白，第一次搭博客，先向前辈们大佬们隔空致敬。

搭建博客有很多种方法，我选择的是Hexo静态博客框架，利用Github Page服务器，比较节省时间和金钱，可以更加专注于内容本身。

首先附上参考链接：

类型	链接
概述	1. 为什么要在老掉牙的独立博客上写东西
参考教程	1. 超详细Hexo+Github博客搭建小白教程-韦阳 2. GitHub+Hexo 搭建个人网站详细教程 - 知乎 3. Hexo+Github: 个人博客网站搭建完全教程- 博客园 4. 超级详细Hexo+GitHub+阿里云域名的博客搭建教程，新手也能轻松学会 5. Hexo+Github: 个人博客网站搭建完全教程 6. 在Hexo博客中发布文章
个性化	1. Ayer主题 2. hexo目录结构小探
写作	1. Markdown 入门参考 2. 使用vscode开始Markdown写作之旅 - 知乎 3. Hexo-文档
图床	1. 图床工具推荐 2. PicGo+GitHub：你的最佳免费图床选择-洪卫

搭建博客框架

安装Node.js

Hexo基于Node.js，首先要下载Node.js安装包（建议选LTS版本，current版本或许无法安装一些插件），改一下安装路径，其他安装选项选择默认就行。

安装完成后，win+R打开命令行，输入node -v和npm -v，显示版本号则安装成功。

添加镜像

如果没有梯子，npm部分可以用阿里国内镜像加速。

1	npm config set registry https://registry.npm.taobao.org

安装Git

为了将本地网页文件上传到Github上，需要安装分布式版本控制工具Git。

有兴趣深入了解Git的话，可以参考廖雪峰老师的Git教程

安装完成后在命令行输入git –version验证是否安装成功。

Github部分

每个程序猿都该有个Github啦，毕竟这就是猿的浪漫了~如果没有也没有关系，你可以从现在开始拥有这份独特的浪漫。

注册一个Github账号，强烈建议名字正常一点。
新建一个仓库：
仓库基本配置如下：

这里要注意的是：仓库的命名一定要跟用户名一样！
在新建好的仓库界面选择setting–Pages–Choose a theme，这里的主题可以随便选一个，后期可以换成别的。
刷新一下，Pages界面会出现你自己的网页链接，比如：Your site is ready to be published at http://OrderAngel.com/OrderAngel.github.io

虽然简陋，但是这就是你的博客啦~

安装Hexo，生成静态框架

Hexo是一款基于Node.js的静态博客框架，生成的静态网页可以借助Github服务器发布。

在合适的地方（这里说的一定不是C盘!）新建一个文件夹,用于存放博客文件，比如E:\Study\Apollocat\blog。
在该目录下右键，点击Git Bash Here，如果右键没有就直接搜Git bash，cd过去也行。
在该目录下输入npm i hexo-cli -g安装Hexo，或许有报错，直接无视就行。
安装完输入hexo v出现版本号则安装成功。
输入hexo init初始化文件夹，接着输入nmp install安装必要组件。
为了检测网站雏形，输入hexo new "hello world"新建文章。打开E:\Study\Apollocat\blog\source\_posts目录，可以看到一个hello world.md，这就是你新建的文章文件。
输入hexo g生成静态网页，再输入hexo s打开本地服务器。（Actually, 不生成静态网页，直接输入hexo s进行预览测试也可以）

这时用浏览器打开localhost:4000就能看到你的第一篇博客了，即便它只有一个标题，且只是静态的。

最后ctrl+c关闭本地服务器。

链接Github与本地Git

我们的网站在本地搭建完毕，如果想要发布到Github上就需要用到Git了。前面我们已经在本地安装Git了，现在需要将你的本地Git与Github链接，该步骤我们通过设置ssh秘钥来完成。

鼠标右键打开Git Bash，设置本地Git的用户名和邮箱，注意要与Github相同，别输错了：
1
2
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"
可以用以下两条命令，检查一下你有没有输对:
1
2
git config user.name
git config user.email
生成ssh秘钥：

ssh简单而言是一个秘钥，id_rsa是本地电脑的私人秘钥，id_rsa.pub是公共秘钥。公钥放在Github上，当链接本地与Github时，会根据公钥匹配私钥，匹配上则成功链接，之后可以用Git上传本地文件到Github上。

为啥需要设置ssh秘钥？由于Github要求每次上传文件的都是合法用户，因此每次上传都需要输入账号和密码来进行验证。这里设置ssh秘钥就是为了省去手动验证的步骤，上传时由Git自行匹配私钥与公钥完成验证。

输入命令生成ssh秘钥：
1
ssh-keygen -t rsa -C "GitHub注册邮箱"
直接回车，默认不设密码。
找到生成的.ssh文件夹中的id_rsa.pub秘钥，复制全部内容。

回到Github，打开Settings（是头像处的settings）– SSH and GPG Keys – New SSH Key：

Title随便写，Key部分将刚才复制的id_rsa.pub秘钥粘进去，最后点Add SHH Key。
在本地的Git Bash里检测Github公钥是否成功设置，输入ssh git@github.com，如果输出部分出现你的用户名，则设置成功。

发布网站

此时我们的网站已经在本地搭好了，而且本地Git也和Github成功链接，接下来要做的就是把本地搭的网站发布出去，让网站可以被其他人访问。

打开本地blog根目录下的站点配置文件_config.yml，该文件用于配置博客的基本信息。

需要注意的是，theme文件夹中有个同名文件，我们称之为主题配置文件，用于配置博客的主题信息。
修改站点配置文件_config.yml的最后一行配置并保存：

这里的repository可以简写为repo，是你Github上创建的博客仓库的路径。

注意：这里的branch可以设置为main或者master，但务必与Github仓库中Settings–Pages–Source–Branch相匹配，否则即使上传成功也看不到你的网站。

修改deploy其实是在给网站部署命令hexo d做相应配置，使用该命令进行部署时，hexo就能知道要把blog部署到Github的博客仓库中。
安装Git部署插件：
1
npm install hexo-deployer-git --save
分别输入以下三条命令：
1
2
3
hexo clean //清除缓存，若是网页正常情况下可以忽略这条命令
hexo g //生成静态网页
hexo d //部署
之后打开浏览器，输入部分博客仓库路径OrderAngel.github.io，就能看到你发布的博客了。

优化博客框架

绑定域名

如果嫌弃balabala.github.io这种统一标识的域名，可以绑定自己的个性化域名。

没有域名的话要先买个域名，百度云阿里云腾讯云之类的都能买，我个人用的是阿里云。

登陆后进入右上角的控制台，点产品与服务 – 域名 –域名注册。

把喜欢的域名买下来吧~
解析域名：在域名控制台界面下，点击解析。

在解析设置界面，点击添加记录，添加两条记录：

记录值这里是：用户名.github.io这个现在可以直接访问的部分仓库路径。
回到你的Github博客仓库中，选择Settings – Pages，在Custom domain这里，输入你购买的域名后保存。

这里的www.输不输都行。
在本地blog文件夹中，blog/source目录下，创建一个记事本文件，输入你购买的域名。

这里的域名建议不带www.，如果带上以后必须有完整的www.balabala..才能访问，如果不带，以后域名有没有www.都能访问。

文件命名为CNAME，保存类型为所有文件(*.*)。
最后，将我们改动的配置同步到Github中就行了：在本地blog目录下，进入Git Bash命令行(cmd和powershell也行)，输入：
1
2
3
hexo clean
hexo g
hexo d
现在，打开浏览器输入你自己的域名，就可以直接进入你的博客了~

更换主题

之前随便选的Hexo主题或许不合心意，但不用care，因为我们还可以更换其他主题。

可以在Theme中Pick心水的主题。我个人用的是Ayer，这位博主的写的主题配置教程很nice。其他常用的，比如Next主题，也很棒。

如果Theme的博主有相关教程，按说明进行安装配置；如果没有的话，先去Github里下载下来，放在本地的blog\themes目录下：

在本地blog目录下，打开站点配置文件_config.yml，修改theme为你选的主题名，比如ayer。这里注意要与blog\themes目录下该主题命名相同。
一般关于该主题的使用教程会在Theme博主的Blog里给出；如果没有的话，搜下有无相关教程，或者自行研究一下本地blog\themes\主题名目录下的主题配置文件_config.yml，主题相关的主要配置都在该文件中。

关于主题文件夹的目录说明，可以参考主题hexo。

最后，再次部署网站，还是：

hexo s //本地预览测试：可以先打开本地服务器，在localhost:4000中看看效果
hexo clean //清除缓存
hexo g //生成
hexo d //部署

hexo私人定制

工欲善其事，必先利其器。在进行一些更高级的私人配置前，我们有必要先了解一下blog文件夹里的文件都是用来干啥的。

hexo目录说明

这是我blog文件夹下的目录，由于使用了一段时间，因此也有些私设，请大致参考。

|──_config.yml
|──package.json
|──.deploy_git
|──node_modules
|──public
|──scaffolds
|──source
      |──_posts
      |──categories
      |──pictures
      |──tags
|──themes
      |──landscape
      |──ayer

1. _config.yml

站点配置文件，初始化时自动创建。

具体配置可参考配置hexo

2. package.json

应用程序文件，初始化时自动创建。

可以查看hexo版本以及安装的扩展版本。

3. .deploy_git

对应Github博客仓库中的内容 = 最近一次成功上传到Github上的public文件夹内容。在部署到Github后自动创建。

可能出现的与public内容不一致，是由于重新生成但未上传所致。简而言之，public是hexo g生成静态页面的内容，而.deploy_git中是hexo d部署到Github中的内容。

4. node_modules

存放安装的Hexo扩展，还有node .js的各种库。

5. public

执行hexo g命令后，Hexo会解析source文件夹和当前的Theme，从而生成静态网页，该内容存放于public文件夹中。

6. scaffolds

模板文件夹。
内有页面模板page.md、文章模板post.md、草稿模板draft.md三个文件。
具体可参考模板hexo。

7. source

存放用户资源。

_post

存放文章。
其中markdown文件(md)、html文件、org文件在hexo g生成页面过程中会被解析并拷贝到public文件夹中，最终通过hexo d发布。
其他_balabala文件夹/文件

生成时将会被忽略。

因此可以在此目录下创建_drafts文件夹来存放草稿。
其他非_balabala文件夹/文件

生成时会被拷贝到public中。

除了文章外，还会有图片、标签等用户资源，可以使用hexo new page pilipili来新建子目录pilipili。

比如我的目录下就有categories、pictures、tags等子目录。

themes

主题文件夹。
我使用的是Ayer主题，因此在我的themes文件夹下，除了默认主题lanscape外，还有ayer文件夹。

可以考虑的定制

1. 对_config.yml进行修改

对blog目录下的站点配置文件_config.yml进行个性化修改，具体可以参考配置hexo。

网站Site：

我们可以对文件中的site部分进行修改，比如：

网址URL

将url改成自己的网站域名，如：http://apollomao.com。

还可以对网址的永久链接格式进行修改，具体可参考永久链接

2. 对scaffolds文件夹中的模板文件进行修改

所谓模板，即就是预定义，可以在每创建一篇文章后，预定义文章头部，省事。

比如，我的文章模板post.md为：

那么我每次hexo new post balabala生成新的文章，该文章的头部就会是：

只需要按照需求补充一下tages、categories等值即可：

网页模板page.md和草稿模板draft.md也可参考post.md进行设置。创建命令分别是hexo new page balabala和hexo new draft balabala。

3. 其他

还有一些常见的定制策略，比如加背景、加侧栏菜单、加背景音乐、加404界面等等，部分功能可能主题自带的，其他感兴趣的可以自行搜索~（开头的参考教程5中包含一些，我没有尝试，仅供参考）

图床

图床是可以上传图片的服务器。常用的图床有很多，可以参考开头的图床工具推荐选择合适的图床和图床工具。

我个人用的是Github + PicGo的组合，因为省钱233

具体安装教程可以参考开头的PicGo+GitHub：你的最佳免费图床选择-洪卫。

附上我的PicGo配置仅供参考：

需要注意的是，与参考教程不同，在配置PicGo阶段，设定分支名需要与Github仓库中Settings–Pages–Source–Branch相对应，而不是统一设master。

Note
- PicGo为了稳定期间最好别装测试版。
- 不要试图装watermark插件，别问我怎么知道的… orz

牛刀小试

现在我们来正经发一篇文章。

Markdown基础

博客文章主要用Markdown编写，有很多写作工具，我个人用的是VSCode。

零基础的同学可以参考使用vscode开始Markdown写作之旅进行学习，亲测很好用~

附上其中的基础语法仅供参考：

等你正式开始写文章的时候，具体一些用法还可以参考Learning-Markdown (Markdown 入门参考)

最后再贴出来一个范例：

这部分除了基础语法，我还用到了插入链接 [title](网址)，以及插入图片 ![title](图床地址or本地链接)(直接从PicGo图床里复制就行)。

正经发布一篇文章

get了最基础的markdown语法后，我们来走一遍完整流程。

创建一篇文章”博客简介”

在本地blog目录下，右键进入Git Bash，输入：
1
hexo new post "博客简介"
注意：
- post是默认值可以省略。
- 如果title有空格，必须要加双引号，否则双引号可以省略。
编辑文章

在 blog\source_posts 路径下生成了博客简介.md文件，用vscode打开，编辑自己的文章。

比如我的博客简介是这么写的（仅供参考）：
- 可以在文章任意位置添加，首页只会显示more前的内容，more后的内容点击阅读全文后展示。
- 如果想给文章添加分类和标签，可以在文章头部补充，比如我是这么写的：
本地预览

写好文章后保存。

hexo s启动本地服务器，在 http://localhost:4000 进行预览测试。
发布文章
Finally!
输入以下命令，将写好的“博客简介”发布到网站上吧~
1
2
3
hexo clean
hexo g
hexo d
此时，在浏览器访问自己的博客域名，就可以看到我们写的第一篇正经文章啦~ ☀😼
- 附上Markdown Emoji表情语法速查表