前言

之前我通过 Clarity 收集我的博客网站的用户行为,最近查看用户行为的时候,我发现很多人看到的页面是加载不完整的。导致这种情况的原因可能是 Vercel 是国外的服务商,在国内访问速度并不是很理想。

我之前是直接将我的博客域名 CNAME 到 Vercel 的域名的,在国外访问速度还是挺快的。

CDN

既然访问访问速度满,那么我就通过 CDN 来进行全球加速,毕竟小站的 UV 和 PV 不高,一个月也花不了几个钱。

于是乎我调研了阿里云、七牛云、腾讯云等,都需要企业资质才能申请 HTTPS 免费证书,抱着试一试的心理我又注册了又拍云,发现他们可以免费使用 Let’s Encrypt 的证书。

又拍云上主要的配置其实就是加速域名,回源管理还有 HTTPS 设置。

加速域名

在又拍云的 CDN 服务中创建一个服务,然后在域名管理设置中添加要加速的域名,会产生一个 CNAME 的域名,你需要将你的域名 CNAME 到又拍云生成的这个域名上。

回源管理

原站设置,设置上原站的协议,域名和端口号就可以了,至于源站证书校验的设置可开可不开。

回源 Host 的设置,这个非常重要,必须填写 Vercel 上为你生成的域名,否则当请求从 CDN 到达 Vercel 时会提示找不到站点。

HTTPS 设置

在又拍云的 SSL 证书服务中申购一个免费的 Let’s Encrypt 单域名证书,泛域名证书虽然免费,但是自动续费服务需要 999,这个有点坑。

然后就可以在 CDN 里发现刚申请到的 Let’s Encrypt 单域名证书了,使用这个证书开启 HTTPS 访问就可以了。

Google Analytics

为了统计网站流量我这里使用了 Google 的 Analytics,现在需要升级到 Analytics 4,但是这个内置的模板需要较新的 Hugo 才能支持。

而 Vercel 默认的是 Hugo 是 0.56.* 的版本,导致虽然配置了 Google Tag ID,但是 Google Analytics 任然无法获取数据。

经过翻阅网上的文章,发现可以在 Vercel 的项目环境变量中通过 HUGO_VERSION 设置预期的 Hugo 版本。

Vercel Project Environment Variables

代码块的优化

Hugo 自带的 Markdown 代码高亮虽然也挺好,但是如果是多行 Shell 命令和输出结果写在一个 Code block 中的话,很难区分哪一行是命令,哪一行是输出。

于是我找到了 Prism.js 这个开源项目,发现他们可以高度自定义 Code block 的渲染样式。

然后结合 Hugo 的 Shortcodes template 功能,实现如下的效果。

源码:

< prismjs lang=bash line-numbers=true command-line=true prompt=$ filter-output=(x) >
alternatives --config docker-compose
(x)
(x)There are 2 programs which provide 'docker-compose'.
(x)
(x)  Selection    Command
(x)-----------------------------------------------
(x)   1           /usr/local/bin/docker-compose-v1
(x)*+ 2           /usr/local/bin/compose-switch
(x)
(x)Enter to keep the current selection[+], or type selection number: 1
(x)# 验证是否切换成功
docker-compose version
(x)docker-compose version 1.29.2, build 5becea4c
(x)docker-py version: 5.0.0
(x)CPython version: 3.7.10
(x)OpenSSL version: OpenSSL 1.1.0l  10 Sep 2019
< /prismjs >

效果:

alternatives --config docker-compose
(x)
(x)There are 2 programs which provide 'docker-compose'.
(x)
(x)  Selection    Command
(x)-----------------------------------------------
(x)   1           /usr/local/bin/docker-compose-v1
(x)*+ 2           /usr/local/bin/compose-switch
(x)
(x)Enter to keep the current selection[+], or type selection number: 1
(x)# 验证是否切换成功
docker-compose version
(x)docker-compose version 1.29.2, build 5becea4c
(x)docker-py version: 5.0.0
(x)CPython version: 3.7.10
(x)OpenSSL version: OpenSSL 1.1.0l  10 Sep 2019

I hope this is helpful, Happy hacking…