网站导航
> 技术文档 > 低成本（Cloudflare + 域名）加速国内访问 GitHub Pages 博客_github pages 国内访问

低成本（Cloudflare + 域名）加速国内访问 GitHub Pages 博客_github pages 国内访问

网友: 技术文档 2025-09-02 19:09:17

🚀 如何低成本加速访问 GitHub Pages 博客

（使用 Cloudflare + 自定义域名完整教程）

🧾 项目背景

我在 GitHub 上使用 Vitepress 搭建了一个博客项目，并通过 GitHub Pages 成功部署上线：

https://你的用户名.github.io/你的项目名/

然而，在国内访问这个页面时，加载速度非常缓慢，严重影响用户体验。

为了解决这个问题，我选择了一种低成本、易操作、效果显著的加速方案：
✅ 使用 Cloudflare CDN 加速
✅ 搭配 自定义域名（如 example.com）
✅ 不改变原有 GitHub Pages 部署结构

整个过程花费仅 6 元（域名注册费用），并且最终实现了快速访问的效果！

💰 总体成本概览

项目 内容 费用 域名注册 自定义域名（例如 ringakkin.asia） ￥6 元/年 CDN 加速 Cloudflare 免费套餐 ￥0 元 网站托管 GitHub Pages 提供 ￥0 元

✅ 总成本仅需 6 元/年！

🔧 实施流程详解

✅ 第一步：购买域名并完成备案（阿里云）

  • 登录 阿里云 并注册账号
  • 搜索并购买一个域名（例如 yourdomain.com 或 .asia/.cn/.net/.top 等）
    • 👉 注意：这里的 ringakkin.asia 是示例，请替换为你自己的域名
  • 完成域名实名认证和 ICP 备案（如果用于中国大陆地区访问）
    • 备案时间一般为 1~7 天
    • 备案完成后才能在中国大陆正常访问该域名

✅ 第二步：将域名 DNS 切换到 Cloudflare

  • 登录 Cloudflare
  • 添加站点：
    • 输入你的域名（👉 替换成你自己的域名，如 yourdomain.com）
  • 记录 Cloudflare 提供的两个 NS 地址（如下所示，每个人不同，请以你看到的为准）：
    • 示例：lucy.ns.cloudflare.com 和 mark.ns.cloudflare.com
    • 👉 这两个 NS 地址是系统自动分配的，不要照搬别人的！
  • 回到阿里云控制台 → 域名管理 → 修改 DNS 服务器为 Cloudflare 提供的 NS 地址
  • 等待 DNS 生效（通常几分钟～几小时）

✅ 第三步：配置 CNAME 解析指向 GitHub Pages

  • 回到 Cloudflare 控制台 → DNS 页面
  • 添加一条 CNAME 记录：
类型 名称 目标 代理状态 CNAME blog ringakkin.github.io 开启（橙色云图标）

👉 说明：

  • blog 是子域名前缀，你可以改成 www 或其他你喜欢的名称
  • ringakkin.github.io 是你的 GitHub Pages 地址，请替换为： 
    你的GitHub用户名.github.io

表示：

blog.yourdomain.com → 你的GitHub用户名.github.io（GitHub Pages）

并通过 Cloudflare 的全球 CDN 加速节点进行访问。

✅ 第四步：强制 HTTPS 访问

  • Cloudflare 左侧菜单 → SSL/TLS → Overview
  • 设置为 Full (strict)
  • 启用 Always Use HTTPS

确保所有访问都是加密的 HTTPS 请求。

✅ 第五步：开启缓存优化（提升加载速度）

  • Speed → Optimization：

    • 开启 Auto Minify（自动压缩 HTML/CSS/JS）
    • 开启 Rocket Loader™（优化 JS 加载）

  • Cache → Configuration：

    • 设置 Browser Cache TTL 为 7 days

✅ 第六步：GitHub Pages 绑定自定义域名

  • 打开你的 GitHub 仓库（如 Vitepress_Blog）
  • Settings → Pages
  • 在 Custom domain 中填写： 
    blog.yourdomain.com

    👉 请替换为你的实际子域名

  • 勾选 Enforce HTTPS
  • 点击 Save

GitHub 会自动生成一个 CNAME 文件放在你的部署分支中。

✅ 第七步：修复页面样式混乱问题

问题原因：

当使用自定义域名访问时，如果 vitepress.config.js 中的 base 是 /你的项目名/，那么所有静态资源路径都会带上这个前缀，而这个路径在你的自定义域名下不存在！

正确做法：

修改 vitepress.config.js 中的 base 为 /：

export default defineConfig({ base: \'/\', // 必须是根路径！ title: \'Code More Create\', description: \'探索前端技术的奇妙世界\',});

然后重新构建并部署到 GitHub Pages。

✅ 第八步：清除缓存以确保更新生效

清除 Cloudflare 缓存：
  1. Cloudflare 控制台 → Cache → Purge Everything
强制刷新浏览器缓存：
  • Chrome：按 Ctrl + Shift + R
  • 或者清空浏览器缓存（开发者工具 → Application → Clear Storage）

✅ 最终效果

现在你可以通过以下方式访问博客：

  • 原始地址（国外访问较慢）：

    https://你的GitHub用户名.github.io/你的项目名/

  • 自定义域名 + Cloudflare 加速（国内访问快）：

    https://blog.你的域名

并且页面样式正常，加载速度快！

🧪 测试建议

你可以在以下网站测试访问速度和 CDN 效果：

  • 站长工具 Ping 测试：输入 blog.你的域名
  • WebPageTest：选择中国地区的节点测试加载性能

🧰 常见问题排查指南

问题 可能原因 解决方法 页面打不开 DNS 未生效 等待 DNS 更新，检查是否是橙色云图标 页面样式乱 base 路径错误 修改 vitepress.config.js 中的 base: \'/\' 更新后没变化 缓存未刷新 清除 Cloudflare 缓存 + 浏览器缓存 页面加载慢 缓存策略未开启 开启 Auto Minify、Cache TTL 显示 Mixed Content 引用了非 HTTPS 资源 检查图片链接、插件引用等是否使用 HTTPS

🎉 总结

通过这次完整的实践，我完成了从“GitHub Pages 部署 → 国内访问慢 → 寻找加速方案 → 域名购买与备案 → Cloudflare 配置 → 样式修复”的完整流程。

整个过程虽然涉及多个平台（GitHub、阿里云、Cloudflare）和一些技术细节，但最终实现了一个低成本、高效、稳定的解决方案，让我的博客在国内也能快速访问。

如果你也遇到类似的问题，希望这篇总结能帮助你少走弯路，顺利搭建出属于自己的高速博客站点！

如有后续问题，欢迎继续交流 😊

广东租房网

网络标签：

相关问题