使用cloudflare通过github部署hugo博客并实现自动化发布

为什么选择 Cloudflare 和 GitHub ？ #

Cloudflare Pages + GitHub 的组合能带来低成本、稳定且自动化的静态站点发布体验：

搭建静态站点的工具有很多，如 Jekyll、Hugo、Hexo 等。这里以 Hugo 为例，介绍如何使用 Cloudflare Pages + GitHub 实现博客的自动化部署。

安装 Hugo 可以参考官方文档：Hugo 安装指南。可根据不同的平台采用不同的安装方式。

安装好 Hugo 后，可以使用以下命令创建一个新的 Hugo 站点：

hugo new site my-blog
cd my-blog

因为接下来要通过 GitHub 进行版本控制和部署，所以需要初始化一个 Git 仓库：

git init

使用 Hugo 通常会选择一个主题，可以从 Hugo 主题库中选择一个喜欢的主题，并按照主题的安装说明进行配置。

这里建议通过 Git Submodule 的方式添加主题：

git submodule add <submodule-repo-url>

具体的主题仓库地址和配置方式可以参考所选主题的文档。

配置好主题后，可以创建一些内容：

hugo new posts/my-first-post.md

在 content/posts/my-first-post.md 中编辑你的第一篇博客文章。

之后，可以使用以下命令在本地预览博客：

hugo server -D

上述命令会启动一个本地服务器，默认地址是 http://localhost:1313，可以在浏览器中查看效果。

生成的静态文件会放在 public 目录下，为了避免将生成的静态文件提交到 Git 仓库，可以在项目根目录下创建一个 .gitignore 文件，内容如下：

/public
/resources
/.hugo_build.lock

搭建好本地的 Hugo 博客后，需要将代码推送到 GitHub 仓库。

在 GitHub 上创建一个新的仓库，例如 my-blog。因为是第一次推送代码，可以选择不初始化 README、.gitignore 或 LICENSE 文件，以避免冲突。
在本地 Hugo 站点目录中，添加远程仓库地址并推送代码：

git remote add origin <your-github-repo-url>
git branch -M main
git push -u origin main

不需要配置 GitHub Actions，因为 Cloudflare Pages 会处理构建和部署。

登录到 Cloudflare 仪表盘。如果没有账号，可以免费注册一个。
在仪表盘中，选择 “Worker & Pages” 选项，然后点击 “Create application”。
“Create application” 默认是创建"Worker"，需要切换到创建 “Pages"页面
连接到 GitHub 仓库创建"Page`可以选择使用 Git 仓库还是直接上传文件，我们要使用之前已经建好的 GitHub 仓库，所以选择 “Import an existing Git repository”。

可以选择连接到 GitHub 还是 GitLab，我们选择 GitHub。

授权 Cloudflare 访问 GitHub 仓库后，选择之前创建的 Hugo 博客仓库。

Project name：可以自定义项目名称。
Production branch：选择要部署的分支，通常是 main。
Framework preset ：选择 Hugo。 —— 这里使用的是Hugo，如果使用其他静态站点生成器，可以选择对应的选项，或者选择 None 自定义构建命令。
Build command：填写 hugo。
Build output directory：填写 public。

配置完成后，点击 “Save and Deploy” 按钮即可，等待构建完成，就可以在 Worker & Pages 页面看到部署的站点了。

点击选项卡右侧的...中的Visit即可访问部署好的博客站点。

如果需要绑定自定义域名，可以在 Cloudflare Pages 的设置中添加自定义域名，并按照提示配置 DNS 记录。