從零打造一個有質感的個人部落格：完整思路

10 月 17 日 · 約 4 分鐘閱讀 · 複製連結

為什麼要自己做部落格

社群平台很方便，但它們不屬於你。演算法會改，帳號可能被封，十年後你甚至找不到自己寫過的第一篇文章。部落格是少數真正由自己掌控的地方。

更重要的是，寫作本身是一種整理思路的方式。把一件事寫到別人看得懂，你才會發現自己哪裡其實沒想清楚。

動手之前，我先問了自己一個問題：這個網站是寫給誰的？答案很誠實，第一位讀者是三個月後的自己，第二位才是偶然路過的陌生人。

這個答案直接決定了很多事：不需要複雜的推薦系統，不需要訪客統計儀表板，但一定要能快速搜尋，也一定要在手機上讀得舒服。

我的原則是能少則少。靜態頁面加上少量原生 JavaScript，就能完成首頁、文章、搜尋和主題切換，沒有框架，沒有幾百 MB 的依賴，唯一的構建步驟是一個把 Markdown 編譯成網頁數據的小腳本。

好處是十年後打開仍然能跑。框架會過時，構建工具會換代，但 HTML、CSS 和 JavaScript 的向後相容性，是整個軟體世界裡最好的。

唯一的代價是缺少現成的後台。如果你每週都要發文，可以再接一條 Markdown 管線，但那是之後的事。

最後留下的只有這幾樣：

一個好讀的頁面，核心只有三件事：行寬、行高和留白。中文正文每行三十到四十個字最舒服，行高落在 1.8 到 2 之間，段落之間留一行的距離。

整個版心可以寬到 1160 像素，但文章的閱讀欄我只留 780 像素。這不是因為螢幕裝不下，而是因為再寬眼睛就要來回掃視，讀著讀著就累了。多出來的空間，留給右側的目錄。

首頁用一張大幅的精選卡加兩張小卡片，歸檔頁則回到簡潔的列表，按年份分組，讓整個版面像一本雜誌。

字體上，標題用襯線體，正文用無襯線體，形成清楚的層次。襯線體帶來書卷氣，無襯線體保證小字在螢幕上依然清晰。

配色不是固定的兩套主題，而是跟著訪客當地的時間走：清晨泛粉、正午淡青、黃昏橙紅、深夜靛藍，中間平滑過渡。每個時段只有一個強調色，也都不用純黑純白，避免刺眼。

動效是最容易做過頭的地方。我給自己定了一條規矩：動畫要幫助理解，而不是展示技術。標題從列表飛到詳情頁，是在告訴讀者「你點的就是這一篇」。

其他動畫都很短，大多在半秒以內，並且全部尊重系統的「減少動態效果」設定。有人不喜歡動，就應該能關掉。

點擊右上角的按鈕可以手動切換時段，那時會有一圈圓形擴散，是少數純粹為了好玩而保留的效果，只在使用者主動點擊時出現。

長文需要導航。目錄條會告訴讀者現在讀到哪裡、還剩多少，也讓人能隨時跳回感興趣的章節。

實作上，它直接讀取文章裡的二級標題，不需要額外維護。捲動時用高亮標記當前章節，再配一條隨進度生長的細線，讀者不用看頁尾也知道文章還有多長。

在平板和手機上，目錄收成右下角的浮動按鈕，外圈是閱讀進度，點開就是抽屜，避免佔用寶貴的橫向空間。

文章不應該被鎖在網站的代碼裡。我把每一篇都寫成獨立的 Markdown 文件，開頭用幾行元數據描述標題、日期和標籤：

好處很實在：任何編輯器都能寫，換網站框架時文章原封不動，用 Git 管理還能看到每一次修改的歷史。

靜態網站的部署幾乎沒有成本。把資料夾放到 Cloudflare Pages 這類託管服務上，就能得到全球加速的網址，還可以綁定自己的網域。

維護上，我只做兩件事：定期備份原始文章，以及每半年檢查一次連結是否失效。其餘時間，什麼都不用管。

做部落格最大的誘惑，是把九成時間花在網站上，只剩一成寫文章。我的建議是反過來：先把網站做到夠用就停手，然後認真寫第一篇。

版面可以慢慢調，字體可以慢慢換，但沒寫出來的文章永遠不會存在。願你的第一篇，比我的更早完成。

先寫，再完美。