談談本 Blog 是怎麼誕生的

談談本 Blog 是怎麼誕生的

jimchen5209

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

網站緣由

其實我個人沒有寫 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。

    1
    2
    3
    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 目錄底下
    直接塞在 themes 目錄底下

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

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

  • 安裝套件。
    1
    yarn add hexo-theme-redefine
  • 修改 _config.ymltheme 改成 redefine
    1
    theme: redefine
  • 在根目錄底下新增 _config.redefine.yml,並且將 這個檔案 的內容複製進去。
  • 這時候再次啟動看看,應該會出現下面的頁面。
    安裝主題後的頁面
    安裝主題後的頁面
  • 這時候可以把原本的 landscape 主題移除了,因為用不到了。
    1
    2
    yarn remove hexo-theme-landscape
    rm _config.landscape.yml
  • 然後把所有變更 commit 起來。
    1
    2
    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 分支上。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    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 建立專案
    Vercel 建立專案
  • 建立專案時特別注意需要新增一個環境變數 ENABLE_EXPERIMENTAL_COREPACK 並設定成 1,因為本專案用的是 Corepack,目前還是實驗性功能。
    Vercel 建立專案時新增環境變數
    Vercel 建立專案時新增環境變數
  • 然後就可以開始部屬了,點選 Deploy
  • 部屬完成,進入 Dashboard 之後就會看到網址了,可以點擊網址或是點選 Visit 來看看。
    Vercel 部屬完成
    Vercel 部屬完成
  • 這邊需要到 SettingsEnvironment Variables 內新增另一個環境變數 VERCEL_FORCE_NO_BUILD_CACHE 並設定成 1 (建立時無法設定),因為 Vercel 會自動快取,目前不確定為何部屬的快取會破壞建置結果,因此先把他關掉。
    Vercel 新增環境變數
    Vercel 新增環境變數
自訂網域
  • 要綁定自訂網域,進入設定的 Domains
  • 然後打上你要的網域,點選 Add
    Vercel 綁定自訂網域
    Vercel 綁定自訂網域
  • 接著到你的 DNS 服務商(以 Cloudflare 為例)那邊新增一筆 CNAME 記錄,指向 cname.vercel-dns.com
    Vercel 綁定自訂網域
    Vercel 綁定自訂網域
  • 等待 DNS 生效後,Vercel 會花一點時間建立 SSL 證書,之後就可以透過網域瀏覽網站了。

更新

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

1
yarn upgrade-interactive

yarn upgrade-interactive
yarn upgrade-interactive

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

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

關於多作者與範本

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

原本的範本是這樣的:

1
2
3
4
---
title: {{ title }}
tags:
---

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

1
2
3
4
5
6
7
---
title: {{ title }}
tags: []
author:
name:
avatar:
---
  • author.name:作者名稱
  • author.avatar:作者頭像,可以直接放 Gravatar 的網址

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

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

結語

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

  • Title: 談談本 Blog 是怎麼誕生的
  • Author: jimchen5209
  • Created at : 2023-12-11 12:18:50
  • Updated at : 2024-11-27 14:50:30
  • Link: https://blog.lce-lab.dev/2023/12/11/談談本-Blog-是怎麼誕生的/
  • License: This work is licensed under CC BY-NC-SA 4.0.