Hugo + GitHub Repo + Cloudflare Pages + 自己的域名

一、安装环境

1. 安装 Git https://git-scm.com/downloads 安装完成后打开PowerShell确认安装成功：

   git --version
   

2. 安装 Hugo https://gohugo.io/getting-started/installing/ Extended版本（支持 SCSS 编译）

   winget install Hugo.Hugo.Extended
   hugo version
   

二、创建 Hugo 博客

1. 选择文件夹存储数据，鼠标右键Git Bash Here创建新站点

   hugo new site MyBlog
   cd MyBlog
   

   文件说明

   ├── archetypes/     # 内容模板目录：使用`hugo new`命令时的内容蓝图
   │   └── default.md  # 默认模板：新建文章时自动填充的Front Matter结构
   ├── assets/         # 资源处理目录：需要Hugo管道处理的源文件(CSS/JS/SCSS等)
   ├── content/        # 内容目录：所有页面和文章的Markdown文件存放地
   ├── data/           # 数据目录：网站的补充数据(JSON/YAML/TOML格式)
   ├── i18n/           # 国际化目录：多语言翻译文件，用于支持多语言网站
   ├── layouts/        # 布局目录：定义网站外观的HTML模板文件
   ├── static/         # 静态资源目录：无需处理的静态文件(图片/字体/PDF等)
   ├── themes/         # 主题目录：存放或引用第三方主题文件(下面主题存放位置)
   └── hugo.toml       # 主配置文件：全局设置(网站标题/主题/菜单/构建选项等)
   

2. 选择并安装主题，例如使用 PaperMod或hugo-ivy：

   git init
   git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
   git submodule add https://github.com/yihui/hugo-ivy.git themes/ivy
   

3. 编辑 hugo.toml设置主题及其他信息：

   theme = "PaperMod"
   title = "XXX Blog"
   

4. 创建文章及预览

   hugo new posts/my-first-post.md
   hugo server -D
   

   打开浏览器访问：`http://localhost:1313

三、推送到github

1. 创建 GitHub 仓库

   登录 GitHub → New Repository → 填写仓库名（如 MyBlog）

2. 上传本地代码

   git init
   # 将所有更改的文件添加到 Git 暂存区
   git add .  
   # 提交更改，并添加描述信息
   git commit -m "Initial commit"
   git branch -M main
   # 将本地仓库与远程 GitHub 仓库关联起来
   git remote add origin https://github.com/yourname/MyBlog.git
   

3. 配置SSH密钥

   # 确认当前使用的是HTTPS地址
   git remote -v
   # 将URL切换为SSH格式
   git remote set-url origin git@github.com:yourname/MyBlog.git
   # 验证是否成功
   git remote -v
   # 测试SSH链接
   ssh -T git@github.com
   # 将本地代码更改推送到远程仓库main分支
   git push -u origin main
   

四、配置 Cloudflare Pages 自动部署

1. 登录 Cloudflare → Pages → Create Project （项目名称就是后续临时域名）
2. 选择 GitHub 仓库（上一步创建的 MyBlog）
3. 配置 Build 设置：

4. 点击 Deploy → Cloudflare 会自动构建并分配临时域名：

https://project_name.pages.dev #更新到hugo.toml里面的baseURL

五、绑定自定义域名

1.在 Cloudflare Pages → 项目 → Custom Domains → 添加域名

2.登录你的域名注册商（如 Namecheap、阿里云等）

3.添加 CNAME 记录：

yourdomain.com → project_name.pages.dev

4.等待 DNS 生效（通常几分钟到几小时）

5.Cloudflare 自动提供 HTTPS

六、日常更新博客

1.在本地添加、修改和预览文章

# 创建md文件
hugo new content/posts/我的文章.md
# 本地预览
hugo server -D

2.修改博客并推送

#确定要上传到 GitHub 上后
hugo
# 将更改的文件添加到 Git 暂存区
git add content/posts/my-first-post.md
git add .
# 提交更改，并添加描述信息
git commit -m "添加了一篇关于XXX的新博文"
git commit -m "Publish my-first-post by setting draft to false"
# 将更改推送到远程仓库（例如 GitHub）
git push
git push origin main

3.Cloudflare Pages 自动重新构建并部署 → 访问自定义域名即可看到更新