緣起
站點內容一直存放在 GitHub 倉庫，並且先後以 GitHub Pages 等加載，六年前購買域名後又採用 Cloudflare 的加速方案。這些都不需要爲流量付費，大略算「白嫖」方案吧。站點如此運行了有七年左右的光景。
最近使用 Quarto 整理課本資料、課程頁面與演示文檔，初步將頁面框架搭建起來後，照例放到站點倉庫加載頁面。有一天在查看頁面加載效果時，手機沒有翻牆，發覺頁面加載速度很慢，給人的感覺似乎是互聯網上古時期加載圖片的「龜速」，這對習慣了當前寬帶網速的人而言，是難以忍受的。
於是花了幾天尋找免費的提速方案，嘗試了各種中間代理加速方案，也試圖將一些前端公共庫鏈接調整爲境內鏈接，但是這些對頁面加載速度的提升似乎並不明顯。要想有良好的瀏覽體驗，翻牆後瀏覽頁面依然是最佳選擇。考量打工可能的需要，折騰一個輕量服務器，每月固定花幾十塊錢，似乎也可以承受。於是便有了目前這個月的體驗。
「白嫖」之得失
頁面字體指定
因爲「白嫖」，沒有流量焦慮，加之極爲偏愛漢字舊字形，所以可以爲站點頁面漢字指定特定的網頁字體樣式。運營七年來，先後製作、使用過好幾種 .woff2 字體文件，以 CSS 引用方式嵌入網頁。指定特定的字體樣式，大大提升了中文頁面的閱讀體驗。這也是七年前放棄公眾號寫作的主要原因之一，公眾號的樣式定製、數學公式渲染、後臺排版等體驗，當時都很「惡劣」。
頁面加載速度
頁面內容主要是文字，圖片與視頻幾乎都是外鏈插入，所以在翻牆的情況下，外網訪問頁面的加載速度也可以做到「秒級」，絕大多數場景下，在 2~5 秒之內都可以正常打開頁面並加載出指定的字體樣式。早期使用 .org 域名時，站點文章內容還引來一些同好發郵件來討論相關話題。後來因爲備案等要求，捨棄了原來的域名，全面更換爲目前的 .ren 域名，或許是境內搜索引擎不再收錄這種域名下的內容吧，境內訪問量大大減少，自己也不再關注推文的反響如何了。權當此處是在禁忌話題日多的時代，取代各種社交媒體而記錄自己自由發言的平臺。
付費方案
境內不少雲服務器提供商都有類似的產品，大商家似乎也都提供了輕量應用服務器。咱這點東西，既沒多少關注度，又毫無經營的心思，所以「輕量」似乎都顯得「奢侈」了，當我配置完畢，就有「沒必要」的感慨。域名是在阿里雲購買的，順理成章地也在阿里雲購買了輕量應用服務。
先後註冊、使用過兩個域名，曾經都嘗試過提交材料到相應機關「備案」，但每次折騰的過程中，都覺得過於繁瑣，交易成本不低，虛秏精力，所以一直沒心思備案域名。域名不備案，無法使用境內的服務器部署網站。經查詢網友經歷，發覺購買香港服務器大致可以平衡免備案與加載速度，於是購買了一個月時長的服務，折騰體驗一番，再決定是否長期採用此辦法部署站點。因此有必要記錄一下初次折騰服務器部署網站的摸索，以備下次換服務類型重新折騰時直接複製或借鑑。
服務器配置
雖然使用 Linux 作爲唯一的辦公系統有十年了，但從未涉足服務器領域，對此可謂一竅不通，全靠搜索引擎尋找網友經驗與最新最強大的助手 ChatGPT，纔得以在一天之內折騰完畢。
工具安裝
有幾種網站部署工具可用，經粗略了解，簡單的靜態圖文站點使用 nginx 的較多。於是參考《一篇教你博客如何部署到自己的服务器》這篇文章，照葫蘆畫瓢，很快便設置好基本的框架。
服務器選擇的系統是 CentOS 9，通過網頁登入服務器後，在命令界面安裝 Nginx 流程如下：
1
2
3
4
5
6
7
8
|
# 安裝 Nginx（有時需要先更新系統？）
yum install -y nginx
# 啓用 Nginx
systemctl start nginx
# 系統啓動時同時啓動 Nginx
systemctl enable nginx
|
此時在瀏覽器輸入購買服務器時得到的 IP，就能刷出 Nginx 提示頁面了。
創建站點內容目錄
創建一個原始的 index.html 文檔並放到 /home/www/website/ 目錄下：
1
2
3
4
5
6
7
8
9
10
11
|
# 創建目錄
mkdir -p /home/www/website
# 切換路徑到新建的目錄
cd /home/www/website
# 創建主頁文檔
touch index.html
# 寫入測試內容
echo '<!doctype html><html><head><meta charset="utf-8"><title>Hello World! 世界你好！</title></head><body>Hello World!</body></html>' > index.html
|
修改 nginx 配置文檔
不同的操作系統中，Nginx 的安裝路徑或許不同，需要根據實際情況找到對應的配置文檔：
1
2
3
4
5
|
# 進入配置文檔所在的目錄
cd /etc/nginx
# 修改相關內容
emacs nginx.conf
|
多數經驗文檔都是用 vim nginx.conf 編輯配置文檔，自己也使用 Vim，或許是對網頁進入服務器系統的操作不熟悉，用 Vim 編輯好後，其一直停留在 Insert 模式，無法切換模式進而保存修改。所以在此之前先安裝了更熟悉的 Emacs 文本編輯器。Emacs 打開文檔後在 location / {} 花括號內填入下列內容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# 添加下面四行內容
location / {
root /home/www/website/;
index index.html;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
|
保存修改，退出 Emacs 後使用 systemctl reload nginx 重新加載 Nginx 以使新的配置生效。打開瀏覽器輸入服務器 IP 就能看到主頁顯示了剛剛在 index.html 文檔中編寫的文字內容。
至此，服務器上的 Nginx 配置完畢，剩下的就是將本地網頁文檔上傳到剛剛設置的站點路徑之內。這有好幾種辦法，有的是直接用 SSH 直接將本地網頁文檔推送到服務器對應目錄。自己的網頁使用的生成工具、評論插件等都較依賴 GitHub 倉庫，所以自己參考的思路是將已有的存放 GitHub Pages 的倉庫同步推送到服務器上。以下的辦法主要參考 GitHub Actions 的官方文檔與一些網友記載的折騰過程。
GitHub 倉庫同步推送
創建 workflow 文檔
在服務器配置完密碼或密鑰後，在存放網頁的 GitHub 倉庫的 Setting > Security > Secrets and variables > Actions 中添加 New repository secret 以便 GitHub Actions 引用。官方文檔較爲詳細，照例按部就班即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
name: SSH Upload to Alibaba Cloud
on:
push:
branches:
- master
jobs:
upload:
runs-on: ubuntu-latest
steps:
- name: Check Out
uses: actions/checkout@v2
# 同步倉庫前先用 SHH 進入服務器，刪除原來的網頁資料
- name: SSH Remote Commands
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.ALIYUN_REMOTE_HOST }} # 服務器提供的 IP 地址
username: ${{ secrets.ALIYUN_REMOTE_USER }} # 登錄服務器的用戶名
password: ${{ secrets.ALIYUN_REMOTE_PASSWORD }} # 登錄服務器的密碼
# key: ${{ secrets.ALIYUN_SERVER_SSH_KEY }} # 登錄服務器的密鑰（不需要與密碼同時設置）
script: bash /root/blog_del.sh # 刪除舊網頁內容的腳本
# 用SCP將最新的文件同步推送服務器指定目錄
- name: SCP Files to aliyun
uses: appleboy/scp-action@master
with:
host: ${{ secrets.ALIYUN_REMOTE_HOST }}
username: ${{ secrets.ALIYUN_REMOTE_USER }}
password: ${{ secrets.ALIYUN_REMOTE_PASSWORD }}
# key: ${{ secrets.ALIYUN_SERVER_SSH_KEY }}
port: 22
source: "./*" # 將當前倉庫文件全部推送
target: ${{ secrets.ALIYUN_PATH }} # 推送到服務器的目錄
|
其中的 ALIYUN_REMOTE_HOST 等是剛剛在倉庫 Setting > Security > Secrets and variables > Actions 中添加的用以登錄服務器的密碼等信息。
刪除服務器上舊的網頁
上述 YAML 中的 blog_del.sh 是在服務器系統根目錄添加的腳本文檔，用於在同步新的網頁內容前，刪除舊的全部網頁內容：
1
2
3
4
5
|
if [ ! -d "/home/www/website" ];then
echo "文件夾不存在"
else
rm -rf /home/www/website
fi
|
這樣就可以按原有方案，仍然只需將本地網頁文檔 git 推送到 GitHub 倉庫，其餘工作都讓 GitHub 按設定的工作流文件自動將倉庫內容同步到阿里雲服務器。
遇事多問 ChatGPT
自己寫好 GitHub Actions 文檔後，倉庫一直沒有觸發自動推動流程。初次折騰，以爲是自己文檔寫得不對，找了很多網友的配置案例參照比對，瞎瞎地摸索了很久，最後近乎通宵達旦都沒解決。一覺醒來之後，決定問問 ChatGPT 爲什麼 GitHub Actions 配置沒有觸發相應流程。ChatGPT 列出了幾條常見的原因，第一條就說可能是工作流文檔路徑不正確。回頭檢查，果然如其所言。根據官方文檔說法，「GitHub Actions 採用 YAML 格式的配置文件叫做 workflow 文件，存放在代碼倉庫的 .github/workflows 目錄」，自己將 workflows 文件夾的名字少寫了最後的字母 s，導致其無法找到配置文件！
看來有了 ChatGPT 後，遇事不決首先問谷歌的習慣要改一改，與其自己找案例摸索，不如首先看看 ChatGPT 的建議是什麼。
域名解析與 HTTPS
將網頁文檔推送到服務器後，只能通過服務器 IP 地址打開站點主頁。要正常運行站點，還需要解析域名，網上案例很多，此處不再記載域名解析辦法。阿里雲官方的說明文檔也很詳細，甚至顯得過於「貼心」，以致用戶眼花繚亂，找不到最直接的信息。
域名解析後可以使用所購買的域名打開網頁了，但似乎還只能用 http 登錄網頁，爲此還得使用 https 的數字證書服務。域名設置開啓 SSL 服務後，可以選用免費的 SSL 證書服務，取得證書後參照官方文檔配置即可。參考這篇文章，在服務器的 nginx 配置文檔添加部分內容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
# ……
server {
listen 443 ssl;
#配置HTTPS的默认访问端口为443。
#如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
#如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
server_name yourdomain; #需要将yourdomain替换成证书绑定的域名。
# root html;
# index index.html index.htm;
/etc/nginx/conf.d/cert/xxx.pem; #在相應路徑創建xxx.pem並複製ssl證書.pem文檔中的內容到其中。
/etc/nginx/conf.d/cert/xxx.key; #在相應路徑創建xxx.key並複製ssl證書.key文檔中的內容到其中。
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
#表示使用的加密套件的类型。
ssl_protocols TLSv1.3; #表示使用的TLS协议的类型。
ssl_prefer_server_ciphers on;
location / {
# 此前設置的網頁存放目錄
}
# ……
}
}
# HTTP 定向到 HTTPS
server {
listen 80;
server_name yourdomain;
rewrite ^(.*)$ https://$host$1 permanent; #将所有HTTP请求通过rewrite指令重定向到HTTPS。
}
|
配置完畢後運行 nginx -t 命令檢驗配置有無報錯信息，如成功配置則重新加載配置文件或重新啓動 nginx 即可使用 https 訪問站點頁面。
網頁漢字字體取捨
全部配置完畢，正常訪問網站後，便開始觀察後臺系統資源與流量使用情況。原來給不同的子欄目或子站點都指定加載了不同的字體，導致流量消耗極快。配置完畢後，僅僅打開幾個網頁查看一下版式，就消耗了近 1G 的流量，其中主要是加載漢字字體消耗的。
流量焦慮
目前的套餐每月有 2T 的流量，按過去的經驗，本站並沒有多少訪問量，這個套餐應該是夠用的。考慮到折騰了圖書、課程、課件子欄目，勢必要涉及大量的中文內容，如用於輔助課程敎學也會產生較多的瀏覽，到時目前的套餐恐怕就未必敷用了。很快便產生了流量焦慮：沒有訪問並不憂傷，訪問量多了反倒心生疑慮。
字體樣式
這幾天權衡再三，心想一個月後不管還用不用商用服務器與否，哪怕回歸原有的「白嫖」方案，爲了加快境內訪問的頁面加載速度，也有必要優化漢字字體加載方案。
自己偏愛舊字形，怎樣在不指定自製的 .woff2 字體的同時又能使網頁漢字字體使用舊字形風格呢？截至到 2023 年 4 月的辦法是使用 Google Fonts 網頁字體。具體的方案是拉丁、西里爾、希臘字母等主要使用 Noto Sans 無襯線字型，對應的斜體字母樣式，爲考慮美觀與視覺區分度，則選取一種對西里爾、希臘文支持較好的襯線字型如 stix-two-text. 漢字則以 Noto Sans Korean 爲主，其字體筆畫大致較接近舊字型吧，差強人意，勉強可用。因 Noto Sans Korean 的漢字偶有缺字，最好用同系列的 Noto Sans Hong Kong 與 Noto Sans Simplified Chinese 作爲候補字體。網頁的 CSS 文檔可以添加如下，Google Fonts 鏈接可以參考一些方案更改爲境內可用的替換鏈接：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
@font-face {
font-family: 'Noto Sans'; //regular 字重 400
font-style: normal;
font-weight: normal;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-regular.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-regular.woff') format('woff');
}
@font-face {
font-family: 'Noto Sans'; //設置默認的斜體樣式（字重可改）
font-style: italic;
font-weight: normal;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-600italic.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-600italic.woff') format('woff2');
}
@font-face {
font-family: 'Noto Sans'; //bold 700（字重可以改爲600或更粗的800）
font-style: normal;
font-weight: bold;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-700.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/noto-sans/noto-sans-700.woff') format('woff');
}
@font-face {
font-family: 'Noto Sans'; //設置默認的粗斜體樣式（字重可改）
font-style: italic;
font-weight: bold;
font-display: swap;
src: url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-700italic.woff2') format('woff2'),
url('https://lib.baomitu.com/fonts/stix-two-text/stix-two-text-700italic.woff') format('woff2');
}
//Noto Sans KR HK SC : fonts.loli.net 和 fonts.geekzu.org 加载思源黑体均能在国内达到与 Google Fonts 相近的速度
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;700&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+HK:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;700&display=swap');
@import url('https://fonts.loli.net/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
|
然後在樣式文檔設置 body p 的字體樣式爲 font-family: 'Noto Sans', 'chdot', 'Noto Sans KR', 'Noto Sans HK', 'Noto Sans SC', sans-serif; 則頁面正文字體則如本頁所示效果：bold 粗體，italic 斜體，bolditalic 粗斜體.
字體樣式中的 chdot 是爲了替換「思源黑體韓國」中的置底的頓號、逗號、句號，以統一標點顯示風格，使得漢字標點全部置中。絞盡腦汁找到此方法，使用 font-spider-plus 提取思源黑體香港版字體中的頓號、逗號、句號，生成專門的 CSS 文檔引用，在加載思源漢字前加載這三個標點。這個工具在處理網頁漢字字體方面還有一些奇妙的用處，不過似乎不必將頁面字體折騰得過於繁瑣。
回歸「白嫖」？
當字體回歸如上方案時，不翻牆時的頁面加載速度自然是「秒級」甚至是「毫秒級」的。但是，一旦捨棄字體指定的需求，則回歸原有「白嫖」方案，不翻牆時的頁面加載速度也會大大提升到可以忍受的程度。
The article was recently updated on Friday, October 27, 2023, 10:54:27 by 👩 高松年.
