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

之前都是把工作学习中写的文章记录在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/

支持原创