WordPress on Foam 的博客

用 CDN 加速 WordPress

Sun, 21 Nov 2021 00:46:45 +0800

写在前面

如果你觉得这篇文章对你有所帮助，并且想要使用又拍云，可以通过我这个 -> 链接 <- 注册，你我都能得到 不要白不要的 奖励。（注意，又拍云绑定的域名需要是备案过的）
如果你已经有 CDN ，可以跳过又拍云部分，直接看插件配置部分。
本篇文章对所有 CDN 都适用，这里以又拍云为例子作说明

又拍云更香？

上周在 V 站发了个帖，安利了我写的一个 Alfred 插件，该插件可以方便地将图片上传到七牛云，顺便向大家安利了七牛。马上有 V 友跳出来说又拍云更香，免费流量比七牛云多 5 G，HTTPs CDN 流量也是算在免费套餐里边的。

趁着周末有点时间，去白嫖下又拍云。

又拍云联盟

没错。小标题是又拍云对开发者的白嫖活动的名字。我们加入这个联盟就能获得：

10 GB 免费存储
每个月 15 GB 免费 CDN 流量（HTTP[s] 都可以）

流程很简单。注册账号、在你的网站页脚添加又拍云的链接；填申请表。我是周六申请的，1个小时左右就收到了审核通过的通知。

Update(2022/12/02): 大家要留意一年的到期时间，快到期的时候去联盟页面申请续期。否则欠费就不好了，我就迟了几天，欠费 2 分钱 :)

审核通过后，会发放一年份的代金券给你，到期再次申请即可。

CDN 配置

系统设计

不想看我啰嗦的同学，可以跳过系统设计这部分。配置部分以又拍云为例子叙述

从上图的设计可以看出，我把文件分为三类：

动态接口/文件：例如 WordPress 中的 php 接口。这类请求是动态的，不适合放到 CDN 缓存中（一直回源，没有意义）。域名使用 foamzou.com ，该域名解析到我的服务器里，执行 WordPress 程序
适合短期缓存的文件：指的是短时间不会发生变化，但仍然有可能变化的文件。例如 WordPress 的系统库文件
- 域名使用：cdn.foamzou.com，该域名做个 cname 解析到 CDN 服务
- 当 CDN 未命中资源，则回源到 cdn.foamzou.com ( IP: 回源设置的 IP )
适合长期缓存的文件：指的是几乎不会发生变化的资源文件。例如图片、第三方 css、js资源
- 域名配置同 2
- 给 CDN 配置一个对象存储桶
  - 配置指定的路径从桶里取资源，没取到再回源到服务器
  - 从服务器取到数据，存储到桶里
- 好处有 2 点
  1. 减少回源次数（毕竟对于同一个文件只会回源 1 次），节省服务器带宽
  2. 回源速度快（我在又拍云创建了个对象存储桶，CDN 和存储在同一个区域，速度当然比跨个公网访问我服务器快）

创建 CDN 服务

到创建页面：

优化 WordPress emoji (s.w.org) 速度

Sat, 20 Nov 2021 16:28:50 +0800

怎么可以这么慢

今天给我的博客加了 CDN ，绝大部分文件都很快被加载。唯独有一片 emoji 文件列表响应在 400+ ms，怎么能忍。

官方的 emoji built-in 方案成了负担

貌似从 4.2 版本开始，WordPress 官方提供 emoji 的自支持方案。详细可查看《WordPress 4.2 Emoji Performance》，这篇文章分析了官方方案的原理和弊端。

WordPress 的 js 脚本会把 html 中的 emoji code 替换成 WordPress 站点的 emoji 图片。目的应该是为了让那些尚不支持 emoji 的网站能够正常展示 emoji。

就我看来，这更多是自作多情了，毕竟现代浏览器还有多少是不支持 emoji 的？另外，这个方案是一刀切的，不管当前浏览器是否支持 emoji 都自动 fallback 到它的 build-in 方案。

这给浏览器带来了额外的网络请求，增大了网页的加载速率。在一些无法很好访问 s.w.org 站点的地区，更是直接被暴击。

不清楚 WordPress 后面的版本是否有做优化，anyway，让我们来干掉它吧。

解决方案

方案一：直接禁用（推荐）

本博客采用了这个方案，因为我不需要照顾不支持 emoji 的浏览器用户。

下载这个插件（disable-emojis）, 上传到 /wp-content/plugins/ 目录下，解压。到你的 plugin 管理后台，启用它即可。

世界瞬间清爽了，浏览器直接渲染 emoji ，再也不需要另外去请求网络获取图片文件。

方案二：替换为本地文件

如果你的站点希望照顾到不支持 emoji 的浏览器。

使用CloudFlare/百度云加速做免费SSL

