使用Hexo+GitHub Pages部署静态个人博客


最近将博客从旧的腾讯云服务器上迁移到了GitHubPages,顺带将原本的WordPress换成了Hexo。一是WordPress用着着实卡手,有点难受。二是相较于Hexo这种静态部署的网站,WordPress确实不算安全。原本想着偷懒才选择的腾讯云服务器+WordPress的预装组合,最后却反倒推动自己去从零到一建立一个静态网站。在过程中遇到过不少问题,网上能搜索到的教程总是有些地方存在些许问题,遂写一篇部署教程,以供后来者在网上检索教程时参考。

0.前期准备

建立GitHubPages站点需要在GitHub中新建一个仓库用来存放站点文件,且仓库名字只能为username.github.io,访问时也使用 https://username.github.io 进行访问。完成站点建设之后可以在仓库设置里解析到自己的域名。(这里我就默认你已经创建好了GitHub账户。)本教程部署基于GitHubPages,所以需要安装git,安装完成后在终端输入git –version,如果显示版本号则说明安装成功。
Hexo是基于Node.js的静态博客框架,所以需要安装Node.js,安装完成后在终端输入node -v,如果显示版本号则说明安装成功。
Node.js和git在安装后一般会自动添加到系统环境变量中,所以不需要额外配置。如果没有配置环境变量,可以去配置一下。测试安装是否成功。
检测版本

1.本地站点建立

我们使用Hexo部署的是静态网站,所以需要我们手动将站点的一些文件和后续写的文章手动上传到服务器上,所以我推荐使用GitHubPages来作为托管服务器,不管是初立站点还是后续更新,都能方便快捷的使用Git从本地推送到GitHub的仓库。
我们首先需要在自己的电脑上新建一个文件夹Blogs,推荐在非C磁盘的根目录下创建方便后续寻找,或者使用快捷方式从桌面指向文件夹(C盘大的直接创建在桌面也可以)。
文件夹创建完成后进入文件夹,右键鼠标,选择在终端中打开,输入以下命令安装Hexo:bash npm install -g hexo-cli 安装完成后输入hexo -v,如果显示一大堆东西,第一行是hexo-cli版本号则说明安装成功。
hexo
在终端中输入bash hexo init,此时你的文件夹中会多出一些文件,这些文件就是你的站点文件,后续你写的文章也会存放在这个文件夹中。
输入bash hexo g,此时你的文件夹中会多出一个public文件夹,这个文件夹就是最终部署到GitHub上的文件。执行bash hexo s,启动本地服务,在浏览器中输入http://localhost:4000/,如果显示的是hexo样例页面,则说明站点建设成功。如果页面加载不出来,可能是默认的4000端口被占用了,可以输入``` bash hexo s -p 8888 ```将端口更改为未被占用的端口再访问。
hexo
在hexo文件夹中,source文件夹是存放文章、图片、页面等资源的文件夹,themes文件夹是存放主题的文件夹,_config.yml是站点配置文件。

2.部署站点

本地站点部署完成后,我们需要将站点文件上传到GitHub仓库以便从互联网访问。首先安装hexo-deployer-git插件,在终端中输入bash npm install hexo-deployer-git --save,安装完成后编辑_config.yml文件,修改以下内容:
hexo
type就是部署到仓库的方式,这里我们用git;repo就是你的仓库地址,https://xxxxxxxxxx@github.com/YanHuoLG/YanHuoLG.github.io.git,此处的xxxxxx是你的personal access token;branch就是部署到仓库的哪个分支,这里我用的是master分支。分支名字没有固定的格式,但是必须保证分支在仓库是存在的。修改完成后,在终端中输入bash hexo d,将站点文件推送到GitHub仓库中。此时打开你的GitHub仓库,应该可以看到仓库中多出了很多文件,这些文件就是你的站点文件。此时打开https://username.github.io,应该可以看到你的站点已经部署成功。
仓库地址获取可以进入到站点仓库的页面,点击绿色code按钮,复制https地址。
hexo
在github.com前面加一个@符号,在xxxxxx的位置填入你的personal access token,保存编辑即可。token的获取:点击自己的头像,在弹出的菜单中选择Settings,在左侧菜单中选择Developer settings,在左侧菜单中选择Personal access tokens,选择token(classic),点击右上角的Generate new token,在Note中填入名字,选择repo,点击Generate token,此时会弹出一个窗口,复制窗口中的token,保存编辑即可。

3.解析到域名

域名可以在腾讯云服务器上购买,但是国内建站需要考虑备案问题。所以可以去购买国外的域名。我这里直接使用了腾讯云的域名。在你的GitHub站点仓库的根目录下创建一个文件,命名为CNAME,文件中填入你的域名,保存编辑提交commit,你的域名就会解析到你的GitHub仓库服务器了。但是直接在仓库创建CNAME文件会导致你每次更新站点时文件被删除,所以你需要在hexo的source文件夹下创建一个一样的CNAME文件,这样每次更新站点时CNAME文件就会一同上传的仓库了。上传完文件后还需要再域名解析管理中手动添加解析记录,这样才能正确解析到GitHub的服务器。点击添加记录,主机记录选择www,记录类型为A,线路类型默认。记录值填写GitHub的服务器ip,这里我填的是185.199.108.153,保存编辑即可。同样的方式再添加一条主机记录为@的解析记录。www记录实现的是通过www.yourdomain.com访问你的网站,@记录实现的是通过yourdomain.com访问你的网站。
hexo
最后再通过自己的域名访问,看看是否成功解析。能够正常显示页面的话说明解析成功,你就可以愉快的开始写作之旅了!


文章作者: YanHuoLG
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 YanHuoLG !
  目录