使用hexo+github pages搭建博客

落日映苍穹つ 2022-05-24 09:29 269阅读 0赞

## 为什么写博客 ##

就如我在[博客][Link 1]主页上所说，主要有三点：

1.  记录与分享
2.  锤炼技术，提高写作能力和表达能力
3.  树立个人品牌，提高影响力

而在此博客之前，我在CSDN上（[小旋锋的博客][Link 2]）写过一些博客，截止于2018年5月23日，个人资料如下：

![小旋锋的csdn个人资料][csdn]

当我在CSDN上写博客的时候，几乎每天都会去看看阅读量增加了多少，排名增加了多少，又增加了几个粉丝或者新评论，每每都会带给我兴奋感，让我感到写博客其实是一件很有意义的事情，并且反过来推动我学习和记录，写更多的博客。

而为什么现在要重新整一个博客呢？主要是因为之前CSDN的博客更多的是转载和低质量的，而博主即将毕业，正走在程序员的职业道路上，需要树立个人品牌，写博客是目前对我比较合适且能做到的方式。

而独立博客自由度更高，第三方博客平台推广则更快，所以最终决定采用独立博客首发，第三方平台分发引流的模式。

我的第三方平台账户：

*  [小旋锋的简书][Link 3]
 *  [小旋锋的csdn博客][Link 2]
 *  [小旋锋的知乎][Link 4]  
    ![小旋锋的微信公众号][70]

## Hexo主题选择 ##

[Hexo][] 是一个快速、简洁且高效的博客框架，可托管于github pages，可免去维护服务器的麻烦，博主们可更专注于内容的创作，并且Hexo主题众多，总有一款适合你。

我对主题的要求主要有：  
1. 不要太大众  
2. 大气美观  
3. 功能齐全

经过了几天的搜索之后，筛选了几个比较满意的Hexo主题如下：

1.  [Hueman][]
2.  [jacman][]
3.  [大道至简][Link 5]
4.  [Loo’s Blog][Loo_s Blog]
5.  [3-hexo][]

最终选择了 [3-hexo][] 这款主题，当然还有很多不错的主题。

## 搭建步骤 ##

### 1. 根据 [Hexo官网][Hexo] 步骤安装 git，node.js ###

### 2. 安装Hexo ###

npm install -g hexo-cli

安装 Hexo 完成后，新建一个博客的主目录，然后执行以下命令：

hexo init <folder>
    cd <folder>
    npm install

├── \_config.yml \# 网站的 配置 信息

├── package.json \# 应用程序的信息

├── scaffolds \# 模板文件夹

├── source \# 博文源文件目录

| ├── \_drafts \# 草稿文件夹

| └── \_posts \# 博文文件夹

└── themes \# 主题文件夹

再执行以下命令，访问 [http://localhost:4000][http_localhost_4000] 即可快速体验Hexo

hexo g
    hexo s

![Hexo初体验][Hexo 1]

### 3. 根据 [Hexo文档][Hexo 2] 对网站做一些简单的配置，然后修改主题为 [3-hexo][3-hexo 1] ###

安装

git clone https://github.com/yelog/hexo-theme-3-hexo.git themes/3-hexo

修改hexo根目录的\_config.yml中的theme参数

theme: 3-hexo

然后执行 hexo clean & hexo g & hexo s 即可看到效果

更多的主题配置可见 [3-hexo使用说明][3-hexo]

### 4. 配置 github pages ###

到github上创建一个新的空仓库，名字格式为 账户名.github.io，譬如我的github账户名是 [whirlys][]，所以我的github pages 仓库的名字应为 whirlys.github.io

安装插件

npm install hexo-deployer-git --save

然后配置 Hexo根目录的 \_config.yml，xxx为你的用户名，注意还需要加入你的 github 用户名和密码，不然后面推送失败（但是上传代码时注意防止密码泄露）

deploy:
      type: git
      repo: https://[github用户名]:[github密码]@github.com/xxx/xxx.github.io.git
      branch: master

如果你是第一次配置 github 远程仓库，你还须将你电脑的ssh key 配置到 github 上，具体可参考 [git远程仓库][git]

推送Hexo到github

hexo deploy

访问 xxx.github.io 即可看到你的 github pages 博客了

### 5. 绑定私有域名 ###

我的域名为 laijianfeng.org，是一年前买 腾讯云1元学生主机 时送的，当然可以选择其他域名提供商

在 hexo source 目录下新建一个 CNAME 文件（没有后缀名），在文件里填入你的域名，然后 hexo d 推送到github

登录域名提供商网站，进入域名解析页面，分别添加两条记录

<table> 
 <thead> 
  <tr> 
   <th>主机记录</th> 
   <th>记录类型</th> 
   <th>线路类型</th> 
   <th>记录值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@</td> 
   <td>CNAME</td> 
   <td>默认</td> 
   <td>xxx.github.io</td> 
  </tr> 
  <tr> 
   <td>www</td> 
   <td>CNAME</td> 
   <td>默认</td> 
   <td>www.xxx.github.io</td> 
  </tr> 
 </tbody> 
</table>

等待十分钟之后，访问你的域名即可跳转到你的博客

### 6. 其他的配置 ###

*  接入评论，3-hexo主题中已经集成了多种评论，我选择了gitment，具体的配置参考 [完美替代多说-gitment][-gitment]，如果gitment遇到问题，譬如报Error：validation failed异常，可参考 [添加Gitment评论系统踩过的坑][Gitment] 以及 [gitment issue][]上的解决方法
 *  使用七牛云图床，参考 [使用七牛为Hexo存储图片][Hexo 3] 和 [Hexo七牛同步插件][Hexo 4]
 *  代码高亮，字数统计，参考 [Hexo主题3-hexo][Hexo_3-hexo]

> 更多内容，请访问我的个人独立博客 [小旋锋][Link 1]

[Link 1]: http://laijianfeng.org/
[Link 2]: https://blog.csdn.net/wwwdc1012
[csdn]: /images/20220524/b640e93f4dc94d8dab2e95b3e6915a6a.png
[Link 3]: https://www.jianshu.com/u/ae269fd3620a
[Link 4]: https://www.zhihu.com/people/whirlys/activities
[70]: /images/20220524/c62cead8cdc7414d88fd4269a4a4283c.png
[Hexo]: https://hexo.io/zh-cn/docs/index.html
[Hueman]: http://blog.zhangruipeng.me/hexo-theme-hueman/about/index.html
[jacman]: http://jacman.wuchong.me/2014/11/20/how-to-use-jacman/
[Link 5]: https://www.haomwei.com/
[Loo_s Blog]: http://threehao.com/
[3-hexo]: http://yelog.org/2017/03/23/3-hexo-instruction/
[http_localhost_4000]: http://localhost:4000
[Hexo 1]: /images/20220524/0751bcd282bf4ab4ba776dc7575fcf8a.png
[Hexo 2]: https://hexo.io/zh-cn/docs/configuration.html
[3-hexo 1]: https://github.com/yelog/hexo-theme-3-hexo
[whirlys]: https://github.com/whirlys
[git]: https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374385852170d9c7adf13c30429b9660d0eb689dd43a000
[-gitment]: http://yelog.org/2017/06/26/gitment/
[Gitment]: http://xichen.pub/2018/01/31/2018-01-31-gitment/
[gitment issue]: https://github.com/imsun/gitment/issues
[Hexo 3]: http://skyhacks.org/2017/08/02/UseQiniudnToStorePic/
[Hexo 4]: https://github.com/gyk001/hexo-qiniu-sync
[Hexo_3-hexo]: http://yelog.org/2017/03/07/3-hexo/