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

原文地址： http://www.cnfeat.com/blog/2014/05/11/how-to-build-a-blog/

摘要：這是一篇很詳盡的獨立博客搭建教程，裏面介紹了域名註冊、DNS 設置、GitHub 和 Jekyll 設置等過程，這是我寫得最長的一篇教程。我想將我搭建獨立博客的過程在一篇文章中儘可能詳細地寫出來，希望能給後來者一個明確的指引，同時用這篇教程開篇，正式開始我的第八大洲之旅。

搭建博客容易，持續寫博客困難，自 2014 搭建博客至今，我已持續寫作超過 3 年，寫出 60W+ 文字，開發出一套適合寫作者的新手指南——笨方法學寫作課程，52 個刻意練習，這一次徹底學成寫作。

報名請點：http://www.LearnWritingTheHardWay.cn

前言

作爲一個技術小白，沒有技術基礎，看網上的教程也雲裏霧裏，看程序員的教程相當不容易，稍微有些細節描述得不清楚自己就要繞彎路去找答案（善用搜索引擎），所以，在自己的博客搭建完成之後，我決定要將我搭建博客的過程全記錄下來，以供後期和我一樣的小白參考（是的，我堅信還有很多一樣和我一樣的人），我會儘可能詳細的整理這個教程，其中的資料可能會摘錄到其他人的教程，我會在後面列出了參考資料，感謝這些作者們。

爲什麼要開博客？可以看看我的這篇《爲什麼你要寫博客？》

也可以看看這篇《我的博客時代》

以下以我的博客：www.cnfeat.com爲例，教大家如何搭建一個獨立博客。

爲什麼要搭建一個獨立博客?

獨立的纔是自己的。

小白進入門檻

1、非常折騰，需要耐心；
2、也需要一定的學習能力和鑽研精神；
3、懂一些網頁基礎知識，不懂也重要，參看第二和第三條；

爲什麼選擇 GitHub Pages ？

很多人用 Wordpress，你爲什麼要用 GitHub Pages 來搭建？

1、GitHub Pages 有 300M 免費空間，資料自己管理，保存可靠；
2、學着用 GitHub，享受 GitHub 的便利，上面有很多大牛，眼界會開闊很多；
3、順便看看 GitHub 工作原理，最好的團隊協作流程；
4、GitHub 是趨勢；
5、你不覺得一個文科生用 GitHub 很 Geek 嗎？瞬間躋身技術界；

GitHub Pages 是什麼？

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

GitHub Pages 可以被認爲是用戶編寫的、託管在 GitHub 上的靜態網頁。

購買域名

只推薦上 GoDaddy 購買，安全，而且可以使用支付寶。

現在 GoDaddy 已經有中文版了，雖然國家顯示是新加坡，但不影響使用。

教程（截止至 2017 年 06 月 21 日）如下

1、查你想要的域名；

2、查到適合的域名之後選擇「添加到購物車」；

3、GoDaddy 其他域名收費服務，不要管，繼續「進入購物車」；

後面的服務全部點擊「不，謝謝」，免費的服務也不要用

4、確認購買修改購買年限，默認是兩年，可以修改成 1/2/3/5/10 年，隨自己喜歡。現在 GoDaddy 上 .com 每年的默認費用是 7元/年。

但實際上，你看到我現在購買的是第 1 年：¥5.86/年第 2 年後：¥101.00/年，GoDaddy 的域名價格時常有波動，以當時爲準即可。

個人博客，建議購買 5 年限，等到你 5 年後覺得還有必要，再 10 年續下去。

如果你不是土豪，可以上網搜 GoDaddy 優惠碼，一般優惠幅度是 20%~ 30% 不等

填完之後，五年的費用就從 415.56 會變成 333.95 元。

說明一下：網上的優惠碼優惠不一，你可以逐個嘗試拿個最低價，這裏就不一一測試了。

如圖，我買了五年的費用就是 333.95 元，隨後點擊「前去付款」

5、結算。登錄或註冊界面，填完必要的信息之後，選擇用支付寶結算。

註冊後頁面跳轉到結算頁面

如果結算出現問題，可以查看這個頁面。

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

7、補充一些注意事項：

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

安裝準備軟件

