使用 Hexo + github 搭建我的博客

來自：http://www.cnblogs.com/fengzheng/p/8031518.html

Hexo 是什麼

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

安裝部署步驟

本地部署 Hexo

一、安裝 nodejs ，不作介紹；

二、安裝 git ，不作介紹；

三、安裝 hexo-cli ，命令以下：

npm install hexo-cli -g

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

五、執行 Hexo 初始化命令：

//其中 blog 是本身定義的博客根目錄名稱，能夠自定義 例如 hexo init my-blog hexo init blog

六、進入目錄 blog ，cd blog；

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

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

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

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

更換主題 NexT

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

一、下載 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

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

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

請注意，每一個 key 的冒號後面須要一個空格（必須的），不然會報錯。

三、以後執行命令，從新生成並啓動網站：

hexo clean hexo g hexo s

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

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

部署到 github

一、首先要有 github 帳號，而後建立一個名稱爲 {用戶名}.github.io 的倉庫，其中用戶名是你的 github 帳號名稱，例如個人就是 huzhicheng.github.io。這是一個固定的格式，必需要這麼建立，才能配合 Github Pages 使用，而且每一個帳號只能有一個這種倉庫。

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

表示部署類型爲 git；

倉庫爲 git@github.com:huzhicheng/github.io.git ，替換成你的倉庫便可；

分支爲 master 主分支；

deploy:  type: git  repo: git@github.com:huzhicheng/github.io.git  branch: master

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

npm install hexo-deployer-git --save

四、執行命令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 git@github.com:huzhicheng/github.io.git. INFO Deploy done: git

五、到這一步，經過地址 https://huzhicheng.githubio 就能夠訪問了。

分類、標籤頁和新文章

添加分類頁

一、新建一個分類頁面，命名爲 categories。命令以下：

hexo new page categories

二、編輯剛新建的頁面，將頁面的類型設置爲 categories ，主題將自動爲這個頁面顯示全部分類。

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

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

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

添加標籤頁

一、建立一個名爲 tags 頁面。命令以下：

hexo new page tags

二、編輯剛新建的頁面，將頁面的類型設置爲 tags ，主題將自動爲這個頁面顯示全部標籤。

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

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

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

添加新文章

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

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

二、在其中添加categories屬性，再部署以後就能夠在分類頁看到分類了

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

三、再爲其添加 tag，就能夠把它和標籤關聯起來

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

增長 about 頁面

一、建立一個名爲 about 頁面。命令以下：

hexo new page "about"

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

三、修改 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 評論

一、登陸 https://disqus.com/ ，註冊帳號；

二、點擊 GET STARTED ,如圖：

三、點擊 「I want to install Disqus on my site」

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

一、配置 themes/next/_config.yaml 中的 disqus 配置以下：

disqus:  enable: false  shortname: your_shortname  count: true

二、以後重啓服務便可。

注意：disqus 雖然好用，可是在國內被牆的厲害，若是指望有不FQ的用戶能夠評論，建議仍是放棄他。

配置 hypercomments 評論

hypercomments 也是 NexT 默認支持的評論系統，並且比起 disqus 來，能夠不FQ。

一、到 https://www.hypercomments.com/ 註冊帳號，僅支持 Google 帳號註冊。

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

三、完成以後，在設置頁面，找到 Widget ->code 中的 widget_id 值。

四、以後在 themes/next/_config.yaml 中配置，以下：

hypercomments_id: widget_id

配置圖牀

文章裏常常須要配圖，圖片存儲在什麼地方呢，我這裏使用的是七牛雲存儲，註冊並認證一個我的帳號能夠有免費10G的容量，足夠我的博客使用了。並且做爲專業的圖片存儲服務商，訪問速度和服務質量有保障，能夠配置本身的域名解析到七牛 bucket 。具體的操做能夠到七牛官網上查看相應的文檔。

另外，若是不用七牛的話，微博相冊功能也能夠做爲圖牀使用。可是因爲一些緣由，若是帳號被封，則相冊也就沒法訪問了，並且也不排除微博有可能封了相冊外鏈的功能，到時候就麻煩了。

配置獨立域名

前面經過 https://huzhicheng.github.io 能夠訪問博客網站。配上一個本身個性化的域名是否是更有個性呢。

這裏以阿里雲萬網域名爲例，個人域名是在阿里雲購買的。

一、登陸阿里雲帳號，在域名管理中找到須要綁定的域名；

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

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

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

fengzheng.pub

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

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

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

統計分析

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

一、首先須要註冊百度統計帳號；

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

三、獲取統計代碼，例以下面這樣的,找到 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>

四、打開 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頁面、代碼高亮樣式等等，豐富多樣的服務，均可以很是方便的集成上去。