前陣子開始用 RSS 來追蹤其他部落格之後，經常看到有人不停地在調整網站架構，並且樂在其中，害我手很癢一直想動手。

然後我又讀到了 Simon Willison 在這個討論串的留言：

I miss the days when "implement your own blogging engine" was one of the most popular learning projects for engineers.

We should bring that back! Its such a great way to play around with client- and server-side development options in an almost zero-risk environment.

我懷念「實作自己的部落格引擎」曾是工程師最熱門學習專案之一的那些日子。

我們應該把這個風潮帶回來！這是一個絕佳的方式，可以在幾乎零風險的環境中嘗試客戶端和伺服器端的各種開發選項。

我心想：「好啦，改啦，哪次不改？」

這次改版的目標：

  1. 為每篇文章建立「獨立頁面」：讓每篇文章都有自己的家。
  2. 新增「全部文章列表」：按照日期排序，方便尋找所有文章。
  3. 重做「RSS 生成器」：連結改連到文章頁面。
  4. 網站加入分頁功能：每頁顯示 10 篇文章。

總之，我決定自己做一個簡單的「靜態網站生成器」來搞定這些需求。

閱讀提醒：接下來的內容主要是記錄一下過程，可能會參雜一些術語。如果你對架網站沒興趣，可以考慮先跳過... 或是泡杯茶慢慢看 XD

前情提要

為什麼一開始沒做獨立頁面呢？

我的「貼文」很短，通常就一兩行而已，感覺沒必要做成單獨頁面。而且如果首頁和內頁都要顯示全文，就等於要維護兩份一模一樣的內容。

而且如果共用區塊有改動，所有文章檔案都要跟著改，這樣維護起來也不太實際。再加上要取英文 slug、要管理檔案命名、要按日期排序...

種種理由加起來，我的藉口就是：「一開始只想做最簡單的可行方案，不想搞得太複雜」。

短貼文
▲ 我的超短「貼文」

那麼...沒有做獨立頁面會有什麼問題？

最明顯的就是文章數量越來越多，首頁的長度真的會太長。我原本想用「年度分頁」來解決，但這樣一來 RSS 的文章連結就要每年換一次，不太合理。

而且沒有獨立頁面的話，要分享或引用單篇文章也很不方便，對讀者和搜尋引擎（SEO）都不太友善。

如果還是想手寫 HTML 的話怎麼辦？

最簡單的辦法就是建立一個文章列表，只顯示日期跟標題就好了，像是這樣：

  • 2025-01-01 - 今天晴空萬里
  • 2025-01-02 - 今天狂風暴雨
  • 2025-01-03 - 今天陰晴不定

正式開工

選擇程式語言

我這邊選擇用 PHP 來做。為什麼呢？

現在很多人都只把 PHP 當成後端語言，但大家好像都忘了它最基本的特點：「原生支援嵌入 HTML」，這超適合用來寫生成器吧？

文章頁面生成器

  1. 切分文章檔案（一次性）

    首先要把原本塞在 index.html 裡的所有文章切分出來，存成單獨的 HTML 檔案，這個是一次性的，用 Python 簡單解決。

    再來我希望檔案可以按日期排序，同時又想保留中文標題方便辨識。所以決定用 20250102-文章標題.html 這種格式，這樣既能夠排序、又方便辨識，反正檔名只是給我自己看的，不會直接影響網址。

    最後是每篇文章都要取英文 slug，這邊就藉助 LLM 幫忙生成，自己再挑選、審核、修改就好。

  2. 建立網站共用模板

    接下來要做 template.php，這個檔案會是所有頁面的骨架。它要能根據傳入的參數來動態產生不同的內容，例如：導覽列、內文之類的。

    基本上就是把網頁抓進來，把需要動態產生的部分挖空，填入簡單的變數判斷就完成了。

    這部分倒是蠻順利的，因為 PHP 本身就很適合做這種事。

    // 模板範例
<html>
    <body>
        <?= $content ?>
    </body>
</html>
  3. 文章物件化

    這個算是額外做的，就只是比較有架構而已，功能包括：

    • 讀取文章檔案。
    • 解析出標題、日期、slug、內容等資訊。
    • 輸出格式化的內容。
  4. 批次產生頁面

    有了文章物件之後，接下來就是寫一個流程來：

    • 掃描所有文章檔案。
    • 轉換成文章物件、按照日期排序。
    • 套用模板來產生對應的資料夾和 HTML 檔案。
    • 大功告成！

其他生成器

  • 文章列表生成器
    • 用來顯示所有文章的日期、標題、連結，就是前面有提到的「文章列表」。
  • 文章分頁生成器
    • 每頁顯示 10 篇文章，產生首頁與分頁等頁面。
    • 這裡我參考其它部落格的架構，頁面路徑如下：
      • /index.html ← 首頁
      • /page/2/index.html ← 第二頁
      • /page/3/index.html ← 第三頁
      • ...
    • 按鈕的部分簡化為只有「上一頁」、「下一頁」就好。
    • 擴充模板檔案，透過參數來顯示換頁按鈕。
  • RSS Feed 生成器
    • 擴充文章物件來取得 RSS 需要用到的參數、處理網址等等功能。
    • 製作 RSS 模板來讀取參數。
  • sitemap 生成器

    還沒做...反正只是給機器人看的，之後再補個 sitemap 模板去套用就可以了。

結語

自己造輪子還挺有趣的，要不是有這個部落格，我還真沒機會搞些有的沒的，不錯不錯。

最後，推薦大家直接使用 Hugo 就好了（？）

也可以嘗試看看我推薦的 熊部落格。（天啊，我終於可以連結到自己的文章了！）