前言

本站搭建记录，结合 GitHub 私有仓库和 Cloudflare Pages 免费托管服务搭建个人博客。利用Cloudflare免费额度实现全球CDN加速，整个过程完全免费，且操作简单。

本站使用Hugo框架，Hugo是一个用Go语言编写的静态网站生成器，广泛用于构建博客、文档网站和其他静态网站。

前提

• 需要一个github账号
• 需要一个cloudflare账号

步骤流程

1. 在本地创建私有仓库并推送到GitHub

1. 打开 GitHub Desktop，点击左上角的 File > New repository…
2. 在弹出的窗口中：
   • Name: blog，起名字
   • Description: 输入你对这个仓库的描述（可选）
   • Local path:
     • 举例blog文件夹地址是C:\Users\ro264\OneDrive\文档\blog
     • 那么这里就填C:\Users\ro264\OneDrive\文档
   • Initialize this repository with a README: 选，初始化
   • Git Ignore: 选择 None
   • License: 选择 None
3. 点击 Create repository 创建本地仓库
4. 点击右上角的 Publish repository
5. 在弹出的窗口中：
   • Name: blog
   • Description: 可选
   • Keep this code private: 一定要选勾选！！
6. 点击 Publish repository，将本地仓库推送到GitHub

2. 在Windows 11上安装Hugo

1. 按 Win + S 打开搜索框，输入 cmd，点击 命令提示符 以管理员身份运行。
2. 在命令提示符中输入以下命令安装Hugo：

   winget install Hugo.Hugo.Extended
   

3. 安装完成后，输入以下命令验证安装：

   hugo version
   

   如果显示类似 hugo v0.x.x-xxxxxx 的信息，说明安装成功。

3. 使用Hugo创建网站项目

1. 打开 Git Bash 或 命令提示符 或终端，导航到你的 blog 文件夹：

   cd path\to\blog
   

   例如：

   cd C:\Users\ro264\OneDrive\文档\blog
   

2. 输入以下命令初始化Hugo项目：

   hugo new site . --force
   

   这会在 blog 文件夹中生成一系列文件和文件夹，如 hugo.toml，content，layouts` 等。

4. 安装主题Hugo PaperMod(主题可更换)

1. 在 Git Bash 或 命令提示符 中，仍然位于 blog 文件夹下，输入以下命令下载 PaperMod 主题：

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

   这会将 PaperMod 主题下载到 themes/PaperMod 文件夹中。

2. 打开 blog 文件夹中的 hugo.toml 文件，可以使用任何文本编辑器如 Notepad++ 或 VSCode
3. 在 hugo.toml 文件中添加或编辑以下内容来使用 PaperMod 主题：

   theme = "PaperMod"
   

   toml

5. 本地调试

在命令行输入：

hugo server

启动本地服务器，在浏览器中访问http://localhost:1313/确认网站效果

• hugo和主题配置慢慢调吧

5. 将本地仓库推送到GitHub

1. 在 Git Bash 或 命令提示符 中，确保你位于 blog 文件夹下。
2. 添加所有更改：

   git add .
   

   bash
3. 提交更改：

   git commit -m "Initial commit with Hugo site and PaperMod theme"
   

   bash
4. 推送到远程仓库：

   git push origin main
   

   bash

   如果是第一次推送，可能需要输入GitHub的用户名和密码。

6. 使用Cloudflare Pages托管Hugo页面

1. 打开浏览器，访问 Cloudflare 并登录。
2. 在控制面板中，点击 Pages。
3. 点击 Create a project，然后选择 Connect to Git。
4. 选择你刚才创建的 blog 仓库。
5. 在构建设置页面：
   • Framework preset: 选择 Hugo。
   • Build command: 保持默认的 hugo。
   • Build output directory: 输入 public。
6. 点击 Save and Deploy，Cloudflare Pages会自动开始部署。

7. 创建和发布文章

1. 在 Git Bash 或 命令提示符 中，输入以下命令创建新文章：

   hugo new posts/my-first-post.md
   

   bash

   这会在 content/posts 文件夹中创建一个 my-first-post.md 文件。

2. 打开 content/posts/my-first-post.md，在文件中编辑你的文章内容。
3. 预览你的博客，输入以下命令启动本地服务器：

   hugo server
   

   打开浏览器访问 http://localhost:1313 预览博客。

4. 当你满意后，停止服务器（Ctrl + C），然后将更改推送到GitHub：

   git add .
   git commit -m "Added my first post"
   git push origin main
   

   Cloudflare Pages 会自动部署更新的内容。

   打开浏览器访问pages的域名，即可看到你的博客

总结

如此便轻松地搭建了一个基于Hugo的静态博客，并将其托管在Cloudflare Pages上。感谢github和cloudflare提供的免费托管服务，让我们能够快速构建一个简单的博客系统。

建站只是开始，持续的内容创作和维护才是博客真正的生命力所在。