【Astro】以 Astro 框架搭配 Fuwari 主題建立部落格

　　由於種種因素，決定把這個部落格從 Hexo 框架搭配 Keep 主題、轉移到這次的 Astro 框架搭配 Fuwari 主題。　　抉擇的理由之後再另外寫文來聊，本篇先記錄做的過程。

重要資源#

Fuwari GitHub
- 簡中 README，包含基礎使用教學
Astro 官網
- 官方文件
- 雖然不是必須，不過多讀一些可以瞭解很多細節與原理

建立部落格的基礎流程#

初始化 Fuwari#

確保已安裝 Node.js 與想使用的套件管理器（內建的 npm，或是 pnpm 等等）
建立專案（取得檔案）：有兩種做法
1. npm create fuwari@latest
2. 在 GitHub 上建立 repo、再 git clone 到本機
  1. fork
  2. 透過模板建立
安裝依賴： pnpm install
試著跑跑看：pnpm dev

改為自己的部落格#

修改 src/config.ts
- siteConfig：網站
  - title：網站標題
  - subtitle：網站副標題
  - lang：網站語言
  - 要注意分隔符是 _，繁中是 zh_TW 而不是 zh-TW
  - themeColor：主題色相
  - hue：主題色相
    - 0 ~ 360 之間的數字
  - fixed：是否開放讓讀者更改自己看到的主題色相
    - true 為不開放更改
  - banner：橫幅
  - enable：是否顯示橫幅
  - src：橫幅圖片路徑
    - 若以 / 開頭，是相對於 /public 資料夾的相對路徑；
      反之，是相對於 /src 資料夾的相對路徑
  - position：CSS 的 object-position
  - credit：橫幅圖片來源，位於橫幅右下角
    - enable：是否顯示橫幅圖片來源
    - text：橫幅圖片來源的顯示文字
    - url：橫幅圖片來源的連結路徑
    - 空字串代表不設連結
  - toc：Table of Content
  - 在文章頁，螢幕寬度要大於 1536px，捲動到上方橫幅消失後、會顯示於右方
  - enable：是否顯示 Table of Content
  - depth：Table of Content 最多要分幾層
  - favicon：網站圖標
  - 是個 list、裡面可以放多個 object，可根據亮色或暗色模式切換不同圖標
  - src：圖標路徑
    - 圖檔要放在 /public 資料夾下
    - 這個路徑以 / 開頭，指向 /public 資料夾裡的圖檔
  - theme：light 或 dark，分別對應亮色或暗色模式
- navBarConfig：上方導覽列
  - links：連結按鈕
  - 是個 list，裡面的物件按照順序會由左到右排列
  - 有三個預設連結按鈕可用：
    - LinkPreset.Home：首頁
    - LinkPreset.Archive：彙整
    - LinkPreset.About：關於
  - 連結按鈕物件
    - name：顯示文字
    - url：連結路徑
    - external：是否要顯示外部連結符號、並在新分頁開啟
- profileConfig：作者資訊，顯示於左方
  - avatar：頭貼圖片路徑，路徑規則與橫幅相同
  - name：作者名稱
  - bio：簡短自我介紹
  - links：連結按鈕
  - 是個 list，裡面的物件按照順序會由左到右排列
  - 連結按鈕物件
    - name：顯示文字
    - icon：圖標代號
    - 可在 Icônes 網站上找想用的圖標、在這裡輸入代號
    - 除了 fa6-brands 以外的 icon set，要另外用 pnpm 安裝
    - url：連結路徑
- licenseConfig：License，顯示於文章頁最底下
  - enable：是否顯示 License
  - name：License 的名稱
  - url：License 的連結
編輯自己的「關於」頁面：在 src/content/spec/about.md
用 Markdown 建立自己的文章
1. pnpm new-post <filename>：會在 src/content/posts 路徑下建立一個新的文章 markdown 檔案，帶有預設的 Frontmatter
  - 也可以自己改為一個資料夾、底下放個 index.md，最終的網址會是一樣的；資料夾裡可以放這篇文章用的圖片等其他檔案資源
2. 填寫 Frontmatter
  - 在 markdown 檔的頂端，以一對 --- 包住
  - title：文章標題；string、必填
  - published：發表日期；date、必填
  - updated：更新日期；date、選填
  - draft：是否為草稿；boolean、預設為 false
  - true 代表這篇文章不要顯示在網站上
  - description：文章摘要；string、選填
  - 會成為 head 裡的「meta description」、「meta og」、「meta twitter」
    - 若未填，預設為 title
  - 也會成為首頁顯示的文章預覽
    - 若未填，預設為文章裡的第一行
  - image：文章主圖；string（相對於此 markdown 檔的路徑）、預設為無
  - tags：標籤；string 陣列、預設為空陣列（無標籤）
  - 這裡陣列裡的字串不用引號包住，只要不同字串之間以逗號（,）分隔即可
  - category：類別；string()、預設為無分類
  - lang：語言；string、預設為與網站相同的語言（/src/config.ts 裡設定的網站語言）
3. 編輯文章內容……
測試看看：pnpm dev：啟動開發伺服器，可以一邊寫文章、一邊即時預覽

準備佈署與佈署#

pnpm build：建構靜態網站檔案到 /dist 資料夾裡
pnpm preview：啟動預覽伺服器，內容是 /dist 資料夾裡建構後的靜態網站檔案，檢查一下成品
根據要佈署的平台，找對應的 Astro 官方文件
- 超多平台都有文件、基本上不用擔心找不到教學
- 其中，繁體中文的 Cloudflare 佈署文件有點過時了、只有 Pages 而沒有 Workers，
  現在 Cloudflare 官方推薦靜態網站也同樣佈署到 Workers、統一管理，
  可參考英文原文的佈署文件。
照著做完後，就可以到網路上看到成果了～

我自己的額外修改#

由於自己根本不懂 😅，所以暫時把 RSS 和 Sitemap 功能取消
- 在 src/components/Footer.astro 把這兩個功能按鈕從 footer 移除
- 在 src/layouts/Layout.astro 有個 RSS 相關的 link 元素，雖然不清楚它如何作用、但也先把它註解掉了
把文章內容 markdown 資料夾拆分到另一個 repo
- 事實上 Astro 不像 Hexo 有「主題」（Theme）的功能、主題檔案有獨立的 theme 資料夾存放，
  Astro 所有檔案都在 src 底下、文章內容 markdown 檔則在底下某個資料夾裡（以 Fuwari 主題而言，在 src/content/posts/ 底下），
  混在同一個母資料夾下、無法直接分開管理……
- Astro 已支援使用 Symbolic Link，於是參考了網頁東東的教學分享「整合不同 Git 倉庫在一起（Symbolic Link、Git Submodule）」、把 src/content/posts/ 資料夾改為 Symbolic Link 連結到專案外部的另一個資料夾。
  - 然而，src/content/spec/ 底下的 about.md 卻無法如法炮製 🤔
    還沒有能力去研究 Fuwari 的原始碼、找出問題點，只好先擺在原位了……
佈署到 Cloudflare Worker
- 之前為了網域註冊了 Cloudflare 帳號，這次就順勢用了他們這個免費的靜態網站佈署服務、一條龍綁到我的網域上了，耶～
  之後再來寫一篇關於這部分的文章。

重要資源#

建立部落格的基礎流程#

初始化 Fuwari#

改為自己的部落格#

準備佈署與佈署#

我自己的額外修改#

參考資料#