這個 Blog 是使用 Next.js 建立的技術網站。
下面簡單記錄目前的技術架構與使用到的工具。
為什麼選擇 Next.js
在建立這個 Blog 時，其實有很多選擇，例如 Astro、Hugo，或直接使用現成的 Blog 平台。
最後會選擇 Next.js，主要原因很簡單：
- 平常的開發主要使用 React
- Next.js 的 App Router 很適合做網站
- 可以自由設計整個網站的功能與 UI
自己做一個 Blog，也能順便把整個網站架構完整走過一遍。
技術架構
目前這個 Blog 的技術棧其實不複雜：
| 技術 | 用途 |
|---|---|
| Next.js (App Router) | 網站框架 |
| Tailwind CSS | 樣式 |
| MDX | 撰寫文章 |
| rehype-pretty-code | 程式碼語法高亮 |
| gray-matter | 解析文章 metadata |
| next-themes | 暗色 / 亮色模式 |
文章內容使用 .mdx 檔案管理，放在專案的 content/posts 目錄中。
目前沒有使用資料庫，而是直接從檔案系統讀取文章內容。
對於一個以技術文章為主的 Blog 來說，這樣的架構已經足夠，也能保持系統簡單。
如果未來需要更多動態功能，再考慮引入資料庫或 CMS。
目前功能
目前這個 Blog 已經有一些基本功能：
- MDX 技術文章系統
- 程式碼語法高亮
- 文章 TOC 目錄
- Tag 分類
- 全文搜尋
- 暗色 / 亮色模式
- RSS Feed
之後會再慢慢加入一些閱讀體驗相關的小功能。
開始
先建立一個 Next.js 專案：
npx create-next-app@latest my-blog啟動開發伺服器：
cd my-blog
npm run dev打開 http://localhost:3000，接下來就可以在這個專案上慢慢把 Blog 做出來。
接下來
這個頁面就是一切的起點。
從這裡開始，你可以一層一層把它拆掉，再照自己的想法組回來。加上 MDX 文章系統、打造側邊欄導覽、實作程式碼高亮、設計 TOC 目錄……每一個功能做完都能感覺到網站在自己手上長出來。
這個系列會記錄整個建置過程，包括踩過的坑和選擇背後的原因，希望對想自己做 Blog 的人有點參考價值。
從零打造一個屬於自己的技術角落，比想像中更有趣。