Github+Hexo,搭建專屬網站

前言

記得從大二開始，就一直想搭個專屬網站，當時使勁摳頁面【前端頁面是從QQ空間摳的，如今想摳估計沒這麼容易了】，寫代碼，忙活半天才把程序弄好。

惋惜最終項目仍是沒上線，由於當時有兩問題繞不開

• 須要購買服務器【服務器太貴，如今便宜的阿里雲服務器每個月都需100左右】。
• 須要運維管理【麻煩且危險，服務器宕了可能丟失數據】。

最近了解到 github + hexo 能完美解決上述問題，啥也不說了，直接開幹 ^.^

---

相關網站

搭建教程網上比比皆是，此處不累贅，下面是搭建過程當中用到的相關網站：

hexo中文網站：https://hexo.io/zh-cn/docs/
hexo主題模板：https://www.zhihu.com/question/24422335
hexo+github搭建過程：http://www.jianshu.com/p/df3edc4286d2
Markdown 語法說明：http://www.appinn.com/markdown/
github綁定域名：http://www.jianshu.com/p/1d427e888dda

---

HEXO如何優化部署及管理

問題：使用hexo時，若是本地文件丟失或者想在其餘電腦上修改博客怎麼辦？
方案：簡單地說，每一個想創建GitHub Pages的倉庫，至少兩個分支，一個hexo分支用來存放網站的原始文件，一個master分支用來存放生成的靜態網頁。

步驟以下:
一、建立倉庫，Wasim37.github.io；
二、建立兩個分支：master 與 hexo；
三、設置hexo爲默認分支（由於咱們只須要手動管理這個分支上的Hexo網站文件）；
四、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷貝倉庫；
五、在本地Wasim37.github.io文件夾下經過Git bash依次執行npm install hexo、hexo init、npm install 和 npm install hexo-deployer-git（此時當前分支應顯示爲hexo）;
六、修改_config.yml中的deploy參數，分支應爲master；
七、依次執行git add .、git commit -m 「…」、git push origin hexo提交網站相關的文件；
八、執行hexo generate -d生成網站並部署到GitHub上。

本地修改
一、在本地對博客進行修改（添加新博文、修改樣式等等）後，經過下面的流程進行管理：
依次執行git add .、git commit -m 「…」、git push origin hexo指令將改動推送到GitHub（此時當前分支應爲hexo）；
二、而後才執行hexo generate -d發佈網站到master分支上。

本地資料丟失或者想在其餘電腦上修改博客
一、使用git clone git@github.com:Wasim37/Wasim37.github.io.git拷貝倉庫（默認分支爲hexo）；
二、在本地新拷貝的Wasim37.github.io文件夾下經過Git bash依次執行下列指令：npm install hexo、npm install、npm install hexo-deployer-git（記得，不須要hexo init這條指令）。

---

安裝錯誤記錄

執行hexo d出現如下錯誤

解決方法：
_config.yml ——> deploy ——> repository
https://github.com/{username}/{username}.github.io.git 修改成
git@github.com:{username}/{username}.github.io.git

---

文章編輯工具

文章編輯工具一開始我使用的是subline，但由於沒有快捷鍵及預覽功能，後來選擇了MarkdownPad。可最近發現新版的有道雲筆記支持Markdown語法，果斷換成了有道。
由於有道除了編輯功能，我更看重的是它對文章的二次備份.

有道雲筆記MarkDown使用教程： http://note.youdao.com/iyoudao/?p=1895

其次文章圖片若是不想託管在github，可使用七牛雲存儲等圖牀工具。

---

模板自定義

我使用的博客主題爲 icarus，對比能夠發現，我在展現細節上作了一些本身的修改。

好比頁面展現能夠分爲左中右三個區域，分別爲profile-column，main-column和sidebar-column。
源代碼三者寬度比例爲3:7:3。爲了突出正文，我改成了 2.3：8.4：2.3。
源代碼文件位置爲：icarus\source\css _variables.styl

---

文章目錄

icarus主題模板的文章詳細展現默認是不帶有文章目錄的
若是須要添加文章目錄，能夠參考http://www.jianshu.com/p/72408c410904

icarus主題添加文章目錄，修改themes\icarus\layout\common\article.ejs文件便可。

<% if (!index && post.toc) { %>
修改成
<% if (!index && post.toc != false) { %>

每篇文章能夠選擇是否開放目錄功能

...
title: Github+Hexo,搭建專屬網站
categories:
  - demo
toc: false
...