圈圈工程師

Change Change Developer

0%

架設部落格第一次就上手 Hexo + Github + 自訂網域

發表於 更新於 分類於 ，

身爲一個工程師，隨著時間的成長，所需學習的知識日益增加。對於過往的知識都要完美地記得似乎是一個不可能的任務。於是爲自己所學的技能設立一個知識資料庫讓未來的自己可以查詢似乎就變得十分重要了，就來看看如何用 Hexo + Github 架設部落格吧！


HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。
若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍

這篇文章是寫給誰看的呢？

  • 會使用 Git 的工程師 或 對 Git 有一定瞭解的人
  • 瞭解 Markdown 語法怎麼使用
  • 需要架設自己 Blog 且 希望有自己的網域的人

若你已經知道為什麼要寫 Blog 與使用 Hexo 的原因的朋友，可以快轉到 安裝 / 設定 Hexo 囉 😍

為什麼要架設 Blog

身爲一個工程師，隨著時間的成長，所需學習的知識日益增加。
對於過往的知識都要完美地記得似乎是一個不可能的任務。
於是爲自己所學的技能設立一個知識資料庫讓未來的自己可以查詢似乎就變得十分重要了。

架設 Blog 有什麼好處呢？

  • 快速方便地回顧記錄過的知識與遇到的問題的解法
  • 累積屬於自己在技術專業知識品牌
  • 面試時可以作爲加分的作品集項目

選擇 Hexo 的原因

在 2021 年架設 Blog 有上千種可行的做法。
馬上想到的也許有 Wordpress、Medium、Blogger 等等超多種不同的選擇，所以怎麼選擇？

從自身的需求出發：用最簡單的方式撰寫 Blog，並且有一個自己的網域域名（Domain）放在網路上

當初在 Medium 與 Wordpress 有遇到以下幾點問題：

  • Medium 對於程式碼的語法高亮顯示不夠友善，所以程式碼都會呈現看起來不舒服的狀態
  • Medium 與 Wordpress 都無法使用 Markdown 語法快速地書寫 H1、H2、列點樣式
  • Medium 無法替換自己的 Blog 主題樣式
  • Wordpress 設定感覺好複雜
  • Medium 無法自己保有文章在自己手上，如果之後要轉移陣地的話，似乎就有點困擾
  • 想要 Blog 有自己的網域域名（Domain）
  • 幫文章找一個家，但不想要 Host 伺服器主機

把問題列出來之後發現自己有點難搞 🤣

需求整理：

  • 支援程式碼語法高亮顯示
  • 支援 Markdown 語法
  • 主題樣式選擇多樣，且可彈性客製化
  • 自己可以擁有這些文章檔案，讓未來的遷移有更多的自由度
  • 幫文章找一個免費的家又不用管理伺服器主機
  • 可以簡單快速撰寫與發佈，不需要太多的複雜繁複的設定

帶著上述的需求開始在網路上尋找，於是找到了所謂的靜態網站產生器（Static Site Generator）。
相較會因使用者於有所不同的呈現內容的動態網站（e.g: Facebook）。
靜態網站則不會因爲不同的使用者而有所不同的呈現，所以很適合用於像是 Blog 這種資訊內容的網站。

靜態網站產生器（Static Site Generator） 其實也有滿多套的，最後自己選擇了 Hexo

為什麼要使用 Hexo 呢？

Hexo 是一套專門用來寫網誌的框架，他有幾個特性可以滿足自己上述的需求：

  • 簡單、易懂、快速
  • Markdown 支援
  • 一鍵部署
  • 豐富的色彩主題與外掛
  • 可以將產生的靜態網站放在 Github 的儲存庫作爲 Blog 文章的家

安裝所需工具

NodeJs

Hexo 需要 Nodejs 的環境，若電腦上沒有的需要安裝 Nodejs 喔！
傑西這邊使用的是 mac 的 v14.16.0 版本
Nodejs

Git

Hexo 也需要使用到 Git，若電腦上沒有的需要安裝 Git 喔！
Git

Visual Studio Code (vs code)

可以用自己習慣的 IDE 作爲編輯器，本篇文章的範例是使用 Visual Studio Code

安裝 Hexo

確認上述兩個工具都有安裝後，我們終於可以來安裝 Hexo 囉。
依照 Hexo 官方文件的指示，我們可以在 終端機 執行：

1
npm install -g hexo-cli

如何打開終端機 ?
Mac: 在 spotlight 上搜尋 Terminal.app 即可
Win：在開始 搜尋 Git Bash

建立 Hexo 專案

切換到家目錄

1
cd ~

建立 Hexo 專案

以下指令會產生一個叫做 my-blog 的資料夾，資料夾名稱可以任意更改，只要是英文即可

