談談本 Blog 是怎麼誕生的

你們可能已經注意到這部落格的作者有兩位，沒錯這是個共筆部落格，用來記錄一些技術，主要是為了方便自己日後查閱，也希望能夠幫助到其他人。

網站緣由

其實我個人沒有寫 Blog 的習慣，某天我朋友（也就是另一位作者）提議要不要架一個一起寫，經過一番討論，決定使用 Hexo 框架。
Hexo 是靜態網站產生器，可以直接部署在靜態網站平台上。原本打算使用 GitHub Page，但是 GitHub Page 免費版有一些限制，最後選擇使用 Vercel 來架設。
另外 Hexo 有不少現成的主題，不用自己花時間設計。經過一系列挑選，最後發現 Hexo Theme Redefine 相對好看，就決定使用這個主題。

架設過程

建立專案架構

因為平時就有在開發，因此已經裝好 git 和 node.js 了，而且作業系統用的是 Archlinux，以下命令語法皆以 MacOS / Linux 為主。

安裝 Hexo CLI。
1
npm i -g hexo-cli
然後建立一個目錄，初始化專案。
1
hexo init jw_blog

先建立版本控制然後把所有東西 commit。

git init
git add -A
git commit -m "feat: initial commit"

這次剛好搭上 Yarn 4 更新，正好 Hexo 建立專案的時候直接用 yarn 來初始化了，直接著手升級他。
- Yarn 官方建議用 corepack 來處理套件管理程式，這邊假設你的 Node 版本是 16.10 以上了，直接啟用他。
  1
  corepack enable
- 然後把專案的 yarn 升級上來。
  1
  yarn set version stable
- 更新 Lock 檔案。
  1
  yarn
