你必須很努力

從無到有的 Blog 建置教學 (含 domain 購買轉址)

2019/10/23
字數統計: 2.1k閱讀時間: 9 min

說在前面

本篇以 Windows 環境架設 Blog,同時記錄自己 Blog 建立的過程。


環境建置

開始前,你要先有:

  1. Node.js
  2. Git (可參考這篇建置 Node.js 及 Git 環境)
  3. 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 編輯軟體

備註:Visual Studio Code 官方網站

修改「_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/ 後,想把網址換成專屬網域名稱,以下兩個方法可供參考:

  1. Gandi.net ( riverye.com 在這買的)
  2. freenom ( river-demo.tk 在這挑的,教學用,免費,但網址比較醜)

Gandi.net

搜尋想買的網域名稱後,信用卡刷一波就有了

新增 DNS 紀錄

1
2
3
類型: A
TTL: 1800
IPv4: 185.199.108.153

參考:GitHub 官方列表

GitHub 設定如下

稍等片刻即完成 riverye.com


freenom

搜尋想要的網域名稱後,可選擇信用卡刷一波,或挑免費的使用

備註: 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 自行解決問題

原文連結:https://riverye.com/2019/10/23/從無到有的-Blog-建置教學-含-domain-購買轉址/

發表日期:2019-10-23

更新日期:2019-10-25

CATALOG
  1. 1. 說在前面
  2. 2. 環境建置
  3. 3. nvm 安裝
  4. 4. 安裝 Hexo
  5. 5. 更換主題
  6. 6. 新增文章
  7. 7. 部署 GitHub
    1. 7.1. 安装 deploy git 插件
    2. 7.2. 登入 GitHub 後,選「New repository」
  8. 8. 讓連結正常化
  9. 9. 客製化 domain
    1. 9.1. Gandi.net
    2. 9.2. freenom
  10. 10. 完成以上步驟,恭喜有專屬 domain Blog (灑花
  11. 11. Q & A
    1. 11.1. 1. 之前裝過 Node.js 為何還要裝 NVM ?
    2. 11.2. 2. Hexo 上沒喜歡的 themes,有別的選擇嗎 ?
    3. 11.3. 3. 為什麼你 GitHub Settings 中的「Enforce HTTPS」可以勾 ?
    4. 11.4. 4. 為什麼更新 GitHub 後,原本 domain 會失效 ?
  12. 12. 最後的最後