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

摘要：這是一篇很詳盡的獨立博客搭建教程，裏面介紹了域名註冊、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、結算。登錄或註冊界面，填完必要的信息之後，選擇用支付寶結算。

如果以上的教程如果不夠清晰，可以參照這一份《2013年10月新版godaddy域名註冊圖文教程》。

6、檢查。結算後，重新登錄，去「My Account」，域名已經顯示在你的賬戶了。

7、補充一些注意事項：

• 輸入優惠碼沒有優惠或者優惠幅度較低，請清除瀏覽器cookies再嘗試；
• 如果沒有支付寶支付選項，有可能是使用的優惠碼不支持支付寶，請重新清除瀏覽器cookies再嘗試；
• 註冊時用戶填寫信息時一定要輸入正確的郵箱名字，否則修改十分麻煩。
• 買完域名之後一定要記得去自己的郵箱查看激活郵件，否則域名激活不了。

安裝準備軟件

依次下載安裝。

• 1、Node.js
• 2、Git

怎麼打開Git？

• 1、開始菜單Git Bash。
• 2、鼠標右鍵打開Git Bash。

註冊GitHub

訪問：http://www.github.com/

註冊你的username和郵箱，郵箱十分重要，GitHub上很多通知都是通過郵箱的。

註冊過程比較簡單，詳細也可以看：

一步步在GitHub上創建博客主頁 全系列 by pchou（推薦）

配置和使用Github

以下教程主要參考beiyuu的《使用Github Pages建獨立博客》寫成。

配置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 [e-mail]

如果是下面的反饋：

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 Help - Generating SSH Keys

GitHub Help - Error Permission denied (publickey)

使用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」 完成創建。

詳細可以看這裏：一步步在GitHub上創建博客主頁(2)

用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

瀏覽器輸入http://localhost:4000，查看搭建效果。此後的每次變更_config.yml 文件或者上傳文件都可以先用此命令調試，非常好用，尤其是當你想調試出自己想要的主題時。

將獨立域名與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

如有不詳看可以看DNSpod提供的官方幫助

詳細也可以看這裏：一步步在GitHub上創建博客主頁(3)

搭建完成

至此，獨立博客就算搭建完成，如需進步一完善請在參看以下文章或博客下留言。

Pacman主題介紹 by yangjian

使用hexo搭建博客 by yangjian

hexo系列教程：（二）搭建hexo博客 by zippera（推薦）

hexo系列教程：（三）hexo博客的配置、使用by zippera（推薦）

進階篇：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] #聯繫郵箱
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語法怎麼用？

請看這裏：獻給寫作者的 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在本機調試也是不起作用的。

推薦使用騰訊公益404。

圖牀

推薦使用七牛（10G空間，免費），還可以使用Yupoo（100m免費空間）

參考資料：

[1]一步步在GitHub上創建博客主頁 全系列 by pchou（推薦）

[2]網站優化：一步步在GitHub上創建博客主頁(6) by pchou （推薦）

[3]搭建一個免費的，無限流量的Blog----github Pages和Jekyll入門 by 阮一峯（推薦）

[4]hexo系列教程：（二）搭建hexo博客 by zippera（推薦）

[5]hexo系列教程：（三）hexo博客的配置、使用by zippera（推薦）

[6]hexo系列教程：（四）hexo博客的優化技巧 by zippera（推薦）

[7]hexo你的博客 by ibruce（推薦）

[8]Pacman主題介紹 by yangjian（推薦）

[9]使用hexo搭建博客 by yangjian（推薦）

[10]折騰了個Pacman主題 by wuchong（推薦）

[11]hexo官方寫作教程「Writing」

[12]知乎上的教程：如何搭建個人獨立博客？

[13]在GitHub Pages設置獨立域名的官方教程：[Setting up a custom domain with GitHub Pages]

[14]使用Github Pages建獨立博客 by beiyuu

[15]git/github初級運用自如 by 蟲師

[16]hexo搭建靜態博客以及優化 by Joanna Wu

[17]使用Hexo搭建個人博客 by c4fun

[18]Github Pages與Hexo建個人博客流程 by Kesco

[19]Git push時重複輸入用戶名密碼的問題 by zippera

[20]hexo文件結構及網站優化 by kevin chen

相關鏈接

[1]GitHub Pages主頁

[2]godaddy域名商

[3]DNSPOD

[4]Hexo官方主頁

[5]GotGitHub：GitHub介紹（推薦）

[5]圖標製作網站：faviconer

[6]本地測試頁localhost:4000

鳴謝

wuchong

yangjian

Van Cheng

關於我

這裏有我的個人簡介：關於我

如果你想看到我最新的文章，可以關注我的微信公衆號「cnfeat」。

文／CNFeat（簡書作者）
原文鏈接：http://www.jianshu.com/p/05289a4bc8b2
著作權歸作者所有，轉載請聯繫作者獲得授權，並標註“簡書作者”。