为博客配置 CDN

gomkiri 发布于 2025-11-09 67 次阅读


AI 摘要

1M带宽太慢?手把手教你配置CDN加速博客静态资源!从Caddy配置到跨域问题解决,完整记录踩坑过程。附详细代码示例,让你的博客访问速度飞起来!

可以通过域名访问之后就开始注意网页的访问质量了,然后就受不了火山引擎这个 1M 的带宽了,所以决定配置一个 CDN 来为图片、css 等静态资源加速,然后记录一下配置过程。

在开始之前先特别鸣谢一下 Frex 大佬,直接为我提供了自动化证书和 CDN 源。

据介绍,由于 CDN 解析的解析对象是一个 CNAME ,所以不能使用 caddy 的自动证书管理,需要在 Caddyfile 中自定义证书文件。于是我的 Caddyfile 变成了这样:

blog.gomkiri.top {
        tls /var/www/ssl/certbundle.pem /var/www/ssl/privkey.pem
        reverse_proxy localhost:3307
}

cdn-wp.gomkiri.top {
        tls /var/www/ssl/certbundle.pem /var/www/ssl/privkey.pem

        handle_path /wp-content/* {
                file_server {
                        root /root/blog/wordpress/wp-content
                }
                encode gzip
        }
        handle_path /wp-includes/* {
                file_server {
                        root /root/blog/wordpress/wp-includes
                }
                encode gzip
        }
        handle {
                respond "Not Found" 404
        }
}
Plaintext

其中的 tls 就是自定义证书文件的位置,而cdn-wp.gomkiri.top是CDN解析的地址。

然后为cdn-wp.gomkiri.top添加 CDN 服务商执行 CNAME 解析,完成 CDN 配置。

最后回到 WP 的后台管理,下载一个叫做 CDN Enabler 的插件并完成简单的配置就算完成了。

吗?当我不小心打开登录页面后,发现并没有加载 css 样式,进入开发者模式查看,发现是 wordpress/wp_admin 这个路径下的请求也走了 CDN,但是我们压根没有给他配代理(也不想让他走 CDN),随后我在 CDN Enabler 的配置页看到了一栏叫做 CDN 排除,将 wp_admin 加入其中后,问题解决。

本来到这里就可以了,但是我实际去访问博客却发现有些图片资源依然没有走 CDN,这很大概率是我博客主题相关的问题,但是我还是要记录一下整个过程和如何解决的。

首先我在博客中找到了一个图片CDN地址的选项

配置完成后发现加载依然很慢,去开发者模式查看,发现浏览器先报了两次 CORS 错误才完成请求,原来是发生了跨域问题,回到 Caddyfile ,添加了下面部分

cdn-wp.gomkiri.top {
        header {
                Access-Control-Allow-Origin *
                Access-Control-Allow-Methods "GET, OPTIONS"
                Access-Control-Allow-Headers *
            }
}
Plaintext

并在 CDN 服务商添加相关权限,问题成功得到了解决!1M的带宽也不会非常影响访问体验了!