johndoe

johndoe http://www.example.com/ Recent content on johndoe Hugo en Sun, 05 Apr 2026 10:00:00 +0800 Hugo + Cloudflare Pages 搭建个人博客全流程 http://www.example.com/posts/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E5%85%A8%E6%B5%81%E7%A8%8B/ Sun, 05 Apr 2026 10:00:00 +0800 http://www.example.com/posts/%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E5%85%A8%E6%B5%81%E7%A8%8B/ <h2 id="一前言"> 一、前言 <a class="heading-link" href="#%e4%b8%80%e5%89%8d%e8%a8%80"> <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 + Cloudflare Pages 搭建的个人博客，记录一下完整的搭建过程.</p> <h2 id="二环境准备"> 二、环境准备 <a class="heading-link" href="#%e4%ba%8c%e7%8e%af%e5%a2%83%e5%87%86%e5%a4%87"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <ol> <li>工具：</li> </ol> <ul> <li>Hugo：静态站点生成器（用于生成博客页面）</li> <li>Git：版本控制工具（用于代码托管）</li> <li>VS Code：代码编辑器（可选，用于编辑配置/文章）</li> <li>GitHub 账号：用于托管博客源码</li> <li>Cloudflare 账号：用于免费部署博客</li> </ul> <ol start="2"> <li>我的系统：Windows 11</li> </ol> <h2 id="三搭建步骤"> 三、搭建步骤 <a class="heading-link" href="#%e4%b8%89%e6%90%ad%e5%bb%ba%e6%ad%a5%e9%aa%a4"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h2> <h3 id="1-本地搭建静态页面"> 1. 本地搭建静态页面 <a class="heading-link" href="#1-%e6%9c%ac%e5%9c%b0%e6%90%ad%e5%bb%ba%e9%9d%99%e6%80%81%e9%a1%b5%e9%9d%a2"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h3> <ol> <li>安装 hugo（winget install Hugo.Hugo.Extended）</li> <li>创建 hugo 项目</li> <li>从hugo网站中复制主题 <a href="https://gohugo.io/" class="external-link" target="_blank" rel="noopener">https://gohugo.io/</a> –> themes –> Coder –> Download –> code –> Clone using the web URL.</li> <li>配置 hugo.toml，使用主题作者提供的示例</li> <li>删掉示例中的主题库，避免影响后续推送(rmdir /s /q themes\hugo-coder.git)</li> <li>运行 hugo 验证是否可以成功构建(hugo)</li> </ol> <h3 id="2-托管至-github"> 2. 托管至 Github <a class="heading-link" href="#2-%e6%89%98%e7%ae%a1%e8%87%b3-github"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h3> <ol> <li>使用cmd，分别git init（初始化一个git仓库） git add .（当前文件添加到Git暂存区） git commit -m “Initial”（初始化提交仓库）</li> <li>在 Github 上创建一个仓库，复制仓库地址，运行git remote add origin+仓库地址命令，设置本地项目Git远程地址到仓库</li> <li>将本地仓库代码推送至GitHub远程仓库（git push -u origin master 或 git push -u origin main）</li> <li>到仓库验证本地代码已推送</li> </ol> <h3 id="3-部署至-cloudflare-pages"> 3. 部署至 Cloudflare Pages <a class="heading-link" href="#3-%e9%83%a8%e7%bd%b2%e8%87%b3-cloudflare-pages"> <i class="fa-solid fa-link" aria-hidden="true" title="Link to heading"></i> <span class="sr-only">Link to heading</span> </a> </h3> <ol> <li>进入 Cloudflare - 构建 - Compute - Workers 和 Pages 页面，点击创建应用程序，选择 Pages。首次使用时，绑定和授权 Github 账号</li> <li>在创建应用程序页面，选择要部署的项目对应仓库，选择静态框架为 hugo，快速部署，完成后使用 Cloudflare Pages 提供的默认域名访问网页</li> </ol>