通过GitHub搭建Hexo博客
介绍
为何使用Github
- 免费；
- 静态网页，不需要后台；
- 有版本管理；
- 代码也托管在Github上，不用整太多平台折腾；
为何使用Hexo
- 好看；
- Markdown语法网页；
- 配置方便；
- 支持git；
准备工作
- 一台能上网的电脑；
- 脑子和手；
本文环境
Window 10 20H2 19042.572
搭建步骤
注册Github账号
进入Github官网，点击右上角Sign up，后面随便点点就行。
如果有账号了，那就Sign in。
新建Github Pages仓库
点击Repositories，再点击New
Repository name设置为“你的用户名.github.io”，比如我的用户名是github-3rr0r，那我就需要设置为github-3rr0r.github.io。请注意，一定得这么设置，否则就无法成功生成Github Pages。
勾选“Public”，不然也无法成功。
其他的勾选不勾选无所谓，如下图所示。
设置完成后跳转到如下界面：
安装Git客户端
前往git-scm下载64-bit Git for Windows Setup，安装。
安装完成后打开Powershell，输入git --version验证是否安装成功。
配置SSH Key
生成RSA密钥
在Powershell中输入ssh-keygen -t rsa -C "你注册Github时用的邮件地址"。
第一个选项默认回车就行，后续输入生成密钥使用的字符串时，可以连续两次回车跳过，也可以自己输入，成功生成后结果如下：
此时.ssh文件夹下会多出两个文件：id_rsa和id_rsa.pub，分别为私钥文件和公钥文件。
用记事本打开id_rsa.pub文件，将其中内容全部复制。
添加密钥到Github
在Github中点击自己头像，然后点击Settings，跳转后点击SSH and GPG keys，再点击New SSH key。
Title中填入好记的名字，用于辨识自己的哪台设备，Key中完整粘贴刚才复制的公钥文件内容，然后点击Add SSH key。
完成后，SSH keys列表中将多出刚才添加密钥。
接下来在Powershell中输入ssh -T git@github.com验证是否配置成功（此处命令不要修改）。
如果成功，将显示如下输出：
安装Hexo
安装npm
前往npm官网下载npm安装包，建议选择“长期支持版”。
除了设置安装路径以外，其他无脑下一步即可。
重新打开一个Powershell窗口（否则环境变量可能不会生效），输入npm --version验证是否安装成功。
通过npm安装Hexo
安装好npm之后就可以安装Hexo了，命令为：
1 | npm install -g hexo |
安装完成后，执行hexo的初始化命令：
1 | hexo init Hexo # 新建文件夹Hexo，并在该文件夹下初始化hexo |
初始化时会下载一些文件，等待完成即可。这一步可能会因为网络原因卡住不动，删除文件夹后重试或者换个网络试试，实在不行那你就试试魔法。
完成初始化后，进入文件夹，可以通过hexo --help或hexo h来查看帮助，我们主要用到的三条指令如下：
1 | hexo g # 等价于hexo generate，用于生成静态网页文件 |
输入hexo s启动本地服务器，在浏览器输入http://localhost:4000预览初始的博客，如果弹出防火墙提示，勾选并允许即可。
浏览器中显示的结果如下：
部署博客到Github
修改Hexo配置文件
初始化hexo的文件夹下，_config.yml就是hexo的配置文件，可以通过任意文本编辑器打开，推荐使用Visual Studio Code。
开始的Site部分可以配置网站信息（包括语言），我的配置如下：
1 | # Site |
URL部分修改url为自己的网址即可：
1 | url: https://github-3rr0r.github.io/ |
前面两部分的设置不影响部署到Github，将配置文件拉到底，最后的Deployment部分才是重点。我修改后的配置如下（请注意我的主分支已经从master改成了main，如果未改动过则为默认的master）：
1 | deploy: |
修改完成后保存即可。
部署到Github
在Powershell中输入以下指令生成静态网页：
1 | hexo g |
成功的输出如下：
部署到Github上：
1 | hexo d |
此时会出现以下错误：
这是因为没有安装相关的插件，输入以下命令安装即可：
1 | npm install hexo-deployer-git --save |
完成后重新输入hexo d部署即可，成功部署输出如下：
此时可以看到Github上该仓库已经上传了一些文件：
但因为我的仓库主分支是main而不是master，所以需要对这个仓库做个设置才能使Github Pages生效。
进入仓库的Settings，将分支切换为main，点击Save。
现在可以看到如下界面：
但是点击这个链接进去，依然是巨大的404：
经过排查发现找不到问题（可能是网络相关问题）？
那就稍微修改点啥，然后重新生成部署。
比如把author从Github-3rr0r修改为3rr0r，然后执行hexo clean清理生成的静态文件，之后重新生成文件并部署，刷新网页成功看到部署到Github上的博客主页：
与本地看到的是一致的，部署成功。
到这里搭建就已经完成啦，下面开始添加第一篇博文！
新建并发布博文
修改配置文件
这一步可以方便图片管理，在配置文件_config.yml中的Writing部分找到post_asset_folder项，将false修改为true：
1 | post_asset_folder: true |
现在新建博文的时候，就会同时也生成一个同名文件夹。
新建博文
以本文为例，在Powershell中输入如下命令：
1 | hexo new 通过GitHub搭建Hexo博客 |
运行结果如下：
现在可以看到**_posts**文件夹下多出了一个Markdown文件和一个文件夹，在文件中存放图片等资源文件即可，然后再md文件中使用相对路径引用资源。
md文件中会默认生成文章相关信息，可以自行修改。在其后按照Markdown格式写作即可，支持代码等一些特殊格式，用起来很方便。
推荐的Markdown编辑器是Typora。
编辑完成后，就可以使用输入hexo g和hexo s在本地预览了。
上传博文
确定无误后，输入hexo d就可以将新博文部署到Github上了。
效果如下：
但是存在两个问题，一是图片不能显示，二是首页就展示了整片博文。
图片不能正常显示问题的解决
对于第一个问题，需要下载一个插件来解决：
1 | npm install hexo-asset-image --save |
但是这个插件有问题，首页显示的博文依然不显示图片，这需要对该插件进行修改。
找了一些资料，并没有人给出可用的解决方案，只能自己排查了，最后确定修改方案如下。
在node_modules\hexo-asset-image中找到该插件，打开index.js文件，找到下面的代码：
1 | if(/.*\/index\.html$/.test(link)) { |
将else语句块中的var endPos = link.lastIndexOf('.');修改为var endPos = link.lastIndexOf('/');。也就是把点改成了斜杠。
重新hexo clean、hexo g、hexo d三连，就可以看到图片能够正常显示了。
不让博文完整显示
通过在markdown中插入以下标签可以解决问题：
1 | <!--more--> |
效果如下：
关于主题
关于主题就不多说了，个人比较喜欢NexT主题，一些配置也非常人性化，大家可以自己探索。