從Hexo遷移至VitePress

過去一年多因為論文和工作的緣故，不僅部落格停更，搬遷部落格的想法也無限推遲。

遷移計畫

用Hexo寫了第一個部落格至今已經第五年了，以markdown寫部落格真的很方便，想遷移也不會被框架綁住。於是我開始搜索其他的靜態網站生成器，基於前端主要使用Vue，且我也沒打算做出多麼花俏的部落格，最後我在Nuxt.js和VitePress之間選擇了VitePress，接著花了點時間研究官方文件以及部落格的實作，例如Vue Official Blog。我的搬遷計畫是 :

自定義主題
註冊專屬網域
租用虛擬機器

VitePress主題開發

因為VitePress原始設計主要針對文件，若要做為部落格使用，有些問題必須解決 :

頁面佈局 : 首頁(文章分頁)、文章時間軸、分類標籤等部落格常用頁面，有不少使用者直接使用預設佈局，寫寫筆記倒是還堪用，部落格的話我覺得不大適合，幸好VitePress的Layout Slots給頁面佈局保留了彈性，樣式就交給Tailwind CSS處理。
數據預處理 : 讀取全部文章、整理出各頁面元件所需的資訊。VitePress在1.0.0-alpha.53版本新增了createContentLoader helper，透過它處理source directory下的.md就能取得文章資訊，這部分參考了Vue Official Blog的實作(posts.data.ts)。
跨頁面狀態管理 : 例如目前分頁、所選分類或標籤等狀態，雖說有現成的Pinia可以用，對於簡單的部落格我就用reactive API實作一個小小的store來用了。
文章列表分頁 : 我看了某些實作是直接生成.md，幾個分頁就生成幾個檔案......這部分我是動態切換的，而為了解決歷史紀錄的問題，在分頁切換時會調用History API。
留言系統 : 我使用了utterances，在light / dark mode的同步切換耗了些時間。
數學公式 : 我是在1.0.0-beta.7的時候開始本計畫的，MathJax的支援要到1.0.0-rc.14才有，所以一開始我嘗試使用Katex，因為不懂markdown-it plugin而耗費不少時間想讓文章可以獨立控制是否啟用......就像Hexo那樣。後來官方支援MathJax我就不想搞了，直接用吧，但樣式有針對行動裝置瀏覽做調整。

雖然用框架但我感受到了寫個部落格也很不容易這件事，檔案結構如下 :

shell

|   about.md
|   archives.md
|   category.md
|   index.md
|   package.json
|   pnpm-lock.yaml
|   postcss.config.js
|   tags.md
|   tailwind.config.js
|
+---.vitepress
|   |   config.ts
|   |
|   \---theme
|       |   config.ts
|       |   index.ts
|       |   posts.data.ts
|       |   store.ts
|       |   style.css
|       |   ThemeLayout.vue
|       |   utils.ts
|       |
|       \---components
|
+---posts
|
\---public

GitHub連結 : laplacetw/vitepress-theme-trigger

購買網域

在GoDaddy買了現在的網域，我想把根網域直接指向部落格而非子網域，但GoDaddy不支援ANAME/ALIAS 🙄，只好把網域託管到AWS Route53了。

相關設定如下：

建立託管區域後把DNS紀錄中類型NS的值(4個網址)，替換掉GoDaddy預設的域名服務器
新增ANAME將根網域指向自己的部落格 (AWS Amplify指向cloudfront)
新增CNAME將www子網域指向根網域 (可選)

部署到AWS Amplify

在部署時遇到一個錯誤 :

shell

Error Message : glibc_2.27 not found (required by node)

此錯誤是因為AWS Amplify所使用的Amazon Linux 2的glibc版本低於2.27所導致，不過官方已經提出解決方案了，在建置腳本直接透過NVM指定node 18即可。

yml

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install -g pnpm
        - pnpm install --no-frozen-lockfile
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: ./.vitepress/dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

遷移後的舊站

舊部落格是Hexo搭配GitHub page的經典套餐(?)，無奈設定不了轉址，只能從Hexo靜態檔案下手：

html

<!-- themes/next/layout/_partials/head/head.swig -->
{% if is_post() %}
<link rel="canonical" href="https://laplace.tw/posts/{{ page.path.replace('/', '') }}">
<meta name="redirect" http-equiv="refresh" content="3;url=https://laplace.tw/posts/{{ page.path.replace('/', '') }}"/>
{% else %}
<link rel="canonical" href="https://laplace.tw">
<meta name="redirect" http-equiv="refresh" content="3;url=https://laplace.tw"/>
{% endif %}

雖然不懂swig模板語言，不過在local server測試可行，文章能夠順利跳轉到對應的新頁面，其他頁面則一律跳轉至新首頁。但網路上的說書人有句話是這麼說的 : 「不出意外的話，就要出意外了」，推上去GitHub之後並沒有順利的跳轉......仔細研究了一下發現是局部快取(Fragment Caching)功能在搞事，參考Hexo官方文件把head的快取關掉即可解決 :

html

<!-- themes/next/layout/_layout.swig -->
{{ partial('_partials/head/head.swig', {}, {cache: false}) }}

以上為部落格搬遷紀錄。

遷移計畫 ​

VitePress主題開發 ​

購買網域 ​

部署到AWS Amplify ​

遷移後的舊站 ​

遷移計畫

VitePress主題開發

購買網域

部署到AWS Amplify

遷移後的舊站