Wed, 30 Sep 2020 20:37:41 +0800

2021-11-14更新：百度云加速过期了，CDN 也直接用七牛云的吧。有兴趣的朋友可以看这篇文章《用七牛云作图床并配置 SSL》

2020-11-03更新：已将cdn部署到百度云加速服务。国内使用Cloudflare确实不行，最近看到百度云加速有免费套餐，个人博客来说完全够用了。步骤不复杂，就不详细描述了。步骤大概为：

需要域名备案
在百度云加速实名认证
添加网站时，选择CNAME接入方式。（官方推荐的是NS方式，这样可以全称托管，但我目前只希望托管我的cdn域名）
证书管理-证书申请可以免费申请ssl证书
安全功能-HTTPS，选择半程加密。这样源站可以不支持SSL

以下为原文：

注意一下，由于众所周知的原因，在国内访问CloudFlare会很慢，我只是用于个人博客的部分图片使用，所以容忍度会比较高。有高要求的同学，不建议在国内使用。

对于经常科学上网，尤其是自己搭建科学上网的同学来说，CloudFlare一定再熟悉不过了。经常有同学将它套在国外机子上，用来加速流量。因为CF本身就是一个CDN服务，可以用于加速各种服务。

今天我选择用它做我图床的cdn服务。

背景

起因是这样的，这两天发现我博客的背景图加载不出来了，查看网络请求后发现我的图床域名https://cdn.foamzou.com/legacy被强制使用https发起请求了。这是因为我的html页面是https的，chrome很不喜欢https页面包含了http请求，认为这很不安全。所以它强制在发起请求的时候在http header加了upgrade-insecure-requests: 1。该头部会告知服务端，客户端支持将http升级为https。在接下来的http请求中，浏览器会将其替换为https再发起请求。(但我将upgrade-insecure-requests: 1改为0，还是会替换为https，不确定是不是该头部的原因，也可能是chrome最近自升级加的特性。其它浏览器例如Safari就正常访问)

Ok，已经确定是chrome新版本的特性，将混合内容（mixed content）的http改写为https了。在2019年10月份，google就通过博客发布了chrome关于内容安全的更新时间表：
- v79 [2019年12月发布到稳定渠道]：将mixed的脚本文件、iframe升级到https
- v80 [2020年1月发布到试用渠道]：将mixed的音视频文件升级到https。虽然允许mixed的图片文件加载，但该站点会在地址栏被标记不安全
- v81 [2020年2月发布到试用渠道]：将mixed的图片文件升级到https
按计划是2月份发布到early release渠道，估计也是前段时间才被更新到稳定渠道，然后自更新导致我的图片挂掉

问题来了，我的图床域名并不支持https，导致ssl握手失败，我的图裂开了！如果要支持的话，我需要在七牛支付一定的费用（https流量没有免费额度），而且需要配置一个ssl证书，可以购买（几千块一年，好贵），也可以上传自定义证书（也略麻烦）。

突然想起我可以把CF套在域名上，CF有免费套餐，一般的需求足够了，ssl证书还不用自己配置。

开干

说干就干，打开官网，没有账号的话注册一个。

添加站点

注意，这里只能填写根域，不支持单独加速子域名。但我只想加速某个子域名怎么办？没事，后面步骤可以配置。

添加站点

选择套餐

选择免费的就可以啦

选择套餐

修改代理状态

选择完套餐后，CF会将你域名的解析记录带出来，如下图

dns记录

在代理状态那列点击小图标可以切换状态。现在有两个状态可以切换，已代理和仅限DNS。注意，对于你不希望走CF的域名，请设置为仅限DNS，这样CF只会帮你将域名解析到你的源ip，而代理则解析到CDN节点，再帮你回源。

由于CF在国内的网络情况并没有阿里云这些本地的厂商好，所以博客域名我没有走CF，只是代理了file.zoufeng.net

好，点击继续。

修改域名的DNS服务器

这一步需要到你的域名管理台(在哪买的域名就去哪)，将原来的DNS服务器删除，换成CF自己的。完成之后点击蓝色按钮。

设置ssl

点击SSL/TLS按钮，将选项修改为灵活，这样CF节点支持ssl，而源服务器不需要ssl。完全的话，源服务器就需要支持ssl了。我的七牛图床域名不支持ssl，所以选择了灵活。这也是本篇文章的最开始的目的。

等待生效

等吧。修改DNS服务器那一步耗费的时间可能会长一些。你可以通过ping命令检查是否已经解析到CF的ip了。

其它

你可能看到上一张图有很多菜单：缓存、防火墙、worker等。CF挺多功能的，有兴趣的话，注册一个玩玩吧。worker就是serverless那东西，类似AWS CloudFront的lambda@edge

