Introduction⌗

Previously, I used Clarity to collect user behavior data on my blog website. When reviewing user behavior recently, I found that many people were seeing incompletely loaded pages. The reason for this situation might be that Vercel is a foreign service provider, and the access speed in China is not ideal.

I had previously directly CNAME’d my blog domain to Vercel’s domain, and the access speed abroad was quite fast.

CDN⌗

Since the access speed was slow, I decided to use a CDN for global acceleration. After all, my small site doesn’t have high UV and PV, so it wouldn’t cost much per month.

So I researched Alibaba Cloud, Qiniu Cloud, Tencent Cloud, etc., all of which required enterprise qualifications to apply for free HTTPS certificates. With a “let’s try it” mentality, I registered with Upyun and found that they allow free use of Let’s Encrypt certificates.

The main configurations on Upyun are actually just the accelerated domain, source management, and HTTPS settings.

Accelerated Domain⌗

Create a service in Upyun’s CDN service, then add the domain you want to accelerate in the domain management settings. This will generate a CNAME domain, and you need to CNAME your domain to this Upyun-generated domain.

Source Management⌗

For the original site settings, just set the protocol, domain name, and port number of the original site. As for the source site certificate verification setting, it can be enabled or not.

The setting of the source Host is very important. You must fill in the domain generated for you on Vercel, otherwise when the request reaches Vercel from the CDN, it will prompt that the site cannot be found.

HTTPS Settings⌗

Apply for a free Let’s Encrypt single-domain certificate in Upyun’s SSL certificate service. Although wildcard certificates are free, the automatic renewal service costs 999, which is a bit of a trap.

Then you can find the Let’s Encrypt single-domain certificate you just applied for in the CDN, and use this certificate to enable HTTPS access.

Google Analytics⌗

To track website traffic, I used Google Analytics, which now needs to be upgraded to Analytics 4. However, this built-in template requires a newer version of Hugo to support it.

Vercel’s default Hugo version is 0.56.*, which means that although I configured the Google Tag ID, Google Analytics still couldn’t get the data.

After browsing articles online, I found that you can set the expected Hugo version through the HUGO_VERSION in Vercel’s project environment variables.

Code Block Optimization⌗

Although Hugo’s built-in Markdown code highlighting is quite good, if multiple lines of Shell commands and output results are written in one Code block, it’s difficult to distinguish which line is a command and which line is output.

So I found the open-source project Prism.js and discovered that they can highly customize the rendering style of Code blocks.

Then, combined with Hugo’s Shortcodes template functionality, I achieved the following effect.

Source code:

< 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 >

Effect:

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)# Verify if the switch was successful
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…