https://blog.jin-hao.tw/tags/static-site/Recent content in Static-Site on jin-haoHugozh-twMon, 13 Jul 2026 10:00:00 +0800https://blog.jin-hao.tw/posts/how-this-site-is-built/Mon, 13 Jul 2026 10:00:00 +0800https://blog.jin-hao.tw/posts/how-this-site-is-built/<p>這是本站的第一篇文章。第一篇不寫別的,先交代這個網站本身是怎麼來的——因為對我來說,<strong>選型的過程比選型的結果更能說明一個人怎麼思考</strong>。</p> <p>我的日常工作是資安顧問。這代表一件事:這個網站不只是我的發布平台,它本身就是我專業的一部分展示品。一個資安從業者的網站如果被掛馬、被植入惡意腳本,那不是運維事故,是聲譽事故。所以整個選型只從一個問題出發:</p> <blockquote> <p>我能不能讓這個網站,<strong>沒有東西可以被攻擊</strong>?</p> </blockquote> <h2 id="從攻擊面開始想而不是從功能開始想"> 從攻擊面開始想,而不是從功能開始想 <a class="heading-link" href="#%e5%be%9e%e6%94%bb%e6%93%8a%e9%9d%a2%e9%96%8b%e5%a7%8b%e6%83%b3%e8%80%8c%e4%b8%8d%e6%98%af%e5%be%9e%e5%8a%9f%e8%83%bd%e9%96%8b%e5%a7%8b%e6%83%b3"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>大多數人架部落格的思考順序是:我要什麼功能(留言、後台、外掛)→ 選一個滿足功能的系統 → 再想辦法把它加固。</p> <p>我把順序倒過來:先問這個網站<strong>必須</strong>有什麼,其他一律不要。</p> <p>答案很短——它必須能被讀、能被搜尋引擎索引、能訂閱。就這樣。它不需要後台(我在自己的電腦上寫作)、不需要資料庫(文章就是檔案)、不需要任何伺服器端的執行環境(沒有動態內容)。</p> <p>把這個需求清單攤開,結論自己浮出來:<strong>純靜態網站</strong>。</p> <table> <thead> <tr> <th>面向</th> <th>動態系統(如 WordPress)</th> <th>純靜態(本站)</th> </tr> </thead> <tbody> <tr> <td>伺服器端執行環境</td> <td>PHP + 資料庫</td> <td>無</td> </tr> <tr> <td>後台登入頁</td> <td>有(永遠在被掃)</td> <td>不存在</td> </tr> <tr> <td>外掛供應鏈風險</td> <td>有,且是主要破口</td> <td>無</td> </tr> <tr> <td>需要持續修補的元件</td> <td>CMS 核心、外掛、主題、PHP、DB</td> <td>幾乎只剩 web server 本身</td> </tr> <tr> <td>被入侵後能改什麼</td> <td>資料庫、程式碼、掛馬</td> <td>沒有可持久化的執行點</td> </tr> </tbody> </table> <p>沒有後台,就沒有暴力破解;沒有資料庫,就沒有注入;沒有伺服器端程式,就沒有 RCE。這不是「加固到很難打」,是<strong>結構上沒有東西可打</strong>。剩下的攻擊面收斂到 web server 與基礎設施層,而那是一個小得多、也成熟得多的問題。</p> <h2 id="技術組合"> 技術組合 <a class="heading-link" href="#%e6%8a%80%e8%a1%93%e7%b5%84%e5%90%88"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>本站目前的組合如下——刻意只描述到「選了什麼」的層次,部署細節不在公開範圍(這也是一種攻擊面管理):</p> <ul> <li><strong>產生器:<a href="https://gohugo.io/" class="external-link" target="_blank" rel="noopener">Hugo</a></strong> — 單一執行檔、build 速度極快、對 Markdown 原生友善</li> <li><strong>主題:<a href="https://github.com/luizdepra/hugo-coder" class="external-link" target="_blank" rel="noopener">hugo-coder</a></strong> — 極簡、為技術寫作而生,不用跟版面纏鬥</li> <li><strong>寫作格式:Markdown</strong> — 文章就是版本控制裡的一個 <code>.md</code> 檔</li> <li><strong>版本控制:git</strong> — 整個網站是一個 repo,source of truth 不在伺服器上</li> <li><strong>前端防護:CDN 反向代理</strong> — 源站不直接面對網際網路</li> <li><strong>主機:自管伺服器</strong> — 產出的靜態檔案由自己的基礎設施提供服務</li> </ul> <h2 id="為什麼是-hugo"> 為什麼是 Hugo <a class="heading-link" href="#%e7%82%ba%e4%bb%80%e9%ba%bc%e6%98%af-hugo"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <p>靜態產生器選項很多,我最後選 Hugo 的理由很務實:</p>