1
hexo init my-blog

切換到產生的專案資料夾，記得要跟上面定義的資料夾名稱一樣喔

1
cd my-blog

用 npm 下載 hexo 所需要用到的套件

1
npm install

在本機端啓動 Hexo 的伺服器

1
hexo server

打開瀏覽器在網址輸入 http://localhost:4000/，應該就會看到 Hexo 出現在你的瀏覽器囉 😍

Hexo 設定

產生的 Hexo 的專案資料夾會呈現以下的資料夾結構：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • scaffolds
    鷹架資料夾。當您建立新文章時，Hexo 會根據 scaffold 來建立檔案。
  • source
    原始檔案資料夾是放置內容的地方。檔案 / 資料夾名稱開頭為 _ (底線) 和隱藏檔案會被忽略，除了 _posts 資料夾以外。Markdown 和 HTML 檔案會被處理並放到 public 資料夾，而其他檔案會被拷貝過去。
  • themes
    主題 資料夾。Hexo 會根據主題來產生靜態檔案。
  • package.json
    Hexo 所需的套件資料
  • _config.yml
    設定專案的大部分配置，可以參考 Hexo 官網上的文件說明

選擇主題樣式


Hexo 剛下載下來已經有個預設的主題了，但是如果像我一樣覺得看不順眼，還可以到官網的主題頁面 挑一個喜翻的主題喔 😍

Butterfly

花了三天三夜仔細比較後，最後選擇了 Butterfly 這套主題，樣式看起來很棒也提供了許多自己寫文章所需要的功能，簡單記錄一下安裝步驟囉。

終端機切換到 Hexo 專案資料夾

1
cd ~/my-blog

安裝 Butterfly 主題樣式

1
npm i hexo-theme-butterfly

安裝 Butterfly 所需的套件

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

用 vs code 開啓 Hexo 的專案，開啓 _config.yml 檔，更改 theme 設定

1
theme: butterfly

在本機端啓動 Hexo 的伺服器，就可以看到套用了 Butterfly 主題樣式的網站囉！

1
hexo server

Butterfly 詳細設定，請參考 Butterfly 安裝文檔(一) 快速開始

Hexo 常用指令

這裏列出比較常用的指令，若想瞭解全部，請參考 Hexo 官方指令

初始化專案 / 建立專案資料夾

1
hexo init [資料夾名稱]

範例

1
hexo init my-blog

建立一篇新的文章，若標題包括空格，請用引號括起來

1
hexo new [layout] <文章標題>

範例

1
hexo new post "我的第一篇文章 By Hexo"

在本機端啓動伺服器，預設是 http://localhost:4000/

1
hexo server

指令新增第一篇文章

當我們執行以下的指令：

1
hexo new post "我的第一篇文章 By Hexo"

會發現在 source 的 _posts 的資料夾多了一個 我的第一篇文章-By-Hexo.md 的檔案。

1
2
3
4
source
└── _posts
    ├── hello-world.md
    └── 我的第一篇文章-By-Hexo.md

.md 副檔名代表爲 markdown 的檔案格式
關於更多的 Markdown 使用方法請參考 https://markdown.tw/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
title: 我的第一篇文章 By Hexo
date: 2021-03-07 17:15:57
tags:
---

# 我的第一篇文章的標題
hihihi ~ 你好～ 😍 我是第一篇文章的內容～
在這裏可以用 `Markdown` 語法撰寫喔～

```js
console.log('Hello World!');
```

由上下兩個 --- 包夾的區塊爲 Front-matter，用來敘述文章的屬性。例如 title(標題)、date(建立日期)、tags(標籤)等等。更多可以參考官網的 Front-matter，而在 Butterfly 的主題也有定義自己的 Front-matter，有興趣的大大可以參考喔。

我的第一篇文章 By Hexo 在網站上呈現的結果

等等！如果我想要在文章上加上圖片呢 ？

部署 Deploy 設定

當文章的撰寫告一個段落，就可以發佈到網路上囉！😍
Hexo 有很多種部署的做法，這邊挑選個人覺得最簡單容易的 Github 方法囉！

