使用Hexo框架＋Apollo主題搭建博客

置頂的話

注意2：因為Tencent對引流限制（說白話，就是不能鏈接到其他網頁），所以上面兩個鏈接，我都給出了網址，請自行粘貼到瀏覽器中訪問。

前言

時間過得賊快啊！我一下子就要大二下學期了！想著自己以後大概率就是一名老實的程序員。按著這個程序猿們的習慣啊，一般都會有個自己的博客，也不論是追求技術還是跟風吧，我腦子一熱呢，就準備搭一個自己的Blog。

腦子熱的時候是2月11號晚上，然後既然熱了，那就行動唄。先google了一下個人博客的主流框架和搭建入門咯。最後還是放棄了Wordpress，選擇了Hexo來搭建，原因是Hexo開源，主題選擇豐富，emmmm就醬。關於為啥選擇apollo主題呢，主要是有天瞎逛時，誤入了phoenixlzx巨巨的blog，他用的就是Apollo主題。我定睛一看，這就是我想要的滑板鞋主題！

Apollo主題的開發者據說是一位92年的小哥哥，開發Apollo的時候在美團前端任職，現在根據他的GitHub主頁應該是在Alipay工作了。我選擇Apollo主題的原因是因為它風格簡約，我覺得瀏覽時載入體驗比博客華麗的外觀會重要很多，你想想等載入是很煩躁的一件事（嗯，至少來說我是這樣...），何況Apollo還簡約得好看一匹，果斷Mark。如下圖。

嗯！真的很耐看！清新，簡約，Nice！

既然選擇好了框架+主題，就進入正式階段（以下一切安裝代碼，在OS X無問題，Windows可能會要稍作修改）。

1. 安裝Hexo

因為Hexo是一款基於Node.js的靜態博客框架，生成靜態網頁託管在GitHub。所以我們在安裝Hexo前得先裝上Node.js和git。 * [安裝Node.js](#jump1) * [安裝git](#jump2) * [安裝Hexo](#jump3)

1.1 安裝Node.js

下載Node.js

$ npm install -g hexo-cli or$ npm install -g hexo

如果收到error，在命令行首加上。

$ hexo init blog

$ cd blog #切到blog文件夾下$ npm install $ hexo g$ hexo s

按照正常操作，這時候命令行會拋出一個鏈接，你複製這串網址粘貼到瀏覽器打開，不出錯誤的話，會看到第一個由Hexo框架搭建的網頁。如果這時候，你沒看到or失敗了，可能需要google一下。

接著，普及一下Hexo框架的基本操作和作用

你還會用到

$ hexo new "postName" #新建博客的文章$ hexo new page "pageName" #新建博客的頁面$ hexo g && hexo d #生成部署$ hexo s #生成本地預覽

我寫這篇文章時的本地環境，你可以參考一下（使用查看，我使用的是OS X系統搭建）

hexo: 3.5.0hexo-cli: 1.0.4os: Darwin 17.2.0 darwin x64http_parser: 2.7.0node: 8.9.4v8: 6.1.534.50uv: 1.15.0zlib: 1.2.11ares: 1.10.1-DEVmodules: 57nghttp2: 1.25.0openssl: 1.0.2nicu: 59.1unicode: 9.0cldr: 31.0.1tz: 2017b

2. apollo主題配置2.1 安裝

$ cd Blog $ npm install$ npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive$ git clone https://github.com/pinggod/hexo-theme-apollo.git themes/apollo

2.2 啟用

修改的配置項為

theme: apolloarchive_generator: per_page: 0 yearly: false monthly: false daily: false

2.3 測試

$ hexo s

瀏覽器打開，看有沒有出現apollo標準樣式博客，如果沒有成功，請自行Google查錯。

2.4 更新

$ cd themes/apollo $ git pull

3. 託管到GitHub + 鏈接個人域名3.1 基本準備

GitHub賬戶一個

我默認你會基本git和GitHub操作，嗯！如果不會，請移步廖雪峰老師的git教程。

3.2 託管步驟

我們利用GitHub Pages來介紹託管在GitHub的項目。由於的空間免費穩定，用來做搭建一個博客再好不過了。

• 如何搭建一個獨立博客——簡明Github Pages與Hexo教程

上面這篇博文詳細的介紹了的獲取和鏈接，介紹了上面搭建Hexo博客的步驟.

關鍵點：

3.2.1 設置ssh-key

配置 SSH keys

我們如何讓本地 git 項目與遠程的 GitHub 建立聯繫呢？用 SSH keys。

• 其實沒必要設置，完全可以敲兩下回車；當然設置也沒有關係

• 注意：輸入密碼的時候沒有 * 字樣的，你直接輸入就可以了。（我個人覺得git還可以完善的一個細節）

• 此處的郵箱地址，推薦使用你的GitHub賬戶郵箱

• 此處的「-C」的是大寫的「C」

3.2.2 添加ssh key到GitHub

在本機設置 SSH Key 之後，需要添加到 GitHub上，以完成 SSH 鏈接的設置。

3.2.3 測試

按道理會顯示下面的反饋：

The authenticity of host "GitHub.com (207.97.227.239)" can"t be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)?

輸入就ok，按道理會顯示：

Hi （你的GitHub名字）! You"ve successfully authenticated, but GitHub does not provide shell access.

恭喜你！SSH Key 配置成功！本機已成功連接到 GitHub。

• 當然，比較倒霉。如果沒按道理，大部分可能是牆的原因，你可能需要拿d到IP地址，然後在/hosts里添加上這個解析。請自行Google解決這個

• 一個常見錯誤：GitHub Help - Error Permission denied (publickey)

  3.3 將獨立域名與 GitHub Pages 的空間綁定

  設置 or 域名解析

  我用的騰訊雲的控制台，找到域名，點一下右側的解析按鈕即可解決。阿里雲買的域名也可以由阿里雲解析。這裡也可以使用DNSpod，註冊一個賬戶，即可解析域名了，但應該僅限於解析國內域名。國外的域名，如，請上自行修改DNS。

• 如何設置DNS

  

  主要有以下幾項設置需要填寫（以域名fuujiro.com為例）：

  例：如果我們需要把和鏈接，主機記錄：，記錄類型：，記錄值：。

• A：將域名指向雲伺服器，請選擇「A」；

• CNAME：將域名指向另一個域名，請選擇「CNAME」；

• MX：建立郵箱請選擇「MX」，根據郵箱服務商提供的MX記錄填寫。

• www：解析後的域名為

• @：直接解析主域名

• *：泛解析，匹配其他所有域名

• mail：將域名解析為 ，通常用於解析郵箱伺服器

• 二級域名：如，填寫blog

• 手機網站：，填寫m

• 主機記錄

• 記錄類型

• 記錄值：填寫需要鏈接的那個域名，如：

  4.後記

  本來情人節當晚，我就完成了blog的全部搭建我就準備開始寫這篇文章了，emmmm也就是昨晚了，結果寫著寫著就困了，就睡覺去了知道我為什麼這麼菜了吧我真的很懶。然後今天白天，按著假期規律唄，中午11點多起床，碼了幾行字，然後吃飯陪我爸聊天，買衣服，陪弟弟放鞭炮在大年三十完成這篇文章的就倒了，無情地倒下了！

  不過我沒有放棄，繼續加油，還是在大年初一，emmmm完結了這篇blog！也謝謝你看到這裡，祝你在狗年新年快樂～萬事如意！狗年不再出bug！！hahah~

  致謝：

• 令狐蔥@前端筆記

• 吳潤的知乎專欄：cs專業那些事

謝謝你的關注！Jiro一定會寫出更多的好文章！筆芯！！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！