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

Lin Hsüeh-ch'in

已于 2025-05-06 09:45:40 修改

阅读量806

点赞数 27

分类专栏：博客搭建文章标签： github 阿里云

于 2025-05-06 09:44:36 首次发布

本文链接：https://blog.csdn.net/olixu/article/details/147727691

版权

博客搭建专栏收录该内容

2 篇文章

订阅专栏

🚀 如何低成本加速国内访问 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 缓存：

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