使用 Github 和 Hexo 搭建个人博客

Posted on | In | | 阅读次数

平时在网上查文档的时候经常能看到一些非常好的博客，然后就想着自己也搭一个，一方面可以记录一些问题的解决方法，以便查阅，另一方面希望能促使自己多总结，多写文档。所以，经过这几天的折腾，终于把基本功能都搭好了。下面是搭建过程的记录，以下操作在 ubuntu14.04 x86_64中进行。

0x01 安装Node.js

1. 通过nvm安装Node.js

1
2
3
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | sh
$ nvm ls-remote
$ nvm install v7.9.0

2. 测试

安装完后可以新建一个简单的 hello.js 测试是否安装成功，hello.js 代码如下：

1
2
3
4
5
6
var http = require('http');
http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8808, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8808');

进入该文件所在目录，在终端输入node hello_node.js，然后用浏览器打开http://127.0.0.1:8808 即可看到 “Hello Word”。

0x02 安装与配置Github

1. 安装Git

1
$ sudo apt-get install git-core

2. 配置ssh keys

首先检查现有的 ssh key：

1
$ cd ~/.ssh

如果没有 key 则生成新的 ssh key：

1
2
3
$ ssh-keygen -t rsa -C "your email@163.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/home/xx/.ssh/id_rsa):

按回车键后提示输入密码，该密码用于提交项目时的验证，可防止别人往你的项目里提交内容。

1
2
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

成功生成 ssh key 之后可以看到以下内容：

1
2
$ ls
id_rsa  id_rsa.pub  known_hosts

在本地生成 ssh key 后需要添加到 Github 上，点击Setting->SSH and GPG keys->New SSH key，将 id_rsa.pub 中的内容复制到Key中。

3. 测试

配置好后可以测试一下，执行 $ ssh -T git@github.com，若返回以下内容则配置成功！

1
Hi xx! You've successfully authenticated, but GitHub does not provide shell access.

4. 设置用户信息

Git 会根据用户的名字和邮箱来记录提交。

1
2
$ git config --global user.name "your name"
$ git config --global user.email "your email on github"

0x03 安装与配置Hexo

1. 安装 Hexo

进入需建立博客的目录，输入以下命令安装Hexo：

1
$ npm install hexo-cli -g

以后可以使用$ nmp update hexo –g命令更新Hexo。

2. 初始化

安装 Hexo 完成后，在当前博客目录下列命令，Hexo 将会在指定文件夹中新建所需要的文件：

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml    // 网站的 配置信息，可以在此配置大部分的参数
├── package.json    // 应用程序的信息
├── scaffolds    // 模版文件夹。新建文章时，Hexo 会根据 scaffold 来建立文件
├── source        // 资源文件夹是存放用户资源的地方
|   ├── _drafts
|   └── _posts
└── themes    // 主题 文件夹。Hexo 会根据主题来生成静态页面

3. 测试

配置好后启动服务器，在浏览器中访问http://localhost:4000/可以看到一篇默认文章。

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

0x04 部署到Github

1. 创建github仓库

点击右上角“+”-> new repository，输入Repository name 为yourname.github.io，yourname 必须与 git 用户名一致，并且这将会是 blog 的域名。

2. 修改配置文件

修改_config.yml文件中的参数，将Hexo与github上的仓库关联。修改如下，注意冒号后面有一个空格：

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io
  branch: master
  message:

参数描述：

参数 描述
repo 库（Repository）地址
branch 分支名称。如果您使用的是 GitHub 或 GitCafe 的话，程序会尝试自动检测。
message 自定义提交信息 ( 默认为 Site updated:now(‘YYYY-MM-DD HH:mm:ss’))

3. 安装 hexo-deployer-git

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

4. 部署到github

1
2
3
4
$ hexo deploy
INFO  Start processing
...
INFO  Deploy done: git

成功后就可以通过浏览器访问https://yourname.github.io/。

0x05 使用NexT主题

