基于Hexo + pages github搭建个人blog站点

Posted on | In | |

之前都是把工作学习中写的文章记录在Evernote上，方便自己搜索，然后在CSDN上开了个blog，会发一些整理过的文章；
后来感觉有必要自己搭建个技术blog，记录自己的总结，方便自己也有利于他人，就开始搜索如何方便快捷搭建一个blog；
首先搜索到的是Jekyll + pages github，学习了半天后发现，想找个喜欢的模板不容易，搭建也不是分分钟的事情，后来就搜索到了Hexo + pages github的方案，应用后发现很便捷，这里记录下来。

创建github库

github相信大多数朋友都用过，这里介绍的是github提供的pages功能，可以很方便的搭建个人的静态网站，特别适合简介的blog系统；并且默认提供的二级域名就可以访问；

在自己的github账号下创建如下命名的repository：<your-github-name>.github.io，一切选择默认即可；
其中<your-github-name>即是你登录github账号的名字；
注意：别的名称的repository重命名为上述名称的repository不行

下载repository

1
2
3
$ mkdir YourGithubName.github.io
$ cd YourGithubName.github.io
$ git clone <git@github.com:YourGithubName/YourGithubName.github.io.git>

注：上述YourGithubName替换为你自己的github库名字

为了能有权限上传代码到repository，你需要生成自己的ssh-key，并填写到github的配置里；

  1. 首先本地生成ssh key

    1
    2
    $ ssh-keygen	// 一路回车，选择默认值即可
    $ cat ~/.ssh/id_rsa.pub

  2. 更新ssh key到github
    步骤为： 右上角头像 -> Settings -> SSH and GPG keys -> New SSH key
    然后填写Title，Key即可；
    Title 自己随便命名，Key 为上步骤中cat ~/.ssh/id_rsa.pub的值

Hexo初始化repository目录

上述我们clone下路的repository还是空目录一个，为了搭建网站，搜索我们需要的就是通过hexo命令来初始化该目录

首先安装hexo，请参考：https://hexo.io/zh-cn/docs/#安装

1
2
3
$ npm install -g hexo-cli
$ npm install hexo --save
$ npm install hexo-deployer-git --save	// hexo deploy到git时需要

初始化repository目录

1
2
3
4
5
$ cd YourGithubName.github.io
$ hexo init .
$ npm install
$ ls
_config.yml  node_modules package.json scaffolds    source       themes

这里我们主要关注的是：

  • _config.yml 文件：整个hexo的配置文件
  • source 目录：所有网站相关页面的目录，后续写的markdown文件都应该放在source/_post/目录下
  • themes 目录：hexo模板的目录，里面每个子目录都是一个hexo的模板

网站测试

初始化repository目录后，即可在本地测试下网站的功能步骤如下：

  1. 启动hexo server

    1
    2
    3
    $ hexo server
    INFO  Start processing
    INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

  2. 本地浏览器查看
    本地浏览器里输入: http://localhost:4000/ 访问

Hexo模板

Hexo包含了很多美观的模板，我们可以随便选择自己喜欢的Hexo模板来搭建网站
Hexo模板：https://hexo.io/themes/
我选择的是Next模板：https://github.com/idhyt/hexo-theme-next
还有一款简洁的模板：https://github.com/tufu9441/maupassant-hexo.git

选择好一个模板后，就可以把它下载到我们的repository里

1
2
3
$ git clone https://github.com/idhyt/hexo-theme-next.git themes/next
$ ls themes/next
README.en.md README.md    _config.yml  bower.json   languages    layout       scripts      source       test

theme里有自己的_config.yml文件，里面是主题相关的配置参数，详情请参考具体模板的README.md

配置repository目录下的_config.yml文件，指定使用模板：

1
2
3
4
5
6
7
8
9
10
$ vim _config.xml
...
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
...

然后修改上面的theme为next即可
theme : next

启动hexo server，本地测试下外观 ;)

更新blog

网站和选用的模式都确定后，下一步就是更新我们自己的blog了，通过hexo也是异常简单

