用 GitHub Pages + Hexo 搭建個人專屬部落格

摘要： 如果你也渴望擁有一個屬於自己的部落格，那麼你應該花費一些時間好好閱讀本教程。 學習最好的方法論 —— 就是去做。 什麼是 GitHub Pages? GitHub Pages 是 GitHub 提供的靜態站點託管服務，它可以通過 GitHub 庫託管你的個人、組...

如果你也渴望擁有一個屬於自己的部落格，那麼你應該花費一些時間好好閱讀本教程。

學習最好的方法論 —— 就是去做。

什麼是 GitHub/">GitHub Pages?

GitHub Pages 是 GitHub 提供的靜態站點託管服務，它可以通過 GitHub 庫託管你的個人、組織或專案的站點。

你可以使用 Jekyll Theme Chooser 線上建立和部署 GitHub Pages 站點。如果你更喜歡通過本地建立和部署站點，你也可以使用 GitHub Desktop 或者命令列。

GitHub Pages 是一種靜態網頁託管服務，因此不支援 PHP, Ruby, or Python 等服務端程式碼。

本教程使用 Hexo 搭建個人 GitHub Pages，因此如果你想建立和部署組織或專案的網頁，部分內容可能會不太適用，需要自行作出調整。

注意：GitHub Pages 站點在網際網路上是公開可見的，即便你的託管庫是私密的。因此如果在你的網頁庫中有敏感資料，你可能會想在網頁釋出前移除它們。

什麼是 Hexo?

Hexo 是一個快捷、簡潔且高效的部落格框架。你可以使用 Markdown 書寫博文，彈指一揮間 Hexo 就可以利用其精緻的主題生成精美的靜態部落格網頁。

Markdown 是一種標記語言，其語法簡潔明瞭、學習容易，而且功能比純文字更強大。

準備

1. 下載、安裝與配置 Git
2. 下載與安裝 Node.js

什麼是 Git ? Git 是目前世界上最先進的分散式版本控制系統（沒有之一）。

下載、安裝與配置 Git 的具體方式取決於你當前所使用的作業系統。

基於 Windows 作業系統安裝 Git

下載 ofollow,noindex">git for windows 安裝程式。由於眾所周知的原因，從左側的連結下載 git for windows 十分緩慢。可以參考 頁面 ，收錄了儲存於百度雲的下載地址。

安裝完成後，還需要最後一步設定，在命令列輸入：

$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]"

例如，你的名字為 Yunhao Zhu, 郵箱為 [email protected] ：

$ git config --global user.name "Yunhao Zhu"
$ git config --global user.email "[email protected]"

基於 Mac OS X 作業系統安裝 Git

有三種方法：

1. 使用 Homebrew , MacPorts :

brew install git

2. 直接從 AppStore 安裝 Xcode，Xcode 集成了 Git，不過預設沒有安裝，你需要執行Xcode，選擇選單“Xcode”->“Preferences”，在彈出視窗中找到“Downloads”，選擇“Command Line Tools”，點“Install”就可以完成安裝了。

3. 或者下載 git for Mac OS X 安裝程式。

基於 Linux 作業系統安裝 Git

1. Linux (Ubuntu, Debian):

sudo apt-get install git-core.

2. Linux (Fedora, Red Hat, CentOS):

sudo yum install git-core.

安裝 Node.js

1. 下載 安裝程式 安裝 Node.js

在Windows上安裝時務必選擇全部元件，包括勾選 Add to Path

安裝完成後，請開啟命令提示符 cmd 輸入

node -v

出現 vxx.xx.xx 代表安裝成功！

2. 安裝 Node.js 的最佳方式是使用 nvm

cURL:

$ curl https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/v0.33.11/install.sh | sh

安裝完成後，重啟終端並執行下列命令即可安裝 Node.js

$ nvm install stable

第三部：安裝 Hexo

呼，準備工作終於完成了！讓我們馬上使用 npm 來安裝 Hexo，執行如下命令:

$ npm install -g hexo-cli

安裝 Hexo 完成後，接著執行以下命令:

$ hexo init <folder>
$ cd <folder>
$ npm install

例如，你安裝在c盤hexo資料夾下，則執行:

$ hexo init /c/hexo
$ cd /c/hexo
$ npm install
$ hexo generetor
$ hexo server

什麼是 npm?

npm 是 Node.js 的包管理工具（package manager）， 幫助我們管理開發中會用到的各種 Node.js 包，極大的方便了我們的開發。

新建完成後，指定資料夾的目錄如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|├── _drafts
|└── _posts
└── themes

開啟瀏覽器輸入 http://localhost:4000/

建立 GitHub Pages

1. 註冊 GitHub 賬號

2. 新建一個 repository 庫，Repository name 輸入 "Your username.github.io"

3. 點選 Settings 下拉至 -> GitHub Pages -> Page name 必須與剛才的庫名保持一致 -> 選擇一個喜歡的主題 Publish page -> 在位址列輸入你的部落格地址即可看到效果

將本地 Hexo 程式碼部署至 GitHub

1. 修改本地 Hexo 站點的配置檔案 _config.yml，在末尾新增（xxx為你註冊的GitHub使用者名稱）

deploy:
type: git
repository: https://github.com/xxx/xxx.github.io
branch: master

2. 利用 npm，上傳原生代碼，第一次 GitHub 可能會要求你輸入使用者名稱和密碼

npm install hexo-deployer-git --save
hexo g
hexo d

輸入剛才設定的 https://github.com/xxx/xxx.github.io 即可檢視效果

3. 釋出你的第一篇部落格，在根目錄下輸入

$ hexo new "postname"
$ hexo g
$ hexo d

結語

恭喜你！看到這裡，你已經成功掌握了個人部落格的搭建技術，教程到這裡也就結束了，都是最最基礎的內容，關於 GitHub Pages 和 Hexo 還有很多進階內容等著你去學習。本教程後續也會有更多進階內容，如果你感興趣的話，歡迎持續關注。

最後，作者水平有限，如有錯誤、遺漏，歡迎批評指正。