Github Pages + Hexo

Posted on 2017-04-26 Edited on 2021-10-21 In 博客

博客站点迁移

阿里云服务器快要到期不想再续，遂决定将博客迁移到免费的GitHub Pages上。

概述

Github Pages+Hexo(不使用Jekyll是因为没有找到好看的主题)

在GitHub上创建GitHub Pages
配置本地Hexo环境，并与GitHub Pages绑定
绑定域名

创建Github Pages

直接在GitHub网站上创建一个仓库，仓库名必须为myusername.github.io。

安装并配置Hexo

Step1. 根据Hexo中文文档中的提示进行安装：

#先安装依赖库Node.js（假定已经安装好了Git）
$ brew install Node.js
#下载安装Hexo
$ npm install -g hexo-cli

Step2. 开始在本地建站

1
2
3

$ hexo init <Blogfolder>
$ cd <Blogfolder>
$ npm install

Step3. 在博客文件根目录下打开终端，启动本地服务器查看建站是否成功。成功后可以在localhost:4000浏览博客Hello World。

$ hexo s

Step4. 根据Hexo配置文档部署网站到github pages
a. 修改站点配置文件_config.yml(Blogfolder/_config.yml)中的Deployment模块，把其中repo字段的值替换成自己github pages提交代码的git地址。(如果使用ssh，将repo改为相应ssh地址)

deploy:
  type: git
  repo: https://github.com/HuiZhangDB/HuiZhangDB.github.io.git
  branch: master

b.安装Hexo的Git部署插件hexo-deployer-git

1	$ npm install hexo-deployer-git --save

c. 现在可以把它发布到GitHub Pages上啦！

1
2
3

$ hexo clean  #清除缓存，在更改主题等后要使用
$ hexo g      #生成静态文件
$ hexo d      #部署网站

d. 在浏览器输入http://myusername.github.io可以看到自己的博客啦~

Step.5 自定义Hexo主题
Hexo模板中有许多好看的模板可以选择，我选择了简洁好看的even主题。它的主题文档很详细地写了设置步骤，这里不再赘述。

如果以后要更新Hexo版本，只需要在博客根目录下运行 npm update

绑定域名

购买域名
选择一个DNS解析服务器
域名解析到myusrname.github.io，以及Github Pages提供的IP:
1
2
192.30.252.153
192.30.252.154
在本地站点的source文件夹中创建CNAME文件，填写域名（不加http://）
将本地站点部署更新到Github Pages
等待DNS解析生效
可以在浏览器输入自己的域名查看博客啦！

可以开始写文章啦！

为了方便管理文章中的图片等资源，可以开启Hexo的资源文件管理功能

1 2	#将站点配置文件_config.yml中的post_asset_folder选项设为true来打开 post_asset_folder: true

接下来就可以开始自由写作啦~

$ hexo new (post) title
...writing
$ hexo clean
$ hexo d -g

为了方便文章管理，Hexo提供了可视化写作插件hey，优点是可以拖拽图片，缺点是不方便随时写作。

第三方服务设置

添加统计分析

主题even提供了对于百度统计和Google统计的支持，只需要修改主题配置文件中的baidu_analytics或google_analytics字段，填写analytics id就可以开启统计。

例如开启百度统计：
step1. 在百度统计网站注册账号
step2. 添加自有网站
step3. 获取统计代码，得到其中的baidu analytics id

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?this_code_is_the_baidu_analysis_id";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

step4. 将baidu analytics id填入主题配置文件的baidu_analytics字段。
step5. 百度统计网站上检查代码成功，过一会就可以查看分析报告啦！

致谢

HuisBlog博客搭建过程主要参考水瓶座iOSer的简书，在此提出感谢。