2020年10月19日星期一

通过服务器反代实现国内访问blogger

 写于 十月 19, 2020

谨以此篇来记下我这几天来的折腾。

这几天通过搜索中文互联网内容，发现有一种方法很流行:

  1. 注册blogger
  2. 绑定自定义域名，一般是通过Cloudflare的CDN
  3. 修改主题模版

值得注意的是，因为墙的原因，Cloudflare的CDN经常很慢，如果使用反代的话，速度会快不少。我总结这些然后咨询了Chief大佬，原话是这样的：

  1. 可以用服务器只反代博客页面 将css、js，图片等放在国内这样可以避免Google的ip被封，cf缓慢的问题网也能更稳定
  2. 用服务器反代博客和博客引用的图片等其他资源，这样在国内访问会比较慢，也比较吃服务器资源
  3. 用服务器反代页面后使用nginx的内容替换，将被墙的内容用国内云镜像，这样的好处就是在写博客时能直接上传图片而不用整外链，缺点就是很难找全googleusercontent的所有域名，可能出现有些图片不显示的情况

权衡以上，我选择的是第一种。写博客的时候手动把图片等资源换成国内的地址，不使用google的上传，这个大佬说可以通过软件完成，一般专门写markdown的软件都能搞定。也就说，目前我要做的是：

  1. 配置服务器反代blogger页面的内容
  2. 修改主题模版

完成以上需要的条件（一个可用的服务器，腾讯云的COS，blogger，自己的域名）。

一、配置服务器反代blogger页面

做此步前默认已经完成了blogger的注册，已经有了自定义域名。我着重说自己的心酸历程，因为之前操作服务器都是通过WinSCP和putty命令行，效率很低，在听取了Chief大佬的建议后，我果断重新安装了服务器系统，更新到debian10，然后安装了宝塔删库塔面板，图形化界面操作起来确实像打开了新世界。

我个人使用的是搬瓦工的VPS，特定版的CN2线，512MB的RAM+10G，只反向代理这一个blogger页面绰绰有余。

在此之前该VPS用来搭建SS，当时装了debian-7，宝塔面板需要9版本以上的debian，遂安装debian10，安装宝塔面板，安装Nginx，中文互联网已有很多教程，不再赘述。

  • 进入宝塔面板，左侧栏点击网页，创建一个网页，域名那里填自己的域名，PHP版本那里选择纯静态，确认提交

值得注意的是，这里域名的填写，如果填写的不是带www的，要在设置里补上带www的。例如，www.example.com,example.com 都要填上，这样是为了避免一些后续麻烦。

  • 然后选择设置，找到反向代理这一项，添加反向代理，把代理名称填一下，其他的随意填，此步目的是为了生成一个默认的反代模版，我们自己往里面写内容

  • 编辑配置文件，将下面的代码，按照图说的修改为自己的内容，贴在*location /*这一项，保存
#PROXY-START/
location /
{
    expires 12h;
    if ($request_uri ~* "(php|jsp|cgi|asp|aspx)")
    {
         expires 0;
    }
    proxy_pass https://example.blogspot.com/;
    proxy_set_header Host example.blogspot.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header Accept-Encoding "";
    sub_filter https://example.blogspot.com/ www.yourdomain.com;
    sub_filter_once off;
    add_header X-Cache $upstream_cache_status;  
}
#PROXY-END/

红框内填你的blogger的地址，黄框内填你域名的地址，如下图

  • 配置SSL，强制开启HTTPS，开启网站小锁。这一步可以使用宝塔面板来配置，在网站设置左侧栏中，找到SSL，选择Let’s Encrypt （如果你有其他证书亦可以切换其他证书后粘贴您的KEY和PEM内容，点击保存即可），申请证书，此时要点击那个带www的，带www的兼容不带www的。

注意：完成此步需要自己的域名解析到服务器的IP。如果是Cloudflare的解析完成后记得把橙色的云变灰，Cloudflare默认开启CDN。

  • 重载Nginx配置

至此没出意外的话，不使用魔法，访问你的网站你也能看到blogger了。不过速度应该还是很慢，按F12我们会发现在控制台有很多error，那就是接下来要做的事情。

二、 修改主题模版

修改主题模版教程有很多，简单说一下我的修改方案，我的主题是从https://btemplates.com/下载的，修改流程相差不多。

  • 首先是屏蔽blogger自动加载项

在内容开头，找到<html…>标签，然后再后面增添

b:css='false'

如下图所示

<html b:css='false' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

然后CTRL-F，搜索

</head>

，将这一行替换为

&lt;/head&gt;&lt;!--</head>--&gt;

继续搜索

</body>

，将这一行替换为

&lt;!--</body>--&gt;&lt;/body&gt;
  • 然后将网站图标改为国内的COS

在< head >标签下加入以下代码

<link href='https://example.com' rel='shortcut icon' type='image/x-icon'/>

其中https://example.com替换为你的COS地址

  • 最后删除Quickedit按钮

屏蔽自动加载项后，无论是以博主身份访问还是访客身份，小扳手都会出现，除了影响美观还有这个功能并不实用，所以我们把他屏蔽掉。

找到

<b:include name='quickedit'/>

把他注释或者删除掉。注：有多个，需要都操作了

完成后我们浏览器打开博客，F12查看还有没有错误，有的话继续修改，没有的话就像我一样，完成了。

总结

通过这几天的折腾，也发现了blogger并非最好的选择，因为一堵墙，我们要修改的东西很多，不过能够完成下来还是非常开心的。

还有几项要继续修改的，比如评论系统，可以替换成Gitalk或者Disqus，不过目前我的需求不大，如需互动可以通过邮件联系；第二个是使用反代可以开pagespeed 和brotli压缩，根据Chief大佬所讲，这个可以使网页更小，加载速度更快；第三个是继续修改一些blogger自带的内容，比如Atom的订阅，文章后面的邮箱等图标，这些本篇都没提到，搜索一下就可以找到。

0 评论:

发表评论