Cloudflare Pages + Hexo 博客部署全攻略：从零开始到国内访问优化
Cloudflare Pages + Hexo 博客部署全攻略：从零开始到国内访问优化
Hexo作为一款快速、简洁且高效的静态博客框架，凭借其丰富的主题和插件生态，成为众多技术爱好者的首选。而Cloudflare Pages提供的免费全球CDN加速和自动化部署能力，让个人博客的发布变得前所未有的简单。本文将手把手带你完成从Hexo博客搭建到Cloudflare Pages部署的全过程，并重点解决国内用户访问受限的痛点问题。
1. 环境准备与Hexo博客初始化
在开始部署之前，我们需要确保本地开发环境已经准备就绪。Hexo基于Node.js运行，因此首先需要安装Node.js环境。
1.1 安装Node.js和Git
访问Node.js官网下载并安装最新LTS版本。安装完成后，在终端运行以下命令验证安装是否成功：
node -v npm -v同时确保Git已经安装并配置好全局用户信息：
git --version git config --global user.name "Your Name" git config --global user.email "your.email@example.com"1.2 初始化Hexo项目
通过npm全局安装Hexo命令行工具：
npm install -g hexo-cli然后创建一个新的Hexo项目并初始化：
hexo init my-blog cd my-blog npm install项目结构主要包含以下关键目录：
_config.yml：站点配置文件source：存放文章和静态资源themes：主题目录public：生成的静态文件目录
1.3 本地预览与写作
启动本地服务器预览博客：
hexo server新建一篇文章测试：
hexo new "Hello World"编辑完成后，生成静态文件：
hexo generate2. 配置GitHub仓库与自动化构建
为了将Hexo博客部署到Cloudflare Pages，我们需要先将代码托管到GitHub仓库。
2.1 创建GitHub仓库
在GitHub上新建一个公开仓库，名称建议与博客项目一致。然后初始化本地Git仓库并关联远程：
git init git remote add origin https://github.com/yourname/my-blog.git创建.gitignore文件，排除不需要版本控制的目录：
node_modules/ public/ .deploy*/2.2 配置Hexo部署插件
安装hexo-deployer-git插件：
npm install hexo-deployer-git --save修改_config.yml中的部署配置：
deploy: type: git repo: https://github.com/yourname/my-blog.git branch: main2.3 自动化构建配置
在项目根目录创建.github/workflows/deploy.yml文件，配置GitHub Actions实现自动构建：
name: Hexo Build and Deploy on: push: branches: [ main ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v2 with: node-version: '16' - name: Install Dependencies run: | npm install npm install -g hexo-cli - name: Generate Static Files run: | hexo generate3. Cloudflare Pages部署详解
Cloudflare Pages提供了免费的静态网站托管服务，支持自动从Git仓库构建和部署。
3.1 创建Cloudflare Pages项目
- 登录Cloudflare控制台，选择"Workers & Pages"
- 点击"Create application" → "Pages" → "Connect to Git"
- 授权Cloudflare访问你的GitHub账户
- 选择之前创建的Hexo博客仓库
3.2 配置构建设置
在构建配置页面，需要设置以下参数：
| 配置项 | 值 | 说明 |
|---|---|---|
| Production branch | main | 部署的主分支 |
| Build command | npm install && hexo generate | Hexo构建命令 |
| Build output directory | public | Hexo生成的静态文件目录 |
提示：Cloudflare Pages默认会缓存node_modules目录以提高构建速度，如果遇到构建问题，可以尝试禁用缓存。
3.3 自定义域名配置
Cloudflare会自动分配一个*.pages.dev的域名，但国内无法直接访问。我们需要配置自己的域名：
- 在Pages项目设置中，选择"Custom domains"
- 输入你已购买的域名（如blog.yourdomain.com）
- 按照提示在域名注册商处添加CNAME记录
4. 国内访问优化方案
由于网络环境限制，我们需要采取额外措施确保国内用户能够稳定访问。
4.1 DNS解析优化
在域名注册商（如腾讯云、阿里云）的DNS管理界面，添加以下记录：
| 记录类型 | 主机记录 | 记录值 | TTL |
|---|---|---|---|
| CNAME | blog | your-project.pages.dev | 600 |
| A | @ | 优选IP地址 | 600 |
注意：优选IP可以通过ping或第三方测速工具获取Cloudflare边缘节点中响应最快的IP。
4.2 启用HTTP/3和Brotli压缩
在Cloudflare控制台中，优化以下性能设置：
- Speed → Optimization：启用Brotli压缩
- Network → HTTP/3：启用HTTP/3 with QUIC
- Caching → Configuration：设置缓存级别为"Standard"
4.3 图片与静态资源优化
对于国内用户，建议将图片等静态资源托管在国内CDN服务上：
- 使用PicGo等工具将图片上传至国内图床
- 在Hexo配置中替换图片链接前缀
- 或者使用jsDelivr加速GitHub上的静态资源
5. 高级配置与监控
5.1 自定义404页面
在Hexo的source目录下创建404.md：
--- title: 404 Not Found layout: false --- 您访问的页面不存在，[返回首页](/)5.2 集成Google Analytics
安装hexo-google-analytics插件：
npm install hexo-google-analytics --save在_config.yml中配置：
google_analytics: tracking_id: UA-XXXXX-X anonymize_ip: true5.3 性能监控与告警
Cloudflare提供了丰富的监控指标：
- 在Pages项目仪表板查看构建历史和访问统计
- 配置Web Analytics获取更详细的访问数据
- 设置性能告警阈值，当TTFB超过500ms时触发通知
6. 常见问题排查
在实际部署过程中，可能会遇到以下典型问题：
构建失败
- 检查构建日志中的错误信息
- 尝试在本地运行
hexo generate验证 - 清除Cloudflare构建缓存重新部署
国内访问缓慢
- 使用DNS优选工具测试不同边缘节点
- 考虑启用Cloudflare中国区域的合作伙伴服务
- 对关键静态资源使用国内CDN分流
HTTPS证书问题
- 确保证书状态显示为"Active"
- 检查DNS解析是否完全生效
- 必要时手动重新颁发证书
经过以上步骤，你的Hexo博客已经成功部署到Cloudflare Pages，并针对国内访问进行了全面优化。这套方案不仅完全免费，而且具备企业级的性能和可靠性。在实际运营中，建议定期检查访问日志和性能指标，根据用户反馈持续优化体验。