依次下載安裝。

1、Node.js
2、Git

怎麼打開 Git ？

Win 平臺操作

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

Mac 平臺操作

安裝 Git 之後可直接在 Terminal 操作

註冊 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、打開本地 id_rsa.pub 文件（參考地址 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 的空間綁定

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、點擊你的賬戶，管理我的域名。

2、點擊域名。

3、將 GoDaddy 的 Nameservers 更改成 f1g1ns1.dnspod.net 和 f1g1ns2.dnspod.net

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

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

使用 GitHub Pages 建立博客

與 GitHub 建立好鏈接之後，就可以方便的使用它提供的 Pages 服務，GitHub Pages 分兩種，一種是你的 GitHub 用戶名建立的 username.GitHub.io 這樣的用戶&組織頁（站），另一種是依附項目的 Pages。

想建立個人博客是用的第一種，形如 cnfeat.GitHub.io 這樣的可訪問的站，每個用戶名下面只能建立一個。

Fork 已設置好的倉庫

點擊 cnfeat/blog.io

點擊右上角的 Fork

這樣，你就得到我的博客倉庫了。

你可以到

https://GitHub.com/你的用戶名/blog.io

確認一下

然後將 blog.io 改成你的 GitHub 用戶名.GitHub.io

例如我的就改成 cnfeat.GitHub.io

改好之後，可以發現，’你的 GitHub 用戶名.GitHub.io’ 已經可以訪問了。

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

GitHub Pages 的設置

去到你的 blog.io 倉庫，點擊 CNAME ,再點擊右下角的鉛筆編輯，將 cnfeat.com 改成你的域名

這樣，你再去你綁定的域名看看，估計已經導向到 ‘你的 GitHub 用戶名.GitHub.io’ 了。

搭建完成

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

如何更新博文

安裝 GitHub desktop

下載地址：GitHub Desktop

找你的倉庫 Git 地址

去到你的博客倉庫：https://GitHub.com/你的用戶名/blog.io

複製 clone 地址

例如我的就是

https://github.com/cnfeat/blog.io.git

clone 你倉庫到本地

點擊左上角的「+」號，選擇 add，choose ‘你的 GitHub 用戶名.GitHub.io’ 文件夾。

如此，你的本地博客倉庫就已經和 GitHub 的倉庫同步起來了。

修訂 _posts 文件夾中的 md 文件

blog.io 倉庫已經自帶兩篇文章模板，按照模板修改即可。

推送文章更新

修訂或新增完文章，再回到 GitHub desktop，點擊同步更新即可。

更新個人博客信息配置

自己把 blog.io 中文件都點開看一遍，主要配置文件是 _config.yml ，推薦使用 sublime 打開。

修訂清單如下，文檔內有詳細註釋，可按註釋逐個修訂

博客名字及作者信息：_config.yml
個人介紹頁面：about.md
代表作頁面：milestone.md
文章模板：blog.io/_posts/2015-03-02-how-to-write.md

404頁面

GitHub Pages有提供製作404頁面的指引：Custom 404 Pages。

直接在根目錄下創建自己的 404.html 或者 404.md 就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用。

推薦使用騰訊公益404。

圖牀

推薦使用七牛（10G空間，免費）。

參考資料：

[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

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

前言

爲什麼要搭建一個獨立博客?

小白進入門檻

爲什麼選擇 GitHub Pages ？

GitHub Pages 是什麼？

購買域名

安裝準備軟件

怎麼打開 Git ？

Win 平臺操作

Mac 平臺操作

註冊 GitHub

配置和使用 GitHub

配置 SSH keys

檢查 SSH keys的設置

生成新的 SSH Key：

添加 SSH Key 到 GitHub

測試

設置用戶信息

SSH Key 配置成功

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

DNS 設置

去 GoDaddy 修改 DNS 地址

使用 GitHub Pages 建立博客

Fork 已設置好的倉庫

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

GitHub Pages 的設置

搭建完成

如何更新博文

安裝 GitHub desktop

找你的倉庫 Git 地址

clone 你倉庫到本地

修訂 _posts 文件夾中的 md 文件

推送文章更新

更新個人博客信息配置

404頁面

圖牀

參考資料：

相關鏈接