- 根據官方文件，將下列項目新增到 .gitignore （這次不使用 pnp 模式）。
  1
  2
  3
  4
  5
  6
  7
  8
  # Yarn 2
  .pnp.*
  .yarn/*
  !.yarn/patches
  !.yarn/plugins
  !.yarn/releases
  !.yarn/sdks
  !.yarn/versions
- 然後把所有變更 commit 起來。
  1
  2
  git add -A
  git commit -m "chore: upgrade yarn"
- 這次沒有修改 nodeLinker 選項，因為經實測會出現問題。
這時候可以先打開一次看看，正常的話應該會出現下面的頁面。
1
hexo server
剛建好時的頁面

主題的安裝

建立專案時使用的主題是 Landscape ，雖然不難看，但是我們還是想要換一個比較好看的。

Hexo 安裝主題的方式有兩種：

直接塞在 themes 目錄底下
大概像這樣：
直接塞在 themes 目錄底下

然而第一次裝的我，成功的失敗了。 （後來有修好，是因為缺套件和語法問題，但是最後沒有選擇這個主題，因為不太好看）
失敗的結果
安裝套件
這次選擇的主題和預設主題都是這樣安裝的。

安裝的方式要視主題而定，這次選擇的主題是 Hexo Theme Redefine 。

安裝套件。
1
yarn add hexo-theme-redefine
修改 _config.yml 將 theme 改成 redefine。
1
theme: redefine
在根目錄底下新增 _config.redefine.yml，並且將這個檔案的內容複製進去。
這時候再次啟動看看，應該會出現下面的頁面。
安裝主題後的頁面
這時候可以把原本的 landscape 主題移除了，因為用不到了。
1
2
yarn remove hexo-theme-landscape
rm _config.landscape.yml

然後把所有變更 commit 起來。

git add -A
git commit -m "feat: Update Hexo theme to Redefine"

接著就是根據自己的需求修改 _config.yml 和 _config.redefine.yml 了，這邊就不多說了，請直接參考 Hexo 的文件和 Redefine 的文件，並視需要安裝他需要的套件。

部屬

原本打算使用 GitHub Page 來部屬，但是 GitHub Page 免費版有一些限制，最後選擇使用 Vercel 來架設。

GitHub Page

由於 GitHub Page 沒有內建 Hexo 支援，需要透過 GitHub Action 來部屬，這邊參考 Hexo 官方文件將檔案建置到 gh-pages 分支上。

name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  pages:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v3
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
      - name: Use Node.js 20.x
        uses: actions/setup-node@v2
        with:
          node-version: '20'
          cache: 'yarn'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Use corepack
        run: corepack enable
      - name: Install Dependencies
        run: yarn install --immutable
      - name: Build
        run: yarn build
      - name: Deploy
        uses: crazy-max/[email protected]
        with:
          target_branch: gh-pages
          build_dir: public
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

同時需要在 GitHub 上面設定部屬的分支。

Vercel

部屬

這邊選擇 Vercel 來部屬，他有以下優勢：
- 可以整合 GitHub，每次 push 都會自動部屬
- 原生支援 Hexo
- 每個分支都能有自己的預覽版本
- 雖然免費有一些限制但對我們來說已經夠用了
首先到 Vercel 官網註冊帳號，直接用 GitHub 帳號登入即可，這樣可以順便整合 GitHub。
建立專案，找到你的專案，然後點選 Import。
Vercel 建立專案
建立專案時特別注意需要新增一個環境變數 ENABLE_EXPERIMENTAL_COREPACK 並設定成 1，因為本專案用的是 Corepack，目前還是實驗性功能。
Vercel 建立專案時新增環境變數
然後就可以開始部屬了，點選 Deploy。
部屬完成，進入 Dashboard 之後就會看到網址了，可以點擊網址或是點選 Visit 來看看。
Vercel 部屬完成
這邊需要到 Settings 的 Environment Variables 內新增另一個環境變數 VERCEL_FORCE_NO_BUILD_CACHE 並設定成 1 （建立時無法設定），因為 Vercel 會自動快取，目前不確定為何部屬的快取會破壞建置結果，因此先把他關掉。
Vercel 新增環境變數

自訂網域

要綁定自訂網域，進入設定的 Domains。
然後打上你要的網域，點選 Add。
Vercel 綁定自訂網域
接著到你的 DNS 服務商（以 Cloudflare 為例）那邊新增一筆 CNAME 記錄，指向 cname.vercel-dns.com。
Vercel 綁定自訂網域
等待 DNS 生效後，Vercel 會花一點時間建立 SSL 證書，之後就可以透過網域瀏覽網站了。

更新

一個網站的維護，隨時保持套件的最新版本很重要，可以避免一些安全威脅，也可以享受到新功能。
因為所有內容都是透過套件管理，這時就利用 yarn 內建的方便工具來更新。

yarn upgrade-interactive

透過方向鍵選擇要更新的套件，然後按下 Enter，就會開始更新了。

另外如果有更新到 hexo-theme-redefine 的話，記得要同步更新 _config.redefine.yml，因為有些設定可能會有變動。
更新方式可以參考官方文件。

關於多作者與範本

大多數 Hexo 網站都假設只有一位作者，但是這邊有兩位作者，正好這個主題有支援多作者，因此做了以下設定。
首頁的作者是設定成雙人，但是文章頁面的作者是單人，因為我們希望文章頁面的作者是寫文章的人，而不是網站的作者。
主題預設顯示的作者是網站作者，但好在主題有支援文章屬性，因此可以在文章的 header 上設定作者，就可以顯示文章作者了。

原本的範本是這樣的：

---
title: {{ title }}
tags:
---

為了設定作者，修改成這樣，同時修改預設文章標籤設定為空陣列：

---
title: {{ title }}
tags: []
author:
    name: 
    avatar: 
---

author.name：作者名稱
author.avatar：作者頭像，可以直接放 Gravatar 的網址

文章頁面的作者就是個別設定的了。

為了方便日後新增文章，修改了 scaffolds 目錄底下的 post.md 範本，透過 hexo new post 新增文章的時候就可以直接使用範本。

結語

這次的部落格架設過程中，雖然不是很難，難免遇到了不少問題，在解決問題的過程中也學到了不少東西，希望這篇文章能夠幫助到你。

JW Blog