已經到了本系列文的最後一篇了，然而要從頭開始刻出一個部落格，實在有太多瑣碎的功能可以完善，在這 30 篇文章中實在很難全部講完。

最後一講，讓我們來梳理一下前面所談過的內容，以及有哪些遺珠之憾、還沒討論過的功能吧！

平台、框架選擇與比較

首先是選擇一個平台或框架的問題，合適的框架讓你事倍功半，所以我們花了點時間比較了開放、封閉、動態、靜態平台，最後挑出 SSG 的方向，並且選擇 Astro 這個框架繼續探索；也做了部署平台的比較，以及域名的註冊商該怎麼選。

• 部落格類型：該選開放還是封閉、動態還是靜態？
• 挑選部落格的要素（一）：衡量網站效能，CWV、 Lighthouse 及 TTFB
• 挑選部落格的要素（二）：建置效率及上手門檻，各大平台要素評比
• 靜態網站（SSG）演化簡史、框架大比拼：Jekyll、Hugo、Astro
• 部署（一）：部落格架在何處？建置和部署服務的選擇
• 部署（二）：域名 Domain Name 該怎麼選？

需求、設計篇

在實際上手寫 Code 之前，有份需求書在手邊是蠻重要的，最初不需要詳盡，但可以在開發的過程中持續迭代；有了需求之後，我們可以從版型的設計開始，到怎麼建立一個設計系統、模組化常用的元件。

• 設計（一）：需求、驗收標準，手刻部落格的 PRD
• 設計（二）：部落格切版，淺談內容網站常見版型
• 設計（三）：RWD，Fluid Grid + Media Query，如何用斷點設計頁面佈局
• 設計（四）：設計系統，簡化網站的色彩和字級
• 設計（五）：建構會重複使用的元件

實戰篇

在動手實戰上，我們介紹了 Astro 的島嶼架構，並且針對部落格文章的細節實作深入探討，包含顯示列表與其排序、分頁，還有路由、標籤、巢狀分頁，以及在文章內容的部分要怎麼插入 JavaScript、數學式。

• Astro（一）：輕又快的靜態網站產生器，淺談島嶼架構
• Astro（二）：初始化專案，理解 Astro Components 及 Layouts 基礎
• Astro（三）：用 MDX 寫文章，顯示程式碼、數學式，搭配 JavaScript 服用
• Astro（四）：淺談圖片，Baseline 及 Progressive JPEG 和 WebP、AVIF
• Astro（五）：如何製作文章列表？簡介 Content Collections
• Astro（六）：路由、文章列表的分頁及排序
• Astro（七）：巢狀分頁，如何製作標籤列表？
• Astro（八）：加入 Tailwind CSS，元件化的 CSS 利器

加分功能

最後是能讓部落格加分，顯得更專業的題目，包含針對文章顯示瀏覽量、透過 OGP 來加強分享到 FB、 Line 等平台的樣式，以及聊聊在純前端的搜尋是怎麼做到的。

• 瀏覽計數器（一）：靜態網站該怎麼記錄瀏覽量？第三方服務 vs 自架
• 瀏覽計數器（二）：計數策略，怎麼避免短時間內的重複瀏覽？
• 瀏覽計數器（三）：實作計數器，Astro 整合 API
• 網站能見度（一）：淺談 SEO 及 Open Graph
• 網站能見度（二）：實戰 SEO in Astro，Sitemap 及 robots.txt
• 網站能見度（三）：整合 OGP Meta 標籤
• 站內搜尋（一）：淺談搜尋原理，如何用關鍵字找到某篇文章？
• 站內搜尋（二）：何謂斷詞、記號化 Tokenization？
• 站內搜尋（三）：搜尋流程，MiniSearch + Jieba

遺珠之憾

族繁不及備載，一個部落格、一個網站，永遠都有進步的空間，第 30 篇文章，就來看看還有哪些可以做，但至今還沒有聊過遺珠之憾：

互動、訂閱功能

• 留言、評論 - 串接 Giscus（GitHub Discussions）、輕量級的 utterances 或 Disqus
• Facebook 按讚、分享 - 置入 Meta SDK 的 Like / Share Buttons
• RSS Feed + Email 訂閱通知 - 整合 @astrojs/rss 產生 RSS / Atom（用 XML 描述網站更新清單），並使用 MailChimp / AWS SES 等 Mailer 服務通知

文章內容

• 推薦功能 - 依相同標籤、相似程度、熱門程度在文章尾部推薦
• 文章 ToC（Table of Content） - 實作目錄及自動錨點，Highlight 正在閱讀的章節、回到頂部功能
• CMS（Content Management System）、Headless CMS - 若有後台寫文章的需求，可考慮使用 Decap CMS（前身是 Netlify CMS）、Contentful、Strapi 等等

穩定性、品質、量測功能

• 串接 Google Analytics - 使用 GA4（gtag.js），理解可分析之元素
• 事件及 UTM 追蹤 - 定義核心事件，例如：文章閱讀完畢、點擊目錄、分享；和 GA4 整合
• 404 頁面／Link Checker - 自訂 404.astro、使用 lychee 或 broken-link-checker 來檢查掃描連結
• 安全性 - 防止表單濫用，例如聯絡表單上加 reCAPTCHA

完賽心得

最初本來打算一邊重刻部落格，一邊收斂實作心得做成鐵人賽的系列文，但就算已經第四次參加 iT 鐵人賽、提前規劃，還是難以同時上線一個小型專案加上 30 天的文章。

不過，這畢竟是鐵人賽，每天都有個 Deadline 在前面吊著，還是能夠逼我產出一天一篇還算可以的文章。

就如同這個系列開篇時，我所引用費曼學習法中所描述的：

如果你不能用自己的話簡單解釋，就是還沒真正掌握。
— 理查．費曼

每次撰寫文章的過程都是一次知識的反芻，知道自己還有不夠了解的地方，而後查閱資料補上這段缺失，這也是我想刻出一個部落格分享文章的主要原因。

最後，分享至今（2025-09）仍手刻到一半的部落格：

*霍爾筆記，首頁截圖

最後的最後，也感謝看到這裡的各位讀者，望大家共勉之！