/tags/cloudflare/ Recent content in Cloudflare on Wayne X.Y. Blog Hugo zh-TW Sun, 01 Feb 2026 00:00:00 +0000 /zh/2026/02/01/setup-hugo-blog/ Sun, 01 Feb 2026 00:00:00 +0000 /zh/2026/02/01/setup-hugo-blog/ <h1 id="使用-hugo--cloudflare-pages-打造個人自動化部落格">使用 Hugo + Cloudflare Pages 打造個人自動化部落格</h1> <p>想要建立一個速度極快、且每次寫完文章只要 <code>git push</code> 就能自動更新的網站嗎？這篇文章將帶你利用 <strong>Hugo</strong> 靜態網站產生器，搭配 <strong>Cloudflare Pages</strong> 的自動化部署服務，建構個人部落格。</p> <hr> <h2 id="-為什麼選擇這個組合">🛠 為什麼選擇這個組合？</h2> <p>原本使用 github page 進行架設，但由於 repo 必須公開，因此決定改用 cloudflare pages 連接 github repo，設定上也比想像中簡單，並且在 每次<code>git push</code> 後會自動執行 gtihub actions 以及更新網站，確保網頁運作正常。</p> <hr> <h2 id="第一步在本地端架設-hugo-站點">第一步：在本地端架設 Hugo 站點</h2> <p>首先，我們要在你的電腦上建立網站的雛型，並挑選一個主題。</p> <h3 id="1-安裝-hugo">1. 安裝 Hugo</h3> <p>請根據你的作業系統執行安裝指令：</p> <ul> <li><strong>macOS (Homebrew):</strong> <code>brew install hugo</code></li> <li><strong>Windows (PowerShell):</strong> <code>winget install Hugo.Hugo.Extended</code></li> <li><strong>驗證安裝:</strong> 開啟終端機輸入 <code>hugo version</code>，確認看到版本號。</li> </ul> <h3 id="2-建立新專案">2. 建立新專案</h3> <p>開啟終端機，輸入以下指令建立網站資料夾：</p> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#282a36;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new site my-blog </span></span><span style="display:flex;"><span><span style="color:#8be9fd;font-style:italic">cd</span> my-blog </span></span></code></pre></div><h3 id="3-加入網站主題-theme">3. 加入網站主題 (Theme)</h3> <p>前往 <a href="https://themes.gohugo.io/">Hugo Themes</a> 挑選主題。這裡以本站使用的 <a href="https://github.com/zhaohuabing/hugo-theme-cleanwhite">Clean White</a> 為例：</p>