說在前面
本篇以 Windows 環境架設 Blog，同時記錄自己 Blog 建立的過程。
環境建置
開始前，你要先有：
- Node.js
- Git (可參考這篇建置 Node.js 及 Git 環境)
- GitHub 帳號 (免費註冊使用)
nvm 安裝
完成上述基本環境建置後，需先安裝 nvm 才能安裝 Hexo，先在 Ubuntu 輸入
1
2
3
4$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
# 安裝 nvm
# 接著重開 Ubuntu
確認 nvm 是否安裝
1
2
3$ command -v nvm
# nvm
列出所有可以安裝的 nvm 版本
1
$ nvm ls-remote
安裝 node 12.13.0
1
2
3
4$ nvm install 12.13.0
$ nvm install <version>
# 截止至今，最新版本為 12.13.0
檢視本地端可以使用的版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17$ nvm ls
# 以下為顯示結果
-> v12.13.0
system
default -> 12.13.0 (-> v12.13.0)
node -> stable (-> v12.13.0) (default)
stable -> 12.13 (-> v12.13.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/erbium (-> v12.13.0)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.16.2 (-> N/A)
lts/dubnium -> v10.16.3 (-> N/A)
lts/erbium -> v12.13.0
# 以上為顯示結果
確認 node 路徑來源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16$ which node
# /home/river/.nvm/versions/node/v12.13.0/bin/node
$ nvm use system
# 切換回系統的 Node.js
# Now using system version of node: v12.11.1 (npm v6.11.3)
$ which node
# /usr/bin/node
$ nvm use 12.13.0
# 切換 nvm 版本
# Now using node v12.13.0 (npm v6.12.0)
$ which node
# /home/river/.nvm/versions/node/v12.13.0/bin/node
安裝 Hexo
1
$ npm install -g hexo-cli
查詢 Hexo 版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22$ hexo --version
# 以下為顯示結果
hexo-cli: 3.1.0
os: Linux 4.4.0-18362-Microsoft linux x64
node: 12.13.0
v8: 7.7.299.13-node.12
uv: 1.32.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019a
unicode: 12.1
# 以上為顯示結果
初始化這個部落格
1
2
3
4
5
6$ hexo init <資料夾名稱>
$ hexo init RiverBlog
# 自由命名
$ npm install
# 安裝相關套件
執行 Hexo server
1
2
3
4
5
6$ hexo s
# 瀏覽器輸入 http://localhost:4000
# 預設 port 4000 想更換可改輸入 $ hexo s -p XXXX
# XXXX 可換成想輸入的數字
# 關閉 hexo server 指令 Ctrl + C
更換主題
預設 themes 不喜歡的話，可到 Hexo Themes 挑喜歡的主題
備註：挑選喜歡的主題後，務必詳讀該主題 GitHub 及 Hexo 官方文件，後續才知道如何改 (各主題修改方式不盡相同，依該主題 GitHub 文件說明為主)
以「Ocean」主題為例
進入 GitHub 後，複製下載連結
切換到 themes 資料夾
1
2
3
4
5
6
7
8
9
10
11
12$ cd themes
# 切換到 themes 資料夾
$ git clone <URL>
$ git clone https://github.com/zhwangart/hexo-theme-ocean.git
# 將想要的主題 clone 下來
$ cd ..
# 回上一層資料夾
$ code .
# 開啟 VScode 編輯軟體
修改「_config.yml」前，先把 hexo server 關閉
1
2
3
4
5
6
7
8# 修改前
theme: landscape
# 修改後
theme: hexo-theme-ocean
# 改的是「RiverBlog」底下的「_config.yml」
# 而非「themes」底下的「_config.yml」
theme 主題替換後，再次執行
1
2
3
4$ hexo s
# 開啟瀏覽器，會發現主題已更換
# 若預設主題確定不會再使用，可把「themes」底下的資料夾「landscape」刪除
新增文章
1
2
3
4$ hexo new "<title>"
$ hexo new "標題寫在這裡，Hello World"
# 這指令很常用，每次新增文章都要這麼做
Hexo 支援 Markdown 語法，使用方法自行翻閱 API
編輯文章時 $ hexo s 免關，可直接重新整理瀏覽器，即時觀看內容
部署 GitHub
當 Blog 改成想要的形狀後，接下來要部署到 GitHub
安装 deploy git 插件
1
2
3$ npm install hexo-deployer-git --save
# 要在對的路徑做這件事情喔
登入 GitHub 後，選「New repository」
在 GitHub 新增一個名稱為 <username>.github.io 的專案
範例：
Repository name：RiverBlog.github.io
備註：username 須與 GitHub 名稱一樣，後面「.github.io」不可省略，以免 CSS、JavaScript 效果吃不到 (這超重要!!!)
產生的「.git」連結複製起來，「_config.yml」檔案會用到
備註：此網頁先不要關，後面會用到
1
2
3
4
5
6
7
8
9
10
11
12# 修改前
deploy:
type:
# 修改後
deploy:
type: git
repo: https://github.com/River-Ye/riverye.github.io.git
branch: master
# 空格不能省略
# 其中 repo 換成自己的 GitHub 連結
在 Ubuntu 及 Git Bash 皆輸入
備註：已經有再用 git push 者，可省略此步驟
1
2
3
4
5
6
7
8
9
10# 輸入 GitHub 名稱、信箱
$ git config --global user.name "your_name"
$ git config --global user.email "your_email"
# 範例
$ git config --global user.name "River-Ye"
$ git config --global user.email "xxxx@gmail.com"
# 檢視目前設定
$ git config --list
完成 GitHub 設定後，接下來要部署到 GitHub
1
2
3
4
5
6
7$ hexo g -d
# 產生靜態檔後就部署
# 這指令會很常用，每次有新文章或修改內容時，都會用到!!!
# 之前提過 Windows 底下的 Ubuntu push GitHub 輸入帳號密碼時，會說驗證錯誤
# 因此需透過 Git Bash push
# Mac 則無此問題
備註：Mac 使用者，執行完 $ hexo g -d 即完成部署並推上 GitHub，可直接跳到「讓連結正常化」開始觀看
忽略此錯誤訊息，接下來改用 Git Bash push
Git Bash 輸入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20$ cd /c/demo/RiverBlog/.deploy_git/
# 切換到 「.deploy_git」 資料夾
$ git remote add river_blog https://github.com/River-Ye/RiverBlog.github.io.git
$ git remote add <遠端 branch 名稱，自由命名> <遠端連結>
# 手動新增 GitHub 遠端 branch 名稱、連結
$ git remote -v
# 查詢 remote 有哪些
$ git push -u river_blog master
$ git push -u <遠端 branch 名稱> <本地端 branch 名稱>
# push 到 GitHub
# Windwos 第一次 push 以後，之後指令改成
# $ git push <遠端 branch 名稱> <本地端 branch 名稱> -f
# 範例：
# $ git push river master -f
$ git log
# 查看 git log
過程中，會需要輸入 GitHub 名稱、密碼
備註：第一次會需要輸入 GitHub 名稱、密碼，之後不用再輸入
打開 GitHub project 的 Settings，下方即可看到 GitHub 網址連結 https://river-demo.github.io/
完成以上步驟即可獲得 username.github.io 的網址
讓連結正常化
此時會發現 Blog 中的連結幾乎失效，回到「_config.yml」中設定
1
2
3
4
5
6
7
8
9
10# 修改前
url: http://yoursite.com/
# # 修改後
url: https://river-demo.github.io/
url: https://riverye.com/
# 可用 username.github.io 或自己的 domain
# 看需求調整
客製化 domain
有了 https://river-demo.github.io/ 後，想把網址換成專屬網域名稱，以下兩個方法可供參考：
- Gandi.net ( riverye.com 在這買的)
- freenom ( river-demo.tk 在這挑的，教學用，免費，但網址比較醜)
搜尋想買的網域名稱後，信用卡刷一波就有了
新增 DNS 紀錄
1
2
3類型： A
TTL： 1800
IPv4： 185.199.108.153
參考：GitHub 官方列表
GitHub 設定如下
稍等片刻即完成 riverye.com
搜尋想要的網域名稱後，可選擇信用卡刷一波，或挑免費的使用
備註： freenom 註冊按鈕藏在購物車內
跟著使用體驗流程走，便會看到註冊畫面 (很隱藏)
購買完成後，從首頁上方「Services」點選「My Domains」接著設定「Manage Domain」中的「Manage Freenom DNS」
Manage Freenom DNS 設定如下
1
2
3
4
5| Name | Type | TTL | Target |
| ---- | ----- | ---- | --------------- |
| | A | 1800 | 185.199.108.153 |
| ---- | ----- | ---- | --------------- |
| WWW | CNAME | 1800 | river-demo.tk |
GitHub 設定如下
稍等片刻即完成 river-demo.tk
完成以上步驟，恭喜有專屬 domain Blog (灑花
Q & A
1. 之前裝過 Node.js 為何還要裝 NVM ?
先前我們有使用 Ubuntu 本身的 apt-get 安裝 Node.js
不過那是被安裝到 /usr/bin/node
有時候安裝套件需要 sudo 提供管理者權限
非常麻煩，因此我們使用 nvm 來安裝另一個 Node.js
這個 Node.js 的執行檔就任我們使用，不需要提供管理者權限了
2. Hexo 上沒喜歡的 themes，有別的選擇嗎 ?
沒關係，給你滿滿的選擇：
jekyll https://jekyllrb.com/
Ghost https://ghost.org
Hugo https://gohugo.io
Hexo https://hexo.io
Octopress http://octopress.org/
VuePress https://vuepress.vuejs.org
附上：靜態頁面產生器的比較
3. 為什麼你 GitHub Settings 中的「Enforce HTTPS」可以勾 ?
讓子彈飛一回，就有了 (約半小時左右)
4. 為什麼更新 GitHub 後，原本 domain 會失效 ?
GitHub 的 Settings 跑掉，手動改回原本 domain 即可
最後的最後
照著上面操作，或許能畫葫蘆出一個 Blog，但沒相關知識 (HTML5、Git、Linux 指令...等) 的話，會發現改不太動，甚至玩壞時不知該如何處理，這時請擅用 Google 自行解決問題