打造国内可以正常访问的 Blogger 博客（全流程实操指南）

Blogger 作为谷歌旗下的产品，其原生域名（.blogspot.com）及图片服务器在中国无法正常访问，但 Blogger 是全球历史最悠久、最稳定的全托管博客平台之一。本博客（zoio.net）就是搭建在 Blogger 博客平台。很多人咨询我的博客是如何搭建的，今天就介绍一下：如何在 2026 年打造一个中国用户可以正常访问的 Blogger 博客。

在选择 Blogger 搭建博客之前，需要先了解：虽然我们可以打造一个中国用户可以正常访问的博客，但在博文内容的发布方面，仍然需要科学上网环境，国内网络无法访问 Blogger 后台，也就无法正常发布内容。

为什么选择 Blogger 而不是 WordPress

很多人会选择 WordPress 来搭建自己的博客，我为什么会从 WordPress 转向 Blogger ？最重要的原因就是服务器费用，对于个人或技术博主，Blogger 具有独特的“性价比”优势：

维度	Blogger	WordPress (自建)
服务器成本	完全免费 (由 Google 托管)	需要购买 VPS、数据库和备份空间
上手难度	极低，有 Google 账号即可	中等，涉及服务器运维和环境搭建
所有权	归 Google 所有，需定期手动备份	完全归你自己所有，数据自控
功能扩展	受限，仅靠内置 Gadgets 和 HTML	极强，数万个插件 (SEO, 电商, 缓存)
维护成本	零维护，Google 负责安全和更新	需定期手动更新核心、插件及安全防护
国内访问	需配合 Cloudflare 做深度优化	若服务器在国内需备案，在海外则看线路

Blogger 永远免费且不限流量。对于个人博客来说，没有续费压力意味着你可以更纯粹地分享内容，而不用考虑“广告费够不够付服务器月租”。Blogger 是一个“只要谷歌不倒，博客永存”的避风港，适合追求“纯粹写作”和“零成本维护”的用户。

痛点解析：为什么国内访问不了 Blogger ？

2026 年的网络环境下，Blogger 的访问障碍主要集中在以下三点：

域名封锁：blogspot.com 默认域名在国内基本处于无法解析或连接重置的状态。
图片加载失败：Blogger 存储图片的服务器 googleusercontent.com 经常遭遇 SNI 阻断，导致博文图片全碎。
外部资源阻塞：谷歌字体（Google Fonts）和原生评论系统加载缓慢，会导致浏览器出现长达数秒的白屏阻塞。

解决方案：建立“全链路边缘代理”

我们建立一套完全绕过直接连接的访问方案：

流量层：绑定独立域名，使用 Cloudflare CDN 代理域名。
资源层：使用 Cloudflare Workers 搭建私有图片反向代理。
代码层：优化主题源码，剔除冗余请求，实现资源本地化和字体原生化。

实操教程：四步实现国内秒开

准备工作

Google 账号：注册 Blogger 博客
域名一个：建议购买一个域名，域名费用不贵，免费不稳定。
Cloudflare 账号一个：将域名托管到 Cloudflare
科学上网环境

第一步：注册 Blogger 并绑定域名

打开 Blogger 官网，通过 Google 账号登录。创建博客

Blogger 后台操作：进入「设置」 - 「>自定义域名」 - 输入你的域名。

Cloudflare 配置：按照 Blogger 提示，添加两条 CNAME 记录。暂时不开启 CDN 。

返回 Blogger 后台操作：开启「重定向网域」、「HTTPS 可用性」、「HTTPS 重定向」。

重定向网域是将 xxx.xxx 自动跳转到 www.xxx.xxx ,需要额外添加一条 CNAME 记录：类型：CNAME ，名称：@ ，目标：ghs.google.com 。

稍等一会刷新页面，HTTPS 可用性状态「未知」变更为「可用」后，在 Cloudflare 解析页面上开启代理状态（小云朵）

SSL 设置：在 CF 后台选择「TLS/SSL」，设置为“完全（严格）”模式。

第二步：使用 Cloudflare Workers 搭建图片 CDN

这是解决图片无法访问的核心。我们要把所有谷歌图片请求，转变为通过你自己的子域名分发。

创建 Worker ，在 Cloudflare 控制台「计算」菜单选择「Workers 和 Pages」，点击右上角的「创建应用程序」创建 Workers 和 Pages 。

选择「从 Hello World！开始」

Worker name 命名为 img-proxy（自定义），点击「部署」。

绑定域名：给这个 Worker 绑定一个自定义子域名，例如 img.xxx.xxx 。

「设置」 - 「>域和路由」 - 「>添加」

「自定义域」

「添加域」

部署以下代码：「编辑代码」。

清空代码，并粘贴我们的代码 - 「部署」(代码已上传到 GitHub cf-img-proxy 文件 )

第三步：深度优化主题代码

Blogger 博客主题样式并非印象中的简陋，官方提供的一些模板虽然是很丑，但模板商城平台上有非常多美观的 Blogger 模板，不仅可以制作博客，很多单页模板页是非常的精美。找到并下载好你喜欢的 Blogger 博客主题文件。

1、修改图片加载逻辑：

我们需要将 Blogger 博客主题文件中所有图片通过 //img.xxx.xxx/?url= 进行反向代理，由于 Blogger 主题代码各异，手动搜索时可以重点关注以下几个“关键词”：

expr:src：这是 Blogger 动态绑定图片地址的最常见属性。
expr:style：有些缩略图是用背景图显示的，代码通常长这样：
- expr:style='"background-image:url(\"//img.zoio.net/?url=" + data:post.thumbnailUrl + "\")"'
post-thumbnail：在模板中搜索这个类名，通常能直接找到控制缩略图显示的代码块。

替换示例参考：

原始代码 (常见形式)	修改后的代码
`expr:src='data:post.firstImageUrl'`	`expr:src='"//img.xxx.xxx/?url=" + data:post.firstImageUrl'`
`data:post.thumbnailUrl`	`"//img.xxx.xxx/?url=" + data:post.thumbnailUrl`
`resizeImage(data:p.img, 72)`	`"//img.xxx.xxx/?url=" + resizeImage(data:p.img, 72)`

<meta expr:content='resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>

<meta expr:content='&quot;//img.zoio.net/?url=&quot; + resizeImage(data:blog.postImageUrl, 0)' property='og:image'/>

2、彻底移除 Google 字体：

搜索 fonts.googleapis.com 并直接删除相关 link 或 @import 标签。然后在 CSS 中使用系统自带字体栈替代：

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

3、清理评论系统：

在 Blogger 设置 - 评论中选择“隐藏”。在 HTML 源码中搜索并删除 <b:include name='commentPicker'/> 等标签，防止其加载无效脚本。

4、充分利用 AI

如果你确实对代码一窍不通，完全可以让 AI 帮你分析主题代码，并给出替换方案：将主题代码发给 AI 并给出下面提示词。

请帮我修改一段 Blogger（Blogspot）的主题代码。我需要将模板中所有图片地址，批量添加一个反向代理前缀：//img.xxx.xxx/?url=。

修改原则：

精准替换： 仅针对图片 URL 的变量部分进行修改，不要更改 HTML 结构或 CSS 类名。

严禁过度优化： 请严格执行替换逻辑，不要改动我原本的代码逻辑、ID 或未要求的 JS 函数。

覆盖全面： 需包含文章缩略图、侧边栏小工具图以及文章内部图片的输出变量。

未完，整理中...