1
2
$ hexo new mypage
INFO  Created: ~/YourGithubName.github.io/source/_posts/mypage.md

默认这里生产的mypage.md是没有日期格式的，这个可以在_config.yml里配置new_post_name

1
2
3
4
5
$ vim _config.yml
...
# Writing
new_post_name: :year-:month-:day-:title.md # File name of new posts
...

当然这里我们也可以自己在source/_posts/目录下创建markdown文件，填写自己的内容，为了支持分类和tag，建议markdown文件加入以下头部：

1
2
3
4
5
6
7
8
---
title: "my first blog"
date: 2016-08-11 17:31:17
tags: [tag1, tag2]
categories: life
---

blog正文

若你在 source 目录下没有看到 tags, categories 等目录，可以通过如下命令创建:

1
2
$ hexo new page tags
$ hexo new page categories

以上的目录需求跟你使用的模板息息相关，详情请仔细阅读hexo帮助文档和你选择模板的README.md。

更新网站内容到github

当本地网站测试满意后，我们就可以更新网站内容到pages github了

首先要配置_config.yml文件制定github repository

1
2
3
4
5
6
$ vim _config.yml
# 添加deploy配置
deploy:
  type: git
  repo: git@github.com:ictfox/ictfox.github.io.git
  branch: master

然后执行hexo命令部署

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

我写了个脚本来做部署这个事情，免得每次忘记执行某一步

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ cat deploy.sh
#!/bin/bash

hexo clean
if [[ $? -ne 0 ]]; then
    echo "hexo clean Error!"
    return 1
fi
hexo generate
if [[ $? -ne 0 ]]; then
    echo "hexo generate Error!"
    return 1
fi
hexo deploy
if [[ $? -ne 0 ]]; then
    echo "hexo deploy Error!"
    return 1
fi

更新成功后，我们就可以通过浏览器访问github的二级域名查看网站了，默认为：YourGithubName.github.io

申请域名

国内比较便捷的申请域名的服务是阿里和腾讯提供的

他们都需要注册对应的账户，登录后即可查询自己喜欢的域名是否还没有注册，然后按照流程注册即可。
我对比发现腾讯的价格便宜，就选择了腾讯的服务。
申请后可以在账号里看到自己的域名信息。

域名绑定

鉴于国内对cn域名的使用需要审核，这里依com域名为例，cn域名审核后的步骤一样；

github添加CNAME文件

1
$ echo 'www.yangguanjun.com' > source/CNAME

然后执行deploy.py脚本提交到github repository

解析com域名

在域名提供商的console界面里，找到域名后面的解析按钮，在里面添加CNAME的解析记录

然后访问域名就可以了 ;)

其他功能

我选择的Next模板里，默认的 搜索 和 评论 功能是关闭的，而这两个还是挺有用的，自己可以配置打开

搜索功能

Next主题里支持 tinysou 和 swiftype 两种搜索功能，我这里实践了 swiftype，感觉还是不错的

配置文件修改：

1
2
3
4
$ vim themes/next/_config.yml
...
swiftype_key: 'your swiftype key'
...

swiftype官网：https://swiftype.com/
参考文章：http://prozhuchen.com/2015/10/03/Hexo%E5%8D%9A%E5%AE%A2%E7%AC%AC%E5%9B%9B%E7%AB%99/

评论功能

Next主题里支持 duoshuo 和 disqus 两种评论功能，duoshuo 马上就要关闭支持了，我就选择了国外的 disqus，但也有个问题，这个disqus是被墙的 ;(，不翻墙的用户是刷不出来的。。。

配置文件修改：

1
2
3
4
$ vim themes/next/_config.yml
...
disqus_shortname: ictfox
...

Disqus官网：https://disqus.com/
参考文章：http://www.lmnsyunhao.cn/2017/03/29/hexo-disqus-comments/

参考文章

https://hexo.io/zh-cn/docs/
http://www.jianshu.com/p/834d7cc0668d
https://wsgzao.github.io/post/hexo-guide/
https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/

支持原创