前言⌗

之前我通过 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 版本。

代码块的优化⌗

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…