1. 为什么选择Cloudflare Pages + GitHub搭建博客？
在这个人人都是自媒体的时代，拥有一个独立博客就像在数字世界安家落户。但传统建站方案要么需要租用服务器（月月烧钱），要么受限于平台规则（各种功能限制）。而Cloudflare Pages + GitHub这对组合，恰好解决了这些痛点。
我三年前开始用这套方案，至今零成本运行着三个技术博客。最直观的优势是：
- 完全免费的全球CDN加速（Cloudflare的194个节点自动分配最近资源）
- 无需操心服务器维护（连SSH都不用碰）
- Git推送即发布（写文章像提交代码一样简单）
- 自带HTTPS证书（浏览器小绿锁自动搞定）
特别适合以下人群：
- 技术从业者（天然熟悉Git操作）
- 学生党（预算有限但需要作品展示）
- 内容创作者（专注写作不折腾运维）
实测数据：我的个人博客首页加载时间从传统虚拟主机的2.3s降至0.4s，Google PageSpeed评分98分
2. 前期准备：这些工具一个都不能少
2.1 GitHub账号注册避坑指南
虽然GitHub注册流程简单，但国内用户常遇到：
- 邮箱验证延迟（建议用国际邮箱服务商）
- 人机验证循环（关闭代理重试）
- 用户名被占用（技术博客建议包含tech/dev等关键词）
注册完成后务必：
- 开启双重验证（Settings → Password and authentication）
- 创建SSH Key（后续部署要用）
bash复制ssh-keygen -t ed25519 -C "your_email@example.com"
2.2 本地环境配置
推荐使用VS Code作为Markdown编辑器，配合这些插件效率翻倍：
- Markdown All in One（快捷键自动补全）
- Paste Image（直接粘贴截图到文章）
- Code Spell Checker（代码拼写检查）
安装Git时注意：
- Windows用户勾选"Git from the command line"选项
- Mac用户用Homebrew安装更易管理
bash复制brew install git
3. 从零开始构建博客仓库
3.1 选择静态网站生成器
经过对比测试，推荐Hugo（Go语言编写）原因：
- 编译速度极快（500篇文章3秒生成）
- 主题生态丰富（超过300款免费主题）
- 内容管理直观（Front Matter配置灵活）
初始化项目：
bash复制hugo new site myblog
cd myblog
git init
3.2 主题安装与配置
以流行的PaperMod主题为例：
bash复制git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod
关键配置（config.yml）：
yaml复制baseURL: https://yourblog.pages.dev/
theme: PaperMod
paginate: 5
enableRobotsTXT: true
3.3 自动化部署脚本
创建GitHub Actions工作流（.github/workflows/deploy.yml）：
yaml复制name: Deploy to Cloudflare Pages
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
submodules: true
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: '0.110.0'
- name: Build
run: hugo --minify
- name: Publish
uses: cloudflare/pages-action@v1
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
projectName: myblog
directory: public
4. Cloudflare Pages深度配置
4.1 性能优化技巧
在Pages设置中调整：
- Build output directory: public
- Build command: hugo --minify
- Environment variables:
- HUGO_ENABLEGA = true
- HUGO_ENV = production
开启这些功能：
- Auto Minify（HTML/CSS/JS压缩）
- Brotli Compression（新一代压缩算法）
- Early Hints（预加载优化）
4.2 自定义域名绑定
以阿里云域名为例：
- 添加CNAME记录 → pages.dev域名
- 在Cloudflare中开启SSL/TLS
- 设置Always Use HTTPS
- 配置URL重定向（www跳转非www）
遇到证书签发失败时，尝试暂时关闭CDN代理状态
5. 内容创作与管理实战
5.1 Markdown写作规范
我的文章Front Matter模板：
markdown复制---
title: "深入理解CSS Grid布局"
date: 2023-07-20T16:42:00+08:00
draft: false
tags: ["前端", "CSS"]
categories: ["技术教程"]
toc: true
cover:
image: "/images/css-grid-cover.png"
alt: "CSS Grid示意图"
---
5.2 图片优化方案
使用免费图床方案：
- 压缩工具：Squoosh（WebP格式）
- 上传脚本（配合PicGo）
bash复制npm install picgo -g
picgo set uploader
5.3 评论系统接入
推荐Twikoo（基于Serverless）：
- 在Cloudflare Workers创建新服务
- 复制部署脚本
- 在主题配置中注入JS代码
html复制<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.7/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: '你的环境ID',
region: 'ap-shanghai'
})
</script>
6. 高级功能扩展
6.1 百度统计接入
在主题模板中插入：
html复制{{ if not .Site.IsServer }}
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?你的ID";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
{{ end }}
6.2 搜索功能实现
使用Lunr.js创建本地搜索：
- 生成索引文件
javascript复制const index = lunr(function () {
this.ref('id')
this.field('title', { boost: 10 })
this.field('content')
})
- 添加搜索页面模板
6.3 自动化备份策略
设置GitHub仓库镜像：
- 在GitHub Actions添加同步任务
- 配置到Gitee的镜像推送
- 每周自动打包静态文件到Google Drive
yaml复制- name: Backup to Gitee
run: |
git remote add mirror https://gitee.com/yourname/repo.git
git push mirror main
这套方案我运行两年多，经历过三次Cloudflare服务更新，始终保持稳定访问。最惊喜的是去年一篇文章上Hacker News首页，单日10万+流量下依然零故障。对于技术创作者来说，这可能是目前性价比最高的博客解决方案了。