Hexo+Github Pages+yilia搭建部落格

本文首發於我的部落格：gongyanli.com
github: https://github.com/Gladysgong/Gladysgong.github.io

一、快速建立個人Github Pages

1.什麼是Github Pages

GitHub Pages 本用於介紹託管在GitHub的專案，不過由於他的空間免費穩定，很適合用來搭建一個部落格。

每個帳號只能有一個倉庫來存放個人主頁，而且倉庫的名字必須是username/username.github.io，這是特殊的命名約定。你可以通過http://username.github.io 來訪問你的個人主頁，比如我的就是gladysgong.github.io。

這裡特別提醒一下，需要注意的個人主頁的網站內容是在master分支下的。

2.建立自己的Github Pages

新建程式碼倉庫(repository),此處命名格式有限制的，形如username.github.io

github page site已經建好，瀏覽器輸入例如http://username.github.io,(該示例介面為空)，可以自己push一個index頁面來顯示內容，開啟你的blog把！

我的blog是gladysgong.github.io,可以開啟看一下喲！如果文章對您有幫助，右側fork進入star我一下，我會美美噠一天。

3.如何搭建一個獨立部落格——簡明Github Pages與Hexo教程

二、搭建環境

1.安裝node.js
2.安裝npm
3.安裝git，如果前面要commit、push，那之前就應該安裝
4.github賬戶配置

三、Hexo安裝

$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server，可以在http://localhost:4000/ 檢視（hexo s -p 8023埠被佔用時）

四、Hexo主題切換

Hexo預設主題是landscape，大家可以切換成為next或者yilia的風格
1.安裝主題

$ hexo clean
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

2.啟用主題

修改Hexo目錄下的_config.yml配置檔案中的theme屬性，將其設定為yilia。

3.更新主題

$ cd themes/yilia
$ git pull
$ hexo g # 生成
$ hexo s # 啟動本地web伺服器

4.開啟http://localhost:8023/ ，我們就會看到一個全新的介面。

五、部署Hexo到Github Pages

1.部署Hexo到Github Pages上的原理

a.第一步中我們在Github上建立了一個特殊的repo（gladysgong.github.io）一個最大的特點就是master中的html靜態檔案，可以通過連結http://gladysgong.github.io來直接訪問。
b.Hexo -g 會生成一個靜態網站（第一次會生成一個public目錄），這個靜態檔案可以直接訪問。
c.將hexo生成的靜態網站，提交(git commit)到github上。

2.使用hexo deploy部署到github

在配置檔案_config.xml中以下改動：
deploy:
  type: git
  repo: git@github.com:gladysgong/gladysgong.github.io.git
  branch: master

3.安裝擴充套件（不安裝會出錯）

$ npm install hexo-deployer-git --save

4.在命令列中執行

hexo d

六、申請域名https://sg.godaddy.com/zh/

可以申請的地方很多，我選擇的是goDaddy，註冊登入選擇域名，支付寶付款，ok。

七、DNS解析

1.註冊DNSpod
2.進入域名解析，輸入你的域名，新增記錄進行配置

3.記錄型別

記錄型別A代表指向github pages所提供的ip
記錄型別CNAME代表指向username.github.io
用A型別的話，當github pages所提供的ip改變的話，你就需要來改變此處的ip，用CNAME則不需要。

4.建立CNAME

$ cd source
$ 建立CNAME
$ 內容為你的域名（比如我的：gongyanli.com）
$ commit & push

八、hexo部署後把原來的倉庫覆蓋

1.使用Hexo搭建部落格需要區分【部落格原始碼】和【部落格生成程式碼】

『部落格原始碼』：Hexo的原始碼，包括themes目錄（部落格模板），source目錄(使用MarkDown寫的部落格)等

『部落格生成程式碼』：執行hexo generate或者hexo server命令生成的程式碼，是Hexo自動生成的，在public目錄裡面。

『部落格原始碼』需要使用Git做版本管理，而『部落格生成程式碼』需要使用Git部署。因此容易混淆。

2.方法1：使用2個不同的Git倉庫分別管理『部落格原始碼』和『部落格生成程式碼』

在GitHub新建一個倉庫，然後將『部落格原始碼』同步到新專案。『部落格生成程式碼』仍然由gladysgong/gladysgong.github.io部署。

3.方法2:使用同一個Git倉庫的2個不同的Git分支分別管理『部落格原始碼』和『部落格生成程式碼』

修改Hexo的配置檔案_config.yml，將『部落格生成程式碼』部署到gladysgong/gladysgong.github.io倉庫的develop分支:
deploy:
    type: git
    branch: develop
    repo: https://github.com/gladysgong/gladysgong.github.com

九、bug

1.hexo報錯：

YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 5, column 1: # Site

YAMLException: cannot read a block mapping entry; a multi line key may not be an implicit key at line 13, column 1: # URL

配置檔案：_config.yml  中 # Site #URL 屬性設定後面的：需要有空格再填寫內容！！！

2.npm各種提示許可權不夠，windows下即使開了administrator也提示許可權不夠

無奈，解除安裝npm，用淘寶npm映象重灌一個，安裝後一路暢通。
安裝方法：npm install -g cnpm --registry=https://registry.npm.taobao.org
參考連結：http://npm.taobao.org/
之後所用命令只需改為cnpm即可

3.hexo s執行時預設4000埠被佔用

嘗試過解除埠，無奈我的4000埠被360瀏覽器佔用
hexo s -p 8022
重啟一個8022或者任意一個沒被佔用的埠即可