Hexo + github 打造個人博客

前兩年開始用 wordpress 搭了一個網站，但服務器是在 Linode 上，之所以要放在 Linode 上，要從買的域名說起，因為我買的域名是 fengzheng.pub ，.pub 是不允許備案的，所以不能解析到國內的服務器，例如阿里雲上，所以只能部署在國外的服務器。

但是由於網絡方面的限制，導致網站訪問速度一直不是很快，因此，也還是在博客園和這個網站雙份維護。

這兩天借助 Hexo 和 github ，將網站遷移到了 GitHub Pages，GitHub Pages 提供免費的空間，可以借助一個特殊的 github 倉庫，完成一個個人網站的運行。

Hexo 是什么

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

安裝部署步驟

本地部署 Hexo

1、安裝 nodejs ，不做介紹；

2、安裝 git ，不做介紹；

3、安裝 hexo-cli ，命令如下：

npm install hexo-cli -g

4、新建一個本地目錄，例如 /Users/fengzheng/fengzheng-blog，進入此目錄cd /Users/fengzheng/fengzheng-blog

5、執行 Hexo 初始化命令：

//其中 blog 是自己定義的博客根目錄名稱，可以自定義 例如 hexo init my-blog
hexo init blog

6、進入目錄 blog ， cd blog；

7、安裝依賴模塊，執行命令 npm install ；

8、清理 hexo ,類似於清理編譯結果，例如 mvn clean, 執行命令 hexo clean；

9、生成靜態頁面, 執行命令 hexo g；

10、啟動服務，執行命令 hexo s ,默認在 4000 端口啟動，訪問本地4000端口即可查看本地網站；

更換主題 NexT

NexT 主題是 Hexo 最流行的主題了，界面簡潔，做技術博客再適合不過了。

1、下載 NexT，此時還是在 blog 目錄下，執行如下命令：

$ mkdir themes/next
$ curl -s https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

2、修改網站 _config.yaml 配置文件，設置 theme: next ，next 即為主題名稱。順便修改一下網站的基本屬性（標題、描述、作者、語言等），例如：

title: 古時的風箏
subtitle:
description: 一個不只是關注技術的技術人的技術博客。
author: 風箏
language: zh-Hans

請注意，每個 key 的冒號后面需要一個空格（必須的），否則會報錯。

3、之后執行命令，重新生成並啟動網站：

hexo clean
hexo g
hexo s

4、NexT 主題自帶 4 中不同的風格，稍有不同，可以依次看一下效果，選一個你喜歡的，分別是：

#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

部署到 github

1、首先要有 github 賬號，然后創建一個名稱為 {用戶名}.github.io 的倉庫，其中用戶名是你的 github 賬號名稱，例如我的就是 huzhicheng.github.io。這是一個固定的格式，必須要這么創建，才能配合 Github Pages 使用，並且每個賬號只能有一個這種倉庫。

2、設置部署類型和 github 倉庫位置和主分支，到網站配置文件 _config.yml 中修改如下：

表示部署類型為 git；

倉庫為 [e-mail]:huzhicheng/github.io.git ，替換成你的倉庫即可；

分支為 master 主分支；

deploy:
  type: git
  repo: [e-mail]:huzhicheng/github.io.git
  branch: master

3、安裝 git 擴展模塊 hexo-deployer-git，到 blog 目錄中執行命令：

 npm install hexo-deployer-git --save

4、執行命令 hexo d ，部署到上面創建的 github 倉庫中。

這一步就是向 github 倉庫的master 分支提交文件，所以本地要有權限向你的 github 倉庫提交。需要 sshkey,至於怎么添加 sshkey，如果不清楚，查一下就知道了。

最后執行成功顯示如下：

To github.com:huzhicheng/github.io.git
 * [new branch]      HEAD -> master
Branch master set up to track remote branch master from [e-mail]:huzhicheng/github.io.git.
INFO  Deploy done: git

5、到這一步，通過地址 https://huzhicheng.githubio 就可以訪問了。

分類、標簽頁和新文章

添加分類頁

1、新建一個分類頁面，命名為 categories 。命令如下：

hexo new page categories

2、編輯剛新建的頁面，將頁面的類型設置為 categories ，主題將自動為這個頁面顯示所有分類。

---
title: 分類
date: 2017-12-10 12:39:04
type: "categories"
---

3、在菜單中添加鏈接。編輯主題的 _config.yml ,即 themes/next 下的配置文件，區別於網站根目錄下的配置文件，將 menu 中的 categories: /categories || th 注釋去掉，如下:

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

添加標簽頁

1、創建一個名為 tags 頁面。命令如下：

hexo new page tags

2、編輯剛新建的頁面，將頁面的類型設置為 tags ，主題將自動為這個頁面顯示所有標簽。

---
title: 標簽
date: 2017-12-09 22:06:51
type: "tags"
---

3、在菜單中添加鏈接。編輯主題的 _config.yml ,即 themes/next 下的配置文件，區別於網站根目錄下的配置文件，將 menu 中的 tags: /tags || tags 注釋去掉，如下:

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

添加新文章

1、Hexo 中有 Front-matter 這個概念，是文件最上方以 --- 分隔的區域，用於指定文件的屬性。例如， 在 hexo new post "Spring AOP 和 動態代理技術" 時會生成 Spring-AOP-和-動態代理技術.md 文件，文件生成好的文章屬性。

---
title: Spring AOP 和 動態代理技術
date: 2017-12-10 17:57:14
tags:
---

2、在其中添加categories屬性，再部署之后就可以在分類頁看到分類了

---
title: Spring AOP 和 動態代理技術
date: 2016-03-16 08:12:43
tags:
categories: Java
--- 

3、再為其添加 tag，就可以把它和標簽關聯起來

