【自架站系列】＃1 - 我為什麼（以及如何）決定自己架站？

為什麼我決定自己架站？

其實這個想法已經存在已久，但以前因為技術跟成本考量，一直沒有認真去實作這件事情，架設網站在傳統認知中，通常意味著需要具備一定的程式能力、伺服器管理、以及一筆不小的初期投資，這些都曾是我猶豫的點。

中間我也有試圖在各大知名 Blog 上發佈文章，但實際的觸及率與成效卻不如預期。

但今年 AI 協作徹底改變了一切，技術這項障礙直接消失，我不再需要從零開始學習前後端框架的細節，透過與 AI 的對話與指令，我能夠直接將腦海中的想法，轉變為真實的東西。

於是我終於騰出時間來，開始了充滿挑戰卻也充滿樂趣的自架站之旅。

alt text

踏上自架站之路，首要面對的便是實際的財務考量，我的目標一開始就非常明確：將年度總開銷控制在新台幣一千元以下。

這個數字在或許看來有些嚴苛，因為想像中架設一個網站、似乎需要高昂的主機費、域名費等開銷。

但經過我一番深入研究與比較，我發現這個目標其實是可以達成的，只要選擇合適的技術棧與服務供應商。

首先是購買網域，市場上一個 .com 域名的年費通常落在台幣 300 ～ 500 之間，還在我的預算內。

其次是網站主機的費用，但我發現可以透過免費 Hugo 靜態網站產生器、和 Cloudflare Pages 的免費託管，我直接將這筆費用降為零。

Hugo 能夠將 Markdown 格式的內容、快速轉換為輕量的靜態 HTML 檔案，讓這些檔案可以直接部署，還不需要有後端伺服器。

而 Cloudflare Pages 則提供了免費的 CDN（內容傳遞網路）服務，不僅能加速網站訪問速度，還能提供免費的 SSL 憑證，大幅提升網站的安全性與專業度。

這樣就完美地解決了主機費用問題，讓我的年度開銷幾乎只剩下網域名稱的費用，遠低於預期。

除了核心的域名與主機，我也有想到其他的潛在費用，像是留言系統、圖片儲存等。

又是一輪的市場研究下，我選擇了 Waline 留言系統、並搭配 Vercel 和 Neon 的免費方案，圖片儲存使用 Cloudflare Images 的免費額度，更進一步確保了整個網站生態系統的低成本運營。

其實個人創作者也能以極低的成本，建立起一個功能完善、效能優異的個人網站。

詳細教學文的部分會再找時間撰寫，其過程其實非常有趣。

選擇 Hugo 作為靜態網站產生器，除了主打超高速、安全且不需要後端資料庫外，它還提供了許多現成的網站主題，但我看了一輪並沒有看到心儀的選項，思考了一下，覺得既然都要從零開始搭建，乾脆連 CSS 都自己設定。

自己設計還有一個好處，在排版上我能夠自由調整字體、間距，隨時新增或刪除選單或設計，從零開始的自製過程雖然充滿了挑戰，但也帶來了極大的成就感。

在網站的風格上，我將網站的主體風格定調為「Sketch + Organic」，並給予 AI 我指定的色碼，此風格融合了手繪感線條與不規則造型。

同時網站中的部分區塊元素，也採用了不規則的造型，搭配手繪的虛線條，希望能呈現輕鬆、手作感的空間。

在色系選擇上，我選用了米杏色與深松綠作為網站的主色調。米杏色作為背景色，營造出溫暖、柔和的基調，不像純白色那樣刺眼、也不像灰色那樣沉悶。深松綠則作為點綴色與強調色，應用於連結、按鈕、標題等重要元素上。

一開始我是想用 Obsidian 作為主要的寫作環境，因為我已經習慣了它的使用方式，但後來發現若要部署整個 vault 會將其他私人筆記也一起推送，所以我又轉頭去尋找其他的寫作環境，將我的私人筆記與公開內容分開。

最後我選擇了 VS Code，並搭配 Front Matter 的擴充套件。VS Code 作為一個功能強大的程式碼編輯器，搭配 Front Matter 的組合，讓每篇文章都可以作為一個獨立的資料夾存在。

以下是 Obsidian 與 VS Code + Front Matter 在寫作工作流上的比較：

這次 AI 協作的主要夥伴是 Claude，它在整個過程中扮演了不可或缺的角色，但途中我們也踩了不少坑，甚至有一次直接把我當日 Token 直接耗光，這些坑不僅考驗了我的耐心，也讓我從中學習到了不少東西。

例如如何更精準的下指令、依照不同的需求去切換不同的語言模型、後期更將整個專案移到 Claude Code。

自架站是一條充滿未知、卻也充滿收穫的道路，目前寫作流程都已順暢接軌，期許自己往後能持續探索 AI 、並持續經營個人創作。