10分钟内跨账号迁移阿里云ECS实例

Sat, 04 Jan 2020 16:47:09 +0800

今天在阿里云购买了一个便宜的实例，打算把旧实例迁移到新实例。步骤很简单。

旧实例创建自定义镜像

控制台找到ECS实例，点击创建自定义镜像。镜像名称随意填，反正是一次性的。因为我的实例只有系统盘，所以只有默认资源组可以选，如果你有别的盘，可能可以选择多个。

共享自定义镜像（在同一账号内迁移的跳过这一步）

提交创建后，在镜像菜单可以看到提交的镜像，进度在不断累加，直至100%。等待进度的过程中，我们可以设置镜像共享了。如下图，在你的镜像菜单点击更多-共享镜像。然后输入新实例所在的账号的UID，然后点击共享镜像。 UID在这里：

同一账号不同区域

需要复制镜像到目标区域

在新实例创建系统时选择共享镜像(同一账号内迁移选择自定义镜像)

等待上面镜像创建进度到100%后。就可以在新实例创建镜像了。如果已经购买了实例，那么需要先停止新实例，然后点击菜单更换操作系统。会弹出镜像选择页面。若还在创建中，在镜像选择页面直接选择即可

迁移网络安全组

旧实例：网络与安全-安全组，找到你实例所在的安全组。点进去，右上角有导出按钮，导出文件。新实例：也是对应的页面，点击导入。

更换域名解析

这个就很简单了，将原域名全部解析到新ip即可。

观察流量

确认旧机器没有流量就可以下掉了

WordPress固定链接的问题

Wed, 10 Dec 2014 20:19:36 +0800

我安装的frontopen2主题，是有为文章添加一个浏览量字段的。今天突然发现，我发表的文章浏览量全都是0。这使我很郁闷，就算只有我一个人访问，也不应该是0。

我找到了frontopen2对应地方的代码，没发现问题。数据库中看，每发表一篇文章，都会创建一条浏览量的记录，可见INSERT命令是可以执行的，那么UPDATE为什么不行呢，百思不得其解后，突然意识到如果php没有获取到文章id是没有办法更新数据的。

我果断打开wp的后台管理，此时我的固定链接样式是index.php/archives/%post_id%，将其改成默认的/?p=123后。浏览量可以正常地加1 了。看来是php没有获取到URL中的post_id。

再然后，我将样式改为/archives/%post_id%。点击文章时就跳转不过去了。

是的，正是httpd.conf文件中，Directory 节点中的 AllowOverride为None。

我们只要将其改为All就好了。

这时，无论固定链接的样式改成什么，都可以访问，且浏览量能够正常地+1啦~~

ps：修改 <Directory “/var/www/html”> 下的AllowOverride就好。

<Directory “/var/www/icons”> <Directory “/var/www/cgi-bin”> 这些就没有必要改了。

wp-admin使用谷歌字体导致加载慢的问题

Wed, 03 Dec 2014 11:24:54 +0800

google被墙后，那些直接调用Google服务（比如Font）的网站就悲催了，由于访问google服务文件超时，打开个网页都要等个10+秒、

对此类网页，一般等得差不多了，直接点击**停止加载此页。**少了这google font也不影响。但每次都点击停止加载还是很纠结的。

wp-admin下的文件很遗憾，都加载了google font，对此，用以下方法解决：

1、修改源码

通过浏览器开发工具可以看到是哪个文件超时了。打开它，将连接到google的代码注释掉。

2、插件实现

Disable Google Fonts Remove Open Sans font Link from WP

我使用的是前者，安装插件这种方法简单，不熟悉PHP的小伙伴用这种方法就好。

解决WordPress安装插件需要提供FTP账号密码和timthumb.php的访问权限问题

Wed, 03 Dec 2014 11:24:20 +0800

在windows和虚拟主机都是没有问题的。虚拟主机上，尽管也是linux，但主机商会把权限给用户，所以标题两个问题都没有冒出来。

昨晚挂到VPS上，就出现问题了:

1、安装插件需要提供FTP密码，这个不仅输入麻烦，丢包延迟严重的时候，FTP都无法Connect。

2、我使用的是frontopen2的主题(真心不错)，文章如果有图片，列表就图裂了。原因是timthumb.php没有访问主题目录下的cache及里面的index.html权限。

解决问题1，可以把该网站的所有者权限设置为web服务器角色。(需要root权限)

chown -R apache /var/www/html

BTW：我的CentOS的web服务器角色，名字是apache、其他系统也可能是www之类的。这里我的网站目录是html，可根据你的实际目录填写

解决问题2，将cache目录和子文件的权限设置为可读写执行

chmod -R 777 /var/www/html/wp-content/themes/你的主题/cache

至此以上问题解决