---
title: Spring AOP 和 動態代理技術
date: 2016-03-16 08:12:43
tags:
	- Spring
	- Java
	- AOP
	- 動態代理
categories: Java
--- 

增加 about 頁面

1、創建一個名為 about 頁面。命令如下：

hexo new page "about"

2、修改生成的 md 文件，修改 title，例如關於我

3、修改 themes/next/_config.yaml 文件中的 menu 下的菜單配置，如下：

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive

社交媒體、頭像和文章底部二維碼

打開 themes/next/_config.yaml 文件，修改內容如下：

social 是社交媒體鏈接，可以配置更多的例如 微博、Twitter 等等；

avatar 是頭像圖片地址；

wechat_subscriber 是設置每個文章底部的二維碼鏈接，這里就可以配置上自己的微信公眾號二維碼了，省去每發一篇文章都要在文章內容里自己添加二維碼的麻煩，需要 NexT 5.1 版本以上才支持。

social:
  GitHub: https://github.com/huzhicheng || github
  知乎: https://www.zhihu.com/people/moonkite/activities 
  
avatar: http://wx2.sinaimg.cn/small/0070QarDly8fm5qpcu0ljj30hs0hsgmc.jpg
wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 歡迎您掃一掃上面的微信公眾號，訂閱我的博客！

配置評論功能

配置 disqus 評論

1、登錄 https://disqus.com/ ，注冊賬號；

2、點擊 GET STARTED ,如圖：

3、點擊 “I want to install Disqus on my site”

4、然后按提示填寫信息，其中最重要的是Website Name，對應着要在配置文件中 disqus 的 shortname

1、配置 themes/next/_config.yaml 中的 disqus 配置如下：

disqus:
  enable: false
  shortname: your_shortname
  count: true

2、之后重啟服務即可。

注意：disqus 雖然好用，但是在國內被牆的厲害，如果期望有不翻牆的用戶可以評論，建議還是放棄他。

配置 hypercomments 評論

hypercomments 也是 NexT 默認支持的評論系統，而且比起 disqus 來，可以不翻牆。

1、到 https://www.hypercomments.com/ 注冊賬號，僅支持 Google 賬號注冊。

2、按提示一步步往下走。

3、完成之后，在設置頁面，找到 Widget ->code 中的 widget_id 值。

4、之后在 themes/next/_config.yaml 中配置，如下：

hypercomments_id: widget_id

配置圖床

文章里經常需要配圖，圖片存儲在什么地方呢，我這里使用的是七牛雲存儲，注冊並認證一個個人賬號可以有免費10G的容量，足夠個人博客使用了。而且作為專業的圖片存儲服務商，訪問速度和服務質量有保障，可以配置自己的域名解析到七牛 bucket 。具體的操作可以到七牛官網上查看相應的文檔。

另外，如果不用七牛的話，微博相冊功能也可以作為圖床使用。但是由於一些原因，如果賬號被封，則相冊也就無法訪問了，而且也不排除微博有可能封了相冊外鏈的功能，到時候就麻煩了。

配置獨立域名

前面通過 https://huzhicheng.github.io 可以訪問博客網站。配上一個自己個性化的域名是不是更有個性呢。

這里以阿里雲萬網域名為例，我的域名是在阿里雲購買的。

1、登錄阿里雲賬號，在域名管理中找到需要綁定的域名；

注意綁定了兩個記錄類型為 A、主機記錄為 www 的記錄到 192.30.252.154 和 192.30.252.153 ，這兩個 IP 是 GitHub Pages 的 IP，表示把域名解析到 GitHub Pages。

另外添加一個記錄類型為 CNAME ,主機記錄為 @ 的記錄到自己的 {username}.github.io. ,注意 io 后面還有一個點。這條記錄的意思是將域名轉向到 {username}.github.io 。

2、進入到網站的 source 目錄中，添加一個名稱為 CNAME 的文件（沒有后綴名，必須大寫），在里面添加記錄你的個性化域名，例如我的是：

fengzheng.pub

只需要這一行就好，不用 www 。

3、稍等域名解析生效，最后的效果就是訪問 fengzheng.pub 或 www.fengzheng.pub 都會解析到 github.io 那個網站上。

當然別忘了使用 hexo g，hexo d 部署網站了。

統計分析

網站跑起來了，每天與多少人看，用戶畫像是什么樣的，就需要用相應的統計分析工具了，這里用到百度統計功能，也是 NexT 主題默認支持的。

1、首先需要注冊百度統計賬號；

2、進入賬號，添加一個網站，設置好對應的網站域名；

3、獲取統計代碼，例如下面這樣的,找到 hm.js? 后面的一串 id;

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

4、打開 themes/next/_config.yaml 配置文件，找到 baidu_analytics，配置上這串 id 即可，例如：

baidu_analytics: bssfdfff9050f68a2d014c30fea8878

配置閱讀量

默認的情況下，每篇文章的閱讀量是沒有顯示的，需要做一下配置。這里用的是最簡單的 busuanzi_count ，配置如下：

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: false
  site_uv_header: <i class="fa fa-user"></i> 訪問人數
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: false
  site_pv_header: <i class="fa fa-eye"></i> 總訪問量 
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 瀏覽
  page_pv_footer: 次

當然還可以用功能更豐富的 LeanCloud ，調研過 APP 消息推送功能的可能了解過，具體的集成可以搜索一下。

除了以上說到的這些，還有其他的一些可以定制的東西，例如動畫效果、搜索服務、404頁面、代碼高亮樣式等等，豐富多樣的服務，都可以非常方便的集成上去。

** 查看效果 http://www.fengzheng.pub
**如不嫌棄歡迎關注我的微信公眾號。