Hexo 安装主题的方式非常简单，只需要将主题文件拷贝至站点目录的 themes 目录下， 然后修改下配置文件即可。

1. 下载主题

下载完后复制到themes目录下。

1
git clone https://github.com/iissnan/hexo-theme-next.git

2. 修改配置文件

打开 Blog 目录下站点配置文件 _config.yml，将 theme 修改给主题文件夹名称。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

3. 测试

执行 $ hexo s --debug 验证主题是否启用，在浏览器中访问http://localhost:4000，查看效果。

0x06主题优化

主题目录下同样有一个配置文件 _config.yml，可以修改相关参数对主题做修改。

1. 选择外观

找到 Scheme 可以选择不同的外观。

1
2
3
4
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

2. 设置语言

打开站点配置文件，修改 language 字段。

1
language: en

3. 设置头像

将头像放置主题目录下的 source/uploads/，修改 avatar 字段。

1
avatar: /uploads/avatar.jpg

4. 设置RSS

1）安装插件。

1
$ npm install hexo-generator-feed

2）设置站点配置文件，添加以下内容：

1
2
3
4
5
6
7
8
# Plugins
## RSS
feed:
  type: atom    #feed type: atom or rss2
  path: atom.xml    #feed path
  limit: 20
  hub:
  content:

5. 添加标签[tags]页面

1）首先，执行$ hexo new page tags 新建tags 页面，然后修改刚新建的页面：

1
2
3
4
5
6
---
title: tags
date: 2017-04-19 21:18:05
type: "tags"
comments: false
---

2）编辑文章时，通过以下方式设置文章标签：
tages: [标签1,标签2,...标签n]

6. 添加分类[categories]页面

执行$ hexo new page tags 新建一个页面，然后修改刚新建的页面：

1
2
3
4
5
6
---
title: categories
date: 2017-04-19 21:25:38
type: "catgories"
comments: false
---

7. 设置分类

修改站点配置文件中category_map 字段设置分类名。

1
2
3
4
5
6
7
# Category & Tag
default_category: uncategorized
category_map:
  Category1:
  Category2:
  Category3:
tag_map:

8. 设置代码高亮

修改站点配置文件中 highlight_theme 字段。

1
highlight_theme: night bright

9. 修改文章内链样式

将内链设置为蓝色，鼠标选中时显示下划线。在 themes/next/source/css/_custom/custom.styl 中添加如下样式：

