10分鐘內從安裝Hexo到佈署至GitHub Pages

Hexo簡單來說，跟WordPress一樣都是建立網站的工具

但是不同的是，WordPress是動態網站，而Hexo則是靜態網站

WordPress有圖形化介面，所以簡單好上手。而Hexo雖然沒有圖形化介面，但是它支援Markdown，所以自由度高

這一個教學只有包含用最短的時間將Hexo網站佈署到GitHub Pages上，所以其他的部分就只能自己去爬文囉

必備工具：

1. Node.js
2. Git

（兩個先按照預設值安裝完成，再進行下列步驟）

可選工具（用於編輯配置檔及欲發表的文章）：

1. Visual Studio Code（推薦）
2. Notepad++

前置作業

---

Step 1: GitHub建立一個專案，名稱為<username>.github.io

然後到專案設定裡面的GitHub Pages，點選Choose a theme，接著按右上角的Select theme

正式安裝

---

Step 2: 在想要安裝的地方（例如桌面）點右鍵，選擇 Git Bash here

Step 3: 輸入npm install hexo-cli -g

Step 4: 按順序輸入以下指令

hexo init <資料夾名稱>

cd <資料夾名稱>

npm install

Step 5: 接著輸入以下指令建立網頁並開啟伺服器

hexo g

hexo s

Step 6: 輸入上面顯示的網址 (http://localhost:4000/) 就可以看到網站的樣子

安裝主題

---

我這裡以ICARUS為範例

大家可以到 https://hexo.io/themes/ 找自己喜歡的主題

Step 7: 輸入下列指令安裝

git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

Step 8: 接著開啟資料夾裡面的 _config.yml，找到theme並修改為theme: icarus

Step 9: 輸入hexo clean清除快取(可以不用)，再輸入hexo g產生網頁

註：有些主題安裝之後，在產生網頁的時候會有錯誤訊息，只要安裝缺少的插件就解決了

Step 10: 錯誤訊息裡面會有一行指令，將指令複製貼上並執行就可以安裝缺少的插件

Step 11: 再一次輸入hexo clean、hexo g和hexo s就OK了

部屬到Github Pages

---

Step 1: 輸入以下指令

npm install hexo-deployer-git --save

Step 2:輸入下面兩個指令（Github的使用者名稱及註冊時所輸入的Email）

git config --global user.name "<username>"

git config --global user.email "<email address>"

Step 3: 輸入以下指令，再按三下Enter

ssh-keygen -t rsa -C "<email address>"

Step 4:輸入下列指令，然後複製裡面的內容

cat ~/.ssh/id_rsa.pub

Step 5: 到Github的設定，點左邊的 SSH and GPG keys ，再按右上角的New SSH Key 接著輸入標題，將複製的內容貼上後按 Add SSH Key

Step 6: 輸入ssh -T git@github.com再輸入yes

如果最後一行出現自己的使用者名稱就代表成功了 (Hi, <username>! ...)

Step 7: 打開_config.yml，拉到最底下，找到deploy並修改為

deploy:
 type: git
 repo: https://github.com/<username>/<username>.github.io
 branch: master

Step 8: 輸入hexo g後再輸入hexo d （如果是第一次佈署，會跳出視窗要求登入Github）

Final: 等幾分鐘之後再進入<username>.github.io就能看到網站囉