Astro 技術筆記站：首頁、分類、Tag、Archive 與搜尋

內容成功搬進 Astro 後，下一步才是把它整理成真正適合長期使用的技術筆記站。

這一階段主要處理首頁、分類、Tag、Archive、搜尋、RSS、Sitemap、404 與共用 Layout。

共用 Layout

不要讓每個頁面各寫一份 header、navigation 與 CSS。

建立：

src/layouts/BaseLayout.astro

負責網站標題、導覽、Canonical、Meta description、Open Graph、RSS link、Global CSS 與 Footer。

文章頁再使用 BlogPost.astro 包住共用 Layout。

首頁改成 Engineering Notes

技術筆記站可以更偏向高資訊密度：

站名
Engineering Notes & Lab

Topics
[Linux] [Network] [Cloud] [Automation]

Recent Notes
2026/09/15  ...
2026/09/10  ...

比傳統 WordPress 式文章牆更適合多年技術文章。

Category 與 Tag

frontmatter 保留分類與 slug：

categories:
  - "Linux"
categorySlugs:
  - "linux"
tags:
  - "SSH"
tagSlugs:
  - "ssh"

產生：

/category/linux/
/tag/ssh/

舊資料若有 encoded slug，產生 static route 時同樣需要 decode。

Archive

文章多之後，Archive 比單純翻頁更實用：

2026 (12)
2025 (18)
2024 (9)

再依日期列出文章。

Pagefind 全文搜尋

靜態網站可以直接使用 Pagefind：

astro build
npx pagefind --site dist

Build script 可以改成：

"build": "astro build && npx pagefind --site dist"

Pagefind 會把搜尋索引放進 dist/pagefind/。

如果不希望 navigation、footer 也被索引，可以在主要內容區加：

<main data-pagefind-body>

RSS 與 Sitemap

Astro 可搭配：

@astrojs/rss
@astrojs/sitemap

產生：

/rss.xml
/sitemap-index.xml

自訂 404

建立：

src/pages/404.astro

build 後會產生 dist/404.html。

若使用 Cloudflare Workers Static Assets，還要設定：

{
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

這樣未知網址仍然回 HTTP 404，但畫面使用網站自己的 Layout。

最後的網站結構

/
├── category/
├── tag/
├── archive/
├── search/
├── rss.xml
├── sitemap-index.xml
└── 各文章 permalink

這時 Astro 已經不只是 WordPress 的靜態備份，而是一個完整的技術筆記站。

Tags：Astro · Pagefind · SEO