Github Page 準備事項

  • 申請 Github 帳號

    • 這邊就不再詳細解釋，請需要的大大參考這篇

  • 新增一個public 的 repository，並且命名爲 <github-username>.github.io
    例如：你的 github 使用者帳號爲 abc_xyz 那麼這個 repository 的名稱就會是 abc_xyz.github.io

  • 安裝部署外掛

    1
    npm install hexo-deployer-git --save

  • 複製 github Repository 的連結

  • _config.yml 設定爲以下調整，官網參考

    1
    2
    3
    4
    5
    6
    7
    # Deployment
    ## Docs: https://hexo.io/docs/one-command-deployment
    deploy:
      type: git
      repo: [email protected]:abc_xyz/abc_xyz.github.io.git # 貼上剛剛複製的 Github Repository 網址
      branch: master # 預設分支名稱
      message:

  • 執行以下指令將 Hexo 產生的網站內容上傳到 Github 🚀

    1
    hexo clean && hexo deploy

  • 重新整理 Github 的 abc_xyz.github.io Repository，確認是否上傳內容成功

  • 點選 Repository 的 Setting

  • 在 Github Pages 的選單下，切換 Source 到 master 並且 save

  • 用瀏覽器在網址輸入上述的網址，就可以看到 Hexo 的網站順利地架在 Github 的 Page 上囉 😍

其實上述步驟已經足夠讓自己的 Blog 免費地架在網路上了 😆，美中不足的就只是網址就會是呈現 <github_username>.github.io 的格式。

如果你跟我一樣願意花一點點 💰 去買個自己的網域名稱，那就繼續看下去囉 😍

自訂 Domain 網域

因爲這個階段關係到需要付款的步驟，以下的教學步驟僅供參考，請需要自己審慎地考慮清楚在行動喔！😀

GoDaddy 購買網域

買網域的管道有很多，只是剛好我是在 GoDaddy 上面購買的。

挑一個自己喜歡的網域名稱，這個名字就會是之後這個 Blog 的網址囉

GoDaddy 的購買網址請依照個人的需求填寫，這邊只是隨便亂打的網域，請勿跟著照打喔 😵

GoDaddy 設定 Github 的 IP 轉向設定

我們購買了自己的網域之後，之後只要任何人在網址上輸入我們購買的網域，這邊以 chan-chan-dev.com 爲例，請求訊息就會打到 GoDaddy 這邊來。

因爲我們的 Blog 是放在 Github 的網址上，所以我們需要做些設定，讓 GoDaddy 知道要把這個請求轉送到 Github 那邊去，我們來看看怎麼操作吧。

從 我的產品 的頁面找到剛剛買的網域，這邊以 chan-chan-dev.com 爲例

選擇 DNS > 管理區域

輸入購買的網域後，點擊 搜尋

點選 新增

因爲 Github 的網址 IP 有四組，所以要新增四組指向爲以下內容的記錄（一次新增一組）：

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

完成結果

GoDaddy 的設定這邊就差不多告一段落囉，接下來我們要處理 Github 那邊的設定囉 😆

Github Repo 設定 CNAME 到買的網域

到 Github Repository Setting > GitHub Pages 的區塊，填寫剛剛所購買的網域，並且點擊 Save

在 Github Repository 會新增一個叫做 CNAME 的檔案

如果順利的話，也許過一段時間就可以用自己購買的網域看看是否有成功地看到 Hexo 的 Blog 網站囉 😍

DNS 設定的時間不等，最常也許需要等候 24 小時，所以無法馬上看到畫面是正常的

Enforce HTTPS

如果已經成功看到自己的網站，以許可以開啓 Https 的設定，使自己的網站更安全一些喔～

呼，其實還有一些部分沒有 Cover 到，例如在 Hexo 設定 GA 或 Sitemap 的功能，不過也許一開始設定的想要簡單地撰寫部落格 的目標已經達到囉。

後記更新

chan-chan-dev.com 在經過幾個月之後有所升級調整囉！

相關的後續調整記錄在《ChanChanDev 升級記錄！一起用 Github Actions 潮一下吧！》囉！

最後也感謝你的收看啦 😍

FAQ

要怎麼在在文章上放圖片呢 ？

  • 在 _config.yml 調整 post_asset_folder 設定爲 true
1
post_asset_folder: true

新增一篇文章，這裏以文章名稱爲 abc 爲例：

1
hexo new post abc

在 hexo new post abc Hexo 也會自動新增一個跟文章名稱一樣的 abc 資料夾，裏面可以放置自己想要貼在 abc 這篇文章的圖檔。

1
2
3
4
5
6
source
└── _posts
    ├── abc  #abc資料夾
    ├── abc.md  #abc文章
    ├── hello-world.md
    └── 我的第一篇文章-By-Hexo.md

假如我們有一張檔名叫做 rat.png 的圖，並且放在 abc 資料夾中

我們就可以在 abc.md 直接使用他囉

1
2
3
4
5
6
7
8
---
title: abc
date: 2021-03-07 17:46:52
tags:
---
# 我的老鼠塗鴉 😍
![老鼠好可愛](https://chanchandev.s3.ap-northeast-2.amazonaws.com/blogs/hexo-introduction/rat.png)