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

被端走的小菜

13 min readOct 23, 2019

本文章同步發表於小菜的 Blog https://riverye.com/

說在前面

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

環境建置

開始前，你要先有：

nvm 安裝

完成上述基本環境建置後，需先安裝 nvm 才能安裝 Hexo，先在 Ubuntu 輸入

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash

# 安裝 nvm
# 接著重開 Ubuntu

確認 nvm 是否安裝

$ command -v nvm

# nvm

列出所有可以安裝的 nvm 版本

nvm ls-remote

安裝 node 12.13.0

$ nvm install 12.13.0
$ nvm install <version>

# 截止至今，最新版本為 12.13.0

檢視本地端可以使用的版本

$ 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 路徑來源

$ 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

$ npm install -g hexo-cli

查詢 Hexo 版本

$ 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
# 以上為顯示結果

初始化這個部落格

$ hexo init <資料夾名稱>
$ hexo init RiverBlog

$ npm install
# 安裝相關套件

執行 Hexo server

$ hexo s

# 瀏覽器輸入 http://localhost:4000
# 預設 port 4000 想更換可改輸入 $ hexo s -p XXXX
# XXXX 可換成想輸入的數字
# 關閉 hexo server 指令 Ctrl + C

更換主題

預設 themes 不喜歡的話，可到 Hexo Themes 挑喜歡的主題

以「Ocean」主題為例

進入 GitHub 後，複製下載連結

切換到 themes 資料夾

$ 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 關閉

# 修改前
theme: landscape

# 修改後
theme: hexo-theme-ocean

# 改的是「RiverBlog」底下的「_config.yml」
# 而非「themes」底下的「_config.yml」

theme 主題替換後，再次執行

$ hexo s

# 開啟瀏覽器，會發現主題已更換
# 若預設主題確定不會再使用，可把「themes」底下的資料夾「landscape」刪除

新增文章

$ hexo new "<title>"
$ hexo new "標題寫在這裡，Hello World"

# 這指令很常用，每次新增文章都要這麼做

Hexo 支援 Markdown 語法，使用方法自行翻閱 API

編輯文章時，$ hexo s 免關，可直接重新整理瀏覽器，即時觀看內容

部署 GitHub

當 Blog 改成想要的形狀後，接下來要部署到 GitHub

安装 deploy git 插件

$ npm install hexo-deployer-git --save

登入 GitHub 後，選「New repository」

在 GitHub 新增一個名稱為 <username>.github.io 的專案
Repository name：RiverBlog.github.io
備註：username 須與 GitHub 名稱一樣，以免 CSS、JavaScript 效果吃不到

產生的「.git」連結複製起來，「_config.yml」檔案會用到備註：此網頁先不要關，後面會用到

# 修改前
deploy:
  type:

# 修改後
deploy:
  type: git
  repo:
    github: https://github.com/River-Ye/RiverBlog.github.io.git
    branch: master

# 空格不能省略
# 其中 github 換成自己的 GitHub 連結

在 Ubuntu 及 Git Bash 皆輸入

# 輸入 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

$ hexo g -d

# 產生靜態檔後就部署
# 這指令會很常用，每次有新文章或修改內容時，都會用到!!!
# 之前提過 Windows 底下的 Ubuntu push GitHub 輸入帳號密碼時，會說驗證錯誤
# 因此需透過 Git Bash push
# Mac 則無此問題

忽略此錯誤訊息，接下來改用 Git Bash push

Git Bash 輸入

$ 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 project 的 Settings，下方即可看到 GitHub 網址連結 https://river-demo.github.io/

完成以上步驟即可獲得 username.github.io 的網址

此時會發現 Blog 中的連結幾乎失效 ，回到「_config.yml」中設定

# 修改前
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 在這挑的，教學用，免費，但網址比較醜)

Gandi.net

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

新增 DNS 紀錄

類型： 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 設定如下

| Name | Type  | TTL  |     Target      |
| ---- | ----- | ---- | --------------- |
|      |   A   | 1800 | 185.199.108.153 |
| ---- | ----- | ---- | --------------- |
|  WWW | CNAME | 1800 | river-demo.tk   |