1
2
3
4
5
6
7
8
.post-body p a {
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

10. 图片居中

修改/themes/next/source/css/_schemes/Mist/目录下的 _posts-expanded.styl。

1
2
3
.post-body img { margin: 0 ; }
改为
.post-body img { margin: 0 auto; }

通过网站 favicon 在线制作制作 favicon 图片，把图片放在/themes/next/source/image 目录中，然后修改主题配置文件：

1
favicon: images/favicon.ico

12. 首页文章摘要

在首页只显示文章部分摘要，点击 “Read more” 查看全文。修改主题配置文件：

1
2
3
auto_excerpt:
  enable: true
  length: 150

13. 更改内容区域的宽度

编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

1
2
3
4
// change width when width of screen < 1600px
$content-desktop = 800px
// change width when width of screen >= 1600px
$content-desktop-large = 1000px

14. 访客量与阅读量统计

使用不蒜子统计，修改主题配置文件的 busuanzi_count 的配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 阅读次数
  page_pv_footer:

15. 添加本地搜索

使用NexT主题内置的本地站内搜索，执行 $ npm install hexo-generator-search --save 安装插件，然后在站点配置文件中，添加以下内容到任意位置。

1
2
3
4
path: search.xml
field: post
format: html
limit: 10000

编辑主题配置文件：

1
2
3
# Local search
local_search:
  enable: true

16. 添加评论功能

next 主题支持 Disqus，Hypercomments，网易云跟贴等多种第三方评论系统，这里采用网易云跟帖。
1）首先，登录网易云跟帖，填写站点信息，其中，站点网站为 blog 地址，要求必须为独立域名，github.io 无法收录。
2）然后点击获取代码，进行皮肤和功能的设置。
3）最后点击 APP SDK 获取 KEY。修改blog主题配置文件，将key填入相应字段。
4）重新部署 blog 即可生效。

1
2
# Gentie productKey
gentie_productKey: xxxxxxxxxxxxxxxxxxxxxxxxxxx

17. 设置文章目录

开启文章目录生成功能，并取消自动生成标题序号。

1
2
3
4
5
6
# Table Of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: false

18. 链接标题翻译

使用 hexo-translate-title 插件可将 Hexo 中的汉字标题转成英文标题。使用以下命令安装。

1
npm install hexo-translate-title --save

配置 hexo 根项目下的 _config.yml 文件。

1
2
3
4
5
6
7
8
translate_title:
  translate_way: google  # google,youdao,baidu_with_appid,baidu_no_appid
  youdao_api_key: '' # Your youdao_api_key
  youdao_keyfrom: xxxx-blog # Your youdao_keyfrom
  is_need_proxy: false     # true | false
  proxy_url: http://localhost:50018 # Your proxy_url
  baidu_appid: '' # Your baidu_appid
  baidu_appkey: '' # Your baidu_appkey

修改 hexo 根目录下 _config.yml 中 permalink 从 :title 修改为 :translate_title 即可。

1
permalink: :year/:month:day/:translate_title.html

0x07 域名绑定

1. 购买域名

首先需要购买一个域名，我是在腾讯云买的，支付后要进行实名认证才能正常使用。

2. 创建 CNAME

在 blog 目录下的 source 文件夹中新建文件 CNAME，并将域名写入该文件。之后重新部署blog。

3. 配置域名解析

添加以下3条记录：

1
2
3
@          A             192.30.252.153
@          A             192.30.252.154
www      CNAME           username.github.io

设置好后可能需要等一段时间才能生效。

0x08 SEO优化

为了能让 Google 能搜到 blog 中的内容，需要优化站点的 SEO（Search Engine Optimization）。

1. 添加sitemap

首先 执行 npm install hexo-generator-sitemap --save 安装 sitemap 生成插件，然后在站点配置文件添加如下内容：

1
2
3
##sitemap
sitemap:
  path: sitemap.xml

2. 添加 robots.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# hexo robots.txt
User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /about/
Allow: /tags/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/
Sitemap: http://0x4c43.cn/sitemap.xml

3. 验证 blog 网站

进入 Google 搜索引擎入口，添加属性 > 备用方法 > HTML 标记，将 Google 的 html 标签，添加到 /themes/next/layout/_partials/head.swig 文件中，重新发布 blog，点击验证。

1
<meta name="google-site-verification" content="-rILxxxxx7gbfxxxxx-E1VWxxxxxTcq6pxgs_xxxxx" />

4. 收录站点

点击网址 > 抓取 > 站点地图 > 添加测试站点地图 > 填写sitemap.xml > 提交。大概过一天之后便能通过Google搜索到。

5. 给出站链接添加 “nofollow” 标签

nofollow 标签是由谷歌领头创新的一个 “反垃圾链接” 的标签，并被百度、yahoo 等各大搜索引擎广泛支持，引用 nofollow 标签的目的是：用于指示搜索引擎不要追踪（即抓取）网页上的带有 nofollow 属性的任何出站链接，以减少垃圾链接的分散网站权重。

a．打开/themes/next/layout/_partials/footer.swig，将代码中的a标签加上 rel=”external nofollow”属性：

1
2
3
<a class="theme-link" href="https://hexo.io" rel="external nofollow">Hexo</a>
<a class="theme-link" href="https://github.com/iissnan/hexo-theme-next" rel="external nofollow">

b．打开/themes/next/layout/_macro/sidebar.swig 文件，将下面代码中的a标签加上 rel=”external nofollow” 属性：

1
2
3
<a href="{{ link }}" title="{{ name }}" target="_blank" rel="external nofollow">
<a href="https://creativecommons.org/{% if theme.creative_commons === 'zero' %}publicdomain/zero/1.0{% else %}licenses/{{ theme.creative_commons }}/4.0{% endif %}/" class="cc-opacity" target="_blank" rel="external nofollow">

6. 添加文章 keywords 和 description

在\scaffolds\post.md 中添加以下内容：

1
2
keywords:
categories:

新建post的时候添加keywords，会自动转成 <meta name="keywords" content="XXX" />。

7. 优化首页 title

修改\themes\next\layout\index.swig文件：

1
2
3
{% block title %}  {{ config.title }}  {% endblock %}
改成
{% block title %}  {{ config.title }} - {{ theme.description }}  {% endblock %}

8. 修改网站链接

编辑站点配置文件，将 url 修改为网站域名：

1
url: http://0x4c43.cn

9. 修改文章链接形式

默认文章链接形式为domain/year/month/day/title，以改成domain/title 的形式，修改站点配置文件中 permalink 字段：

1
permalink: :title/

0x09 Blog备份与恢复

Hexo blog 发布后，在 github 仓库中只保存有生成的静态文件，而 blog 的源文件：主题和文章等只保存在本地。为了避免电脑出故障导致数据丢失带来的麻烦，可以将源文件备份到 github 上。

1. 备份

1）修改.gitignore 文件

指定部分文件不备份。

1
2
3
4
5
6
7
8
9
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
.deploy_git
themes

2）生成 git 仓库

在站点根目录下执行 git init。

3）添加远程仓库

1
git remote add origin https://github.com/0x4C43/0x4C43.github.io.git

4）新建分支

在站点根目录下执行 git checkout –b Hexo 新建分支 Hexo 用于备份源文件。

5）添加到本地分支

将站点源文件提交到本地 Hexo 分支。

1
2
git add .
git commit –m “blog”

6）push 到远程分支

执行 git push origin Hexo:Hexo 将本地 Hexo 分支推送到远程 Hexo 分支。

注：push 操作时出现错误及解决方法：

1
2
3
4
error: unable to create directory for .git/logs/refs/remotes/origin/Hexo
error: Cannot update the ref 'refs/remotes/origin/Hexo'.
solution:
sudo chown -R username .

7）成功备份

之后写文章之后都先备份，再发布。

1
2
3
4
5
6
git add .
git commit –m “blog”
git push origin Hexo:Hexo
hexo clean
hexo d -g

2. 恢复

当需要在另一台电脑上写 blog 时，可以通过以下方式恢复 Hexo 环境。
1）下载 Node.js 并安装
2）下载安装git
3）下载安装hexo
4）恢复源文件
通过 Git 克隆备份的 blog：

1
git clone git@github.com:0x4C43/0x4C43.github.io.git

5）切换到Hexo分支

1
git checkout  Hexo

6）安装 git 部署插件

1
npm install hexo-deployer-git

之后就可以更新 blog 了。

0x0A 备份Next主题

1. 将主题 fork 到自己仓库

2. 获取主题

执行以下命令下载主题到本地。

1
git submolule add git@github.com:0x4C43/hexo-theme-next.git

3. push 到远程分支

将修改好主题后 push 到远程分支。

1
2
git commit -am "update theme"
git push origin

4. 恢复主题

在需要恢复主题时，执行如下命令：

1
2
git submodule init
git submodule update

Reference:
[1] Hexo 官方文档：https://hexo.io/zh-cn/docs/setup.html
[2] NexT 主题官网：http://theme-next.iissnan.com/
[3] Hexo-GitHub Page 博客绑定域名：http://ccxxmd.me/2017/03/04/Blog_domainname/
[4] 推荐网易云跟帖：https://blog.vadxq.com/dstogentie/
[5] Hexo Next 主题 SEO 优化：http://fanjun.im/2016/09/hexo_next_seo.html
[6] Hexo 博客备份：http://nhsensation.xyz/2016/03/14/move-blog/
[7] 备份 Hexo 源文件至 GitHub：http://www.leyar.me/backup-your-blog-to-github/