如何搭建一個獨立部落格——簡明Github Pages與Hexo教程
http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/
摘要：這是一篇很詳盡的獨立部落格搭建教程，裡面介紹了域名註冊、DNS設定、github和Hexo設定等過程，這是我寫得最長的一篇教程。我想將我搭建獨立部落格的過程在一篇文章中儘可能詳細地寫出來，希望能給後來者一個明確的指引，同時用這篇教程開篇，正式開始我的第八大洲之旅。
前言
作為一個技術小白，沒有技術基礎，看網上的教程也雲裡霧裡，看程式設計師的教程相當不容易，稍微有些細節描述得不清楚自己就要繞彎路去找答案（善用搜索引擎），所以，在自己的部落格搭建完成之後，我決定要將我搭建部落格的過程全記錄下來，以供後期和我一樣的小白參考（是的，我堅信還有很多一樣和我一樣的人），我會盡可能詳細的整理這個教程，其中的資料可能會摘錄到其他人的教程，我會在後面列出了參考資料，感謝這些作者們。
以下以我的部落格:www.cnfeat.com為例，教大家如何搭建一個獨立部落格。
為什麼要搭建一個獨立部落格?
獨立的才是自己的。
小白進入門檻
- 1、非常折騰，需要耐心；
- 2、也需要一定的學習能力和鑽研精神；
- 3、懂一些網頁基礎知識，不懂也重要，參看第二和第三條；
小白白請看
2014年5月15日更新：發現一個更簡單的方法：用靜態頁面生成靜態部落格 byisnowfy
按此教程操作即可。
為什麼選擇GitHub Pages？
很多人用wordpress，你為什麼要用github pages來搭建？
- 1、github pages有300M免費空間，資料自己管理，儲存可靠；
- 2、學著用github，享受github的便利，上面有很多大牛，眼界會開闊很多；
- 3、順便看看github工作原理，最好的團隊協作流程；
- 4、github是趨勢；
- 5、你不覺得一個文科生用github很geek嗎？瞬間躋身技術界；
- 6、就算github被牆了，我可以搬到國內的gitcafe中去。
GitHub Pages是什麼？
GitHub Pages本用於介紹託管在GitHub的專案， 不過，由於他的空間免費穩定，用來做搭建一個部落格再好不過了。
github Pages可以被認為是使用者編寫的、託管在github上的靜態網頁。
購買域名
只推薦上godaddy購買，安全，而且可以使用支付寶。
教程（截止至2014年5月10日）如下
1、查你想要的域名；
2、查到適合的域名之後選擇「continue to Cart」
3、godaddy附加收費服務，不要管，繼續「continue to Cart」；
4、確認購買。修改購買年限，預設是兩年，可以修改成1/2/3/5/10年，隨自己喜歡。現在godaddy上com每年的預設費用是12.99美元，附加上ICANN的管理費用就是13.17美元。
如果你不是土豪，可以上網搜godaddy的優惠碼，一大堆，找一個填進這裡，填完之後，一年的費用會變成8.99美元。
說明一下：一般來講，使用網上的優惠碼第一年收費8.99美元，以後每年的收費是10.99美元，不過在網上可以搜到合適的優惠碼，可以每年的收費都是8.99美元，記得多測試自行鑑別。
如圖，我買了五年的費用就是45.85美元，隨後點選「Proceed to Checkout」
5、結算。登入或註冊介面，填完必要的資訊之後，選擇用支付寶結算。
6、檢查。結算後，重新登入，去「My Account」，域名已經顯示在你的賬戶了。
7、補充一些注意事項：
- 輸入優惠碼沒有優惠或者優惠幅度較低，請清除瀏覽器cookies再嘗試；
- 如果沒有支付寶支付選項，有可能是使用的優惠碼不支援支付寶，請重新清除瀏覽器cookies再嘗試；
- 註冊時使用者填寫資訊時一定要輸入正確的郵箱名字，否則修改十分麻煩。
- 買完域名之後一定要記得去自己的郵箱檢視啟用郵件，否則域名激活不了。
安裝準備軟體
依次下載安裝。
怎麼開啟Git？
- 1、開始選單Git Bash。
- 2、滑鼠右鍵開啟Git Bash。
註冊GitHub
註冊你的username和郵箱，郵箱十分重要，GitHub上很多通知都是通過郵箱的。
註冊過程比較簡單，詳細也可以看：
配置和使用Github
配置SSH keys
我們如何讓本地git專案與遠端的github建立聯絡呢？用SSH keys。
檢查SSH keys的設定
首先我們需要檢查你電腦上現有的ssh key：
$ cd ~/. ssh 檢查本機的ssh金鑰
如果提示：No such file or directory 說明你是第一次使用git。
生成新的SSH Key：
$ ssh-keygen -t rsa -C "郵件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車就好>
注意1: 此處的郵箱地址，你可以輸入自己的郵箱地址；注意2: 此處的「-C」的是大寫的「C」
然後系統會要你輸入密碼：
Enter passphrase (empty for no passphrase):<輸入加密串>
Enter same passphrase again:<再次輸入加密串>
在回車中會提示你輸入一個密碼，這個密碼會在你提交專案時使用，如果為空的話提交專案時則不用輸入。這個設定是防止別人往你的專案裡提交內容。
注意：輸入密碼的時候沒有*字樣的，你直接輸入就可以了。
最後看到這樣的介面，就成功設定ssh key了：
新增SSH Key到GitHub
在本機設定SSH Key之後，需要新增到GitHub上，以完成SSH連結的設定。
-
1、開啟本地C:\Documents and Settings\Administrator.ssh\id_rsa.pub檔案。此檔案裡面內容為剛才生成人金鑰。如果看不到這個檔案，你需要設定顯示隱藏檔案。準確的複製這個檔案的內容，才能保證設定的成功。
-
2、登陸github系統。點選右上角的 Account Settings—->SSH Public keys —-> add another public keys
-
3、把你本地生成的金鑰複製到裡面（key文字框中）， 點選 add key 就ok了
測試
可以輸入下面的命令，看看設定是否成功，[email protected]的部分不要修改：
$ ssh -T git@github.com
如果是下面的反饋：
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)?
不要緊張，輸入yes就好，然後會看到：
Hi cnfeat! You've successfully authenticated, but GitHub does not provide shell access.
設定使用者資訊
現在你已經可以通過SSH連結到GitHub了，還有一些個人資訊需要完善的。
Git會根據使用者的名字和郵箱來記錄提交。GitHub也是用這些資訊來做許可權的處理，輸入下面的程式碼進行個人資訊的設定，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的暱稱。
$ git config --global user.name "cnfeat"//使用者名稱
$ git config --global user.email "[email protected]"//填寫自己的郵箱
SSH Key配置成功
本機已成功連線到github。
若有問題，請重新設定。常見錯誤請參考：
使用GitHub Pages建立部落格
與GitHub建立好連結之後，就可以方便的使用它提供的Pages服務，GitHub Pages分兩種，一種是你的GitHub使用者名稱建立的username.github.io這樣的使用者&組織頁（站），另一種是依附專案的pages。
想建立個人部落格是用的第一種，形如cnfeat.github.io這樣的可訪問的站，每個使用者名稱下面只能建立一個。
github上建立倉庫
登入後系統，在github首頁，點選頁面右下角「New Repository」
填寫專案資訊：
project name：cnfeat.github.io
description： Writing 1000 Words a Day Changed My Life
注：Github Pages的Repository名字是特定的，比如我Github賬號是cnfeat，那麼我Github Pages Repository名字就是cnfeat.github.io。
點選「Create Repository」 完成建立。
用Hexo克隆主題
Hexo介紹
Hexo的作者是tommy351，根據官方介紹，Hexo是一個簡單、快速、強大的部落格釋出工具，支援Markdown格式。
安裝Hexo
開啟git。
$ npm install -g hexo
部署Hexo
在我的電腦中建立一個名字叫「Hexo」的資料夾，然後在此資料夾中右鍵開啟Git Bash。
$ hexo init
Hexo隨後會自動在目標資料夾建立網站所需要的所有檔案。
現在我們已經搭建起本地的hexo部落格了，執行以下命令(在H:\hexo)，然後到瀏覽器輸入localhost:4000看看。
$ hexo g
$ hexo s
複製cnfeat的主題
以下進入複製主題環節，如果那一步出現問題，或者修改後沒有顯示修改的結果，建議來來一個，再看看，可以解決很多問題。
$ hexo clean
$ hexo g
$ hexo s
建立了Hexo檔案之後就可以複製我的主題了
$ git clone https://github.com/cnfeat/cnfeat.git themes/jacman
如果不行，可以複製wuchong的修改的主題，我的就是複製他的修改的。
$ git clone https://github.com/wuchong/jacman.git themes/jacman
或者複製yangjian的
$ git clone https://github.com/A-limon/pacman.git themes/pacman
啟用cnfeat的主題
修改Hexo目錄下的config.yml配置檔案中的theme屬性，將其設定為jacman。同時請設定stylus屬性中的compress值為true。
theme: jacman
注意：Hexo有兩個config.yml檔案，一個在根目錄，一個在theme下，此時修改的是在根目錄下的。
更新主題
$ cd themes/jacman
$ git pull
注意：為避免出錯，請先備份你的_config.yml 檔案後再升級
本地檢視除錯
$ hexo g #生成
$ hexo s #啟動本地服務，進行文章預覽除錯
或者直接作用組合命令
$ hexo d -g
將獨立域名與GitHub Pages的空間繫結
GitHub Pages的設定
方法一：在Repository的根目錄下面，新建一個名為CNAME的文字檔案，裡面寫入你要繫結的域名，比如cnfeat.com。
方法二：到我的github倉庫，點選右下角的「Download ZIP」，下載原始檔，解壓，找到CNAME檔案，用記事本開啟，將cnfeat.com修改成你的域名，放進Hexo\source目錄下，用hexo命令提交上去。
$ hexo d -g
DNS設定
用DNSpod，快，免費，穩定。
註冊DNSpod，新增域名，如下圖設定。
其中A的兩條記錄指向的ip地址是github Pages的提供的ip
- 192.30.252.153
- 192.30.252.154
如部落格不能登入，有可能是github更改了空間服務的ip地址，記得及時到在GitHub Pages檢視最新的ip即可
www指定的記錄是你在github註冊的倉庫。
去Godaddy修改DNS地址
更改godaddy的Nameservers為DNSpod的NameServers。
1、點選「My Account」，管理我的域名。
2、點選域名。
3、將godaddy的Nameservers更改成f1g1ns1.dnspod.net和f1g1ns2.dnspod.net
搭建完成
至此，獨立部落格就算搭建完成，如需進步一完善請在參看以下文章或部落格下留言。
進階篇：Hexo設定
網站搭建完成後，就可以根據自己愛好來對Hexo生成的網站進行設定了，對整站的設定，只要修改專案目錄的_config.yml就可以了，這是我的設定，可供參考。
# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/tommy351/hexo/
# Site #整站的基本資訊
title: 1000 words a Day #網站標題
subtitle: Writing 1000 Words a Day Changes My Life #網站副標題
description: 學習總結 思考感悟 知識管理 #網站描述
author: cnFeat #網站作者，在下方顯示
email: [email protected].com #聯絡郵箱
language: zh-CN
# URL
## If your site is put in a subdirectory
url: http://www.cnfeat.com #你的域名
root: /
permalink: :year/:month/:day/:title/
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
# Directory
source_dir: source
public_dir: public
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
auto_spacing: false # Add spaces between asian characters and western characters
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
max_open_file: 100
multi_thread: true
filename_case: 0
render_drafts: false
post_asset_folder: false
highlight:
enable: true
line_number: true
tab_replace:
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Archives
## 2: Enable pagination
## 1: Disable pagination
## 0: Fully Disable
archive: 2
category: 2
tag: 2
# Server
## Hexo uses Connect as a server
## You can customize the logger format as defined in
## http://www.senchalabs.org/connect/logger.html
port: 4000
server_ip: 0.0.0.0
logger: false
logger_format:
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: H:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 15 #每頁15篇文章
pagination_dir: page
# Disqus #社會化評論disqus，我使用多說，在主題中配置
disqus_shortname:
# Extensions
## Plugins: https://github.com/tommy351/hexo/wiki/Plugins
## Themes: https://github.com/tommy351/hexo/wiki/Themes
theme: jacman
exclude_generator:
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#sitemap
sitemap:
path: sitemap.xml
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
# Markdown
## https://github.com/chjj/marked
markdown:
gfm: true
pedantic: false
sanitize: false
tables: true
breaks: true
smartLists: true
smartypants: true
# Stylus
stylus:
compress: false
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: github
repository: https://github.com/cnfeat/cnfeat.github.io.git
branch: master
修改區域性頁面
頁面展現的全部邏輯都在每個主題中控制，原始碼在hexo\themes\jacman\中：
.
├── languages #多語言
| ├── default.yml#預設語言
| └── zh-CN.yml #中文語言
├── layout #佈局，根目錄下的*.ejs檔案是對主頁，分頁，存檔等的控制
| ├── _partial #區域性的佈局，此目錄下的*.ejs是對頭尾等區域性的控制
| └── _widget#小掛件的佈局，頁面下方小掛件的控制
├── source #原始碼
| ├── css#css原始碼
| | ├── _base #*.styl基礎css
| | ├── _partial #*.styl區域性css
| | ├── fonts #字型
| | ├── images #圖片
| | └── style.styl #*.styl引入需要的css原始碼
| ├── fancybox #fancybox效果原始碼
| └── js #javascript原始碼
├── _config.yml#主題配置檔案
└── README.md #用GitHub的都知道
發表新文章
用hexo發表新文章
$ hexo n #寫文章
其中my new post為文章標題，執行命令後，會在專案\source_posts中生成my new post.md檔案，用編輯器開啟編寫即可。
當然，也可以直接在\source_posts中新建一個md檔案，我就是這麼做的。
寫完後，推送到伺服器上，執行
$ hexo g #生成
$ hexo d #部署 # 可與hexo g合併為 hexo d -g
用Hexo發表文章的Markdown語法
使用jacman或pacman主題，建議按此標準語法寫：
title: postName #文章頁面上的顯示名稱，可以任意修改，不會出現在URL中
date: 2013-12-02 15:30:16 #文章生成時間，一般不改，當然也可以任意修改
categories: example #分類
tags: [tag1,tag2,tag3] #文章標籤，可空，多標籤請用格式，注意:後面有個空格
description: 附加一段文章摘要，字數最好在140字以內。
---
以下正文
為什麼我的部落格有目錄？
我用的是Markdown語法，Markdown語法怎麼用？
Hexo命令
常用命令：
hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠（預設埠4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub
常用複合命令：
hexo d -g #生成加部署
hexo s -g #預覽加部署
簡寫：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
安裝外掛
新增sitemap和feed外掛
$ npm install hexo-generator-sitemap
$ npm install hexo-generator-feed
修改_config.yml，增加以下內容
# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml
Hexo上傳README檔案
Github的版本庫通常建議同時附上README.md說明檔案，但是hexo預設情況下會把所有md檔案解析成html檔案，所以即使你線上生成了README.md，它也會在你下一次部署時被刪去。怎麼解決呢？
在執行hexo deploy前把在本地寫好的README.md檔案複製到.deploy資料夾中，再去執行hexo deploy。
404頁面
GitHub Pages有提供製作404頁面的指引：Custom 404 Pages。
直接在根目錄下建立自己的404.html或者404.md就可以。但是自定義404頁面僅對繫結頂級域名的專案才起作用，GitHub預設分配的二級域名是不起作用的，使用hexo server在本機除錯也是不起作用的。
圖床
推薦使用七牛（10G空間，免費），還可以使用Yupoo（100m免費空間）
參考資料：
[7]hexo你的部落格 by ibruce（推薦）
[8]Pacman主題介紹 by yangjian（推薦）
[9]使用hexo搭建部落格 by yangjian（推薦）
[11]hexo官方寫作教程「Writing」
相關連結
鳴謝
Van Cheng