一、前言 Link to heading

这是我用 Hugo + Cloudflare Pages 搭建的个人博客，记录一下完整的搭建过程.

二、环境准备 Link to heading

  1. 工具：
  • Hugo：静态站点生成器（用于生成博客页面）
  • Git：版本控制工具（用于代码托管）
  • VS Code：代码编辑器（可选，用于编辑配置/文章）
  • GitHub 账号：用于托管博客源码
  • Cloudflare 账号：用于免费部署博客
  1. 我的系统：Windows 11

三、搭建步骤 Link to heading

1. 本地搭建静态页面 Link to heading

  1. 安装 hugo（winget install Hugo.Hugo.Extended）
  2. 创建 hugo 项目
  3. 从hugo网站中复制主题 https://gohugo.io/ –> themes –> Coder –> Download –> code –> Clone using the web URL.
  4. 配置 hugo.toml，使用主题作者提供的示例
  5. 删掉示例中的主题库，避免影响后续推送(rmdir /s /q themes\hugo-coder.git)
  6. 运行 hugo 验证是否可以成功构建(hugo)

2. 托管至 Github Link to heading

  1. 使用cmd，分别git init（初始化一个git仓库） git add .（当前文件添加到Git暂存区） git commit -m “Initial”（初始化提交仓库）
  2. 在 Github 上创建一个仓库，复制仓库地址，运行git remote add origin+仓库地址命令，设置本地项目Git远程地址到仓库
  3. 将本地仓库代码推送至GitHub远程仓库（git push -u origin master 或 git push -u origin main）
  4. 到仓库验证本地代码已推送

3. 部署至 Cloudflare Pages Link to heading

  1. 进入 Cloudflare - 构建 - Compute - Workers 和 Pages 页面，点击创建应用程序，选择 Pages。首次使用时，绑定和授权 Github 账号
  2. 在创建应用程序页面，选择要部署的项目对应仓库，选择静态框架为 hugo，快速部署，完成后使用 Cloudflare Pages 提供的默认域名访问网页