概述
今天心血來潮，介紹一下我的新部落格站點 —— https://EWhisper.cn。
我是做基礎平臺 PaaS 運維和架構的，挺喜歡把工作中學到的新知識寫下來、記筆記，突然有一天就抱著「資源共享、天下為公」的理念，分享我的學習心得，也能讓我的文章更規範刻度。
我是從 2019 年開始折騰部落格的，然後在 2021 年對部落格進行了一下全新的改版，在最新版的部落格中，無論是使用還是部署，都採用採用了 JamStack 的技術架構和工具。目前來看效果也不錯。
{% note light %}
?問題：
《「譯文」目前大火的 Jamstack 到底是什麼？》
{% endnote %}
我的第一代部落格
第一代網站，目前還在這裡留了個底 —— https://www.EWhisper.cn 由 Pelican 靜態站點生成器，NGINX Web Server，Docker ，騰訊雲 雲主機提供支援。主題目前來自Smashing Magazine。
效果如下圖所示：
{% note info %}
?參考資料：
Pelican 是一個用 Python 編寫的靜態站點生成器。亮點包括:
- 直接用 reStructuredText 或 Markdown 格式的編輯器編寫內容
- 包含一個簡單的 CLI 工具來(重新)生成您的站點
- 易於與分散式版本控制系統和 web hooks 對接
- 完全靜態的輸出很容易託管在任何地方
{% endnote %}
第二代 - 基於 JamStack 的部落格
第二代網站 —— https://EWhisper.cn 由 Hexo 靜態站點生成器，七牛雲-物件儲存和CDN 提供圖片儲存和URL，騰訊雲 CloudBase-靜態網站託管 提供靜態網站託管支援，valine 或 Twikoo 提供評論系統技術支援，部落格訪問量和評論資訊儲存在 LeanCloud 或 騰訊雲 CloudBase-使用者管理上，統計分析透過百度統計 和 LeanCloud 來實現，部落格首頁動態詩詞展示由一言開發者中心介面提供。主題目前來自 hexo-theme-fluid。
效果如下圖所示：
下面一一介紹。
JAM
什麼是 JamStack？
{% note info %}
?參考資料：
Jamstack 架構中的 JAM 是指客戶端 JavaScript、可重用的後端 API，和使用者介面的 Markup，比如 HTML 與 CSS。
Jamstack 的關鍵特徵是前端 Web UI 與基於 API 的後端服務之間的清晰區分。與垂直整合的傳統 Web 應用程式不同的是， Jamstack 應用程式是模組化和分散式的：UI 可以透過靜態網頁伺服器、CDN、甚至基於區塊鏈的儲存進行分發；後端 API 服務可以部署在雲上，也可以由邊緣節點就近提供服務。
{% endnote %}
我們先說 JAM 架構
JAM - 我的部落格技術架構
J - JavaScript
J 是指 客戶端 JavaScript，那麼我的部落格中涉及到的 JavaScript 主要有以下：
-
JS 靜態站點生成器框架：Hexo，我在自己電腦上用 Markdown 格式寫文章，透過
hexo g生成網站靜態頁面，並透過hexo deploy進行部署。 -
部署託管：騰訊雲 CloudBase，這裡是使用了它的:
- CloudBase CLI：用於和
hexo deploy一起工作，將網站檔案釋出到騰訊雲上（靜態部分具體使用了：DNSPod、COS 和 CDN） - 除了 JavaScript 部分，還有涉及 API 的部分有（後面詳細介紹）：
- 使用者管理
- 資料庫
- 雲函式
- CloudBase CLI：用於和
-
靜態網站評論系統：Twikoo，這裡使用了它的 JS 前端和基於騰訊雲 CloudBase 的雲函式後臺。
-
網頁訪問統計：
百度統計效果如下：
LeanCloud 展示效果如下：
後端儲存資料如下所示：
{% note info %}
?參考資料：
-
Hexo 是一個快速、簡潔且高效的部落格框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。Hexo 基於 JavaScript 和 Node.js。
-
騰訊雲 CloudBase：雲開發（Tencent CloudBase，TCB）是騰訊雲提供的雲原生一體化開發環境和工具平臺，為開發者提供高可用、自動彈性擴縮的後端雲服務，包含計算、儲存、託管等 serverless 化能力，可用於雲端一體化開發多種端應用（小程式，公眾號，Web 應用，Flutter 客戶端等），幫助開發者統一構建和管理後端服務和雲資源，避免了應用開發過程中繁瑣的伺服器搭建及運維，開發者可以專注於業務邏輯的實現，開發門檻更低，效率更高。
- CloudBase CLI 是雲開發（Tencent CloudBase，TCB）開源的命令列介面互動工具，基於 JavaScript 和 Node.js，用於幫助使用者快速、方便的部署專案，管理雲開發資源。
-
Twikoo：一個簡潔、安全、免費的靜態網站評論系統，基於騰訊雲開發。部分特色如下：
- 支援回覆、點贊
- 無需額外適配，支援搭配淺色主題與深色主題使用
- 支援 API 呼叫，批次獲取文章評論數、最新評論
- 訪客在暱稱欄輸入 QQ 號，會自動補全 QQ 暱稱和 QQ 郵箱
- 訪客填寫數字 QQ 郵箱，會使用 QQ 頭像作為評論頭像
- 支援評論框貼上圖片（可禁用）
- 支援插入圖片（可禁用）
- 支援插入表情（可禁用）
- 支援 Ctrl + Enter 快捷回覆
- 評論框內容實時儲存草稿，重新整理不會丟失
- 支援按語言的程式碼高亮
- 隱私資訊保安（透過雲函式控制敏感欄位（郵箱、IP、環境配置等）不會洩露）
- 支援人工稽核模式
- 防 XSS 注入
- 支援限制每個 IP 每 10 分鐘最多發表多少條評論
- 支援自定義表情列表
- 內嵌式管理皮膚，透過密碼登入，可方便地檢視評論、隱藏評論、刪除評論、修改配置
- 支援從 Valine、Artalk、Disqus 匯入評論
效果如下：
-
LeanCloud：LeanCloud 本質上提供的服務和騰訊雲的 CloudBase 是一致的。LeanCloud 領先的 Serverless 雲服務，為產品開發提供強有力的後端支援。提供一站式後端服務，如資料儲存、雲引擎、即時通訊等。
{% endnote %}
A - API
A 指可重用的後端 API。其實 J 和 A 是緊密配合的，我們在上一段也能看到很多 JavaScript 最終都是呼叫 API 來對資料進行增刪改查。我的部落格中涉及到的 API 主要有：
靜態網站評論 API
如果大家訪問我的網站——容器化應用系統上生產的最佳實踐 - 東風微鳴技術部落格 (ewhisper.cn)，看評論，開啟瀏覽器的 F12，就可以看到實際 Twikoo POST 的 API 是：
curl 'https://ewhisper-5g565139594f9b52.ap-shanghai.tcb-api.tencentcloudapi.com/web?env=ewhisper-5g565139594f9b52' \
-H 'authority: ewhisper-5g565139594f9b52.ap-shanghai.tcb-api.tencentcloudapi.com' \
-H 'sec-ch-ua: "Microsoft Edge";v="95", "Chromium";v="95", ";Not A Brand";v="99"' \
-H 'x-tcb-region: ap-shanghai' \
-H 'x-sdk-version: @cloudbase/js-sdk/1.7.0' \
-H 'sec-ch-ua-mobile: ?0' \
-H 'user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36 Edg/95.0.1020.38' \
-H 'content-type: application/json;charset=UTF-8' \
-H 'x-seqid: 04c3430d22965' \
-H 'x-tcb-trace: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1dWlkIjoiZWQ1OWE2MmFiYmIyNDZkY2JiNTRiODVjMzU5MGMxNTEiLCJsYXN0UmVwb3J0VGltZSI6MTYzNTY0NzI4MTI2OSwiaWF0IjoxNjM1NjQ3MjgxfQ.GiVnirzhrEf7AnNxV_QejyH9Tk7shmmVG6Xh5yiUPn0' \
-H 'sec-ch-ua-platform: "Windows"' \
-H 'accept: */*' \
-H 'origin: https://ewhisper.cn' \
-H 'sec-fetch-site: cross-site' \
-H 'sec-fetch-mode: cors' \
-H 'sec-fetch-dest: empty' \
-H 'referer: https://ewhisper.cn/' \
-H 'accept-language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7' \
--data-raw '{"action":"functions.invokeFunction","dataVersion":"2020-01-10","env":"ewhisper-5g565139594f9b52","function_name":"twikoo","request_data":"{\"event\":\"COMMENT_GET\",\"url\":\"/posts/14417/\"}","access_token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoie1wibG9naW5UeXBlXCI6XCJBTk9OWU1PVVNcIixcImVudk5hbWVcIjpcImV3aGlzcGVyLTVnNTY1MTM5NTk0ZjliNTJcIixcInV1aWRcIjpcImVkNTlhNjJhYmJiMjQ2ZGNiYjU0Yjg1YzM1OTBjMTUxXCJ9IiwiaWF0IjoxNjM1NjUwOTU4LCJleHAiOjE2MzU2NTQ1NTh9.8hDap2wwrTII2Ine8F9jjDzCGUKW_e80pb4KvpGM64U;1635566422","seqId":"04c3430d22965"}' \
--compressed
API 返回的響應是：
{
"requestId": "91765a8a-39fc-11ec-9ab1-b2a89f885dbc",
"data": {
"response_data": "{\"data\":[{\"id\":\"cd045e75610b657002fe22fb26922cc4\",\"nick\":\"凱西Casey\",\"avatar\":\"https://thirdqq.qlogo.cn/g?b=sdk&k=JtvoGTkW8mBlnXNSFnxcxg&s=140&t=1557419902\",\"mailMd5\":\"097b6659c25b25c1ad2d792c6d5a953e\",\"link\":\"\",\"comment\":\"<p>自動關聯qq頭像<img alt=\\\":bilibiliHotKey-20:\\\" src=\\\"https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/bilibiliHotKey/20.jpg\\\" class=\\\"tk-owo-emotion\\\"> </p>\\n\",\"os\":\"Android 11\",\"browser\":\"Miui 15.1.12\",\"master\":false,\"like\":0,\"liked\":false,\"replies\":[],\"ruser\":null,\"isSpam\":false,\"created\":1628136816139,\"updated\":1628136816139},{\"id\":\"cd045e75610b634002fc99751dbc207c\",\"nick\":\"小囧\",\"mailMd5\":\"27add2425f31777763528269b4060ec1\",\"link\":\"\",\"comment\":\"<p><img alt=\\\":bilibiliHotKey-24:\\\" src=\\\"https://twikoo-magic.oss-cn-hangzhou.aliyuncs.com/bilibiliHotKey/24.jpg\\\" class=\\\"tk-owo-emotion\\\"> </p>\\n\",\"os\":\"Android 11\",\"browser\":\"Miui 15.1.12\",\"master\":false,\"like\":1,\"liked\":false,\"replies\":[],\"ruser\":null,\"isSpam\":false,\"created\":1628136256345,\"updated\":1628136256345},{\"id\":\"610b366fcb9d18021c807485\",\"nick\":\"東風微鳴\",\"mailMd5\":\"7c743bc6ac83171e35a5aa8bd66cc1ea\",\"link\":\"https://EWhisper.cn\",\"comment\":\"<p><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus/alus_blush.png" alt="alus_blush"><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili/bb_sunglasses.png" alt="bb_sunglasses"><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq/qq_confounded.gif" alt="qq_confounded"><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba/tieba_antic.png" alt="tieba_antic"><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji/1f47d.png" alt="1f47d"><img class="vemoji" src="https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo/weibo_cat_cry.png" alt="weibo_cat_cry"></p>\\n\",\"os\":\"Windows 10\",\"browser\":\"Microsoft Edge 92.0.902.62\",\"master\":false,\"like\":0,\"liked\":false,\"replies\":[],\"ruser\":null,\"created\":1628124783184,\"updated\":1628124783184}],\"more\":false,\"count\":3}"
}
}
實際內容就是：
網頁訪問統計 API
百度統計太複雜，我也不太懂，URL 是：https://hm.baidu.com/hm.js 讀者可以自行檢視。
LeanCloud 統計 PV、UV 和具體文章閱讀量的 API 分別為：
PV:
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"site-pv"}
響應內容為：
{
"results": [
{
"target": "site-pv",
"time": 1395,
"createdAt": "2021-07-10T07:40:59.569Z",
"updatedAt": "2021-10-31T03:30:15.933Z",
"objectId": "60e94f0b55ba67136bafb203"
}
]
}
UV:
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"site-uv"}
響應內容為：
{
"results": [
{
"target": "site-uv",
"time": 397,
"createdAt": "2021-07-10T07:40:54.146Z",
"updatedAt": "2021-10-31T02:15:31.349Z",
"objectId": "60e94f06d3c62b4544b9ff5d"
}
]
}
具體文章閱讀數：以容器化應用系統上生產的最佳實踐 - 東風微鳴技術部落格 (ewhisper.cn)為例
https://lrbbjugq.lc-cn-e1-shared.com/1.1/classes/Counter?where={"target"%3A"%2Fposts%2F14417%2F"}
響應內容為：
{
"results": [
{
"target": "/posts/14417/",
"time": 28,
"createdAt": "2021-07-31T08:39:50.194Z",
"updatedAt": "2021-10-31T03:30:15.926Z",
"objectId": "61050c5697a09641df17407d"
}
]
}
首頁 Slogan
大家如果進入我的首頁，多重新整理幾次，會發現首頁的 Slogan 會出現不同的古詩句。如下：
這個其實也是呼叫的 API，部落格首頁動態詩詞展示由一言開發者中心介面提供。
{% note info %}
?參考資料：
一言是建立於 2016 年的專案，起初是用於個人目的。目前已經轉為公益專案，由萌創團隊運營，為大家提供服務。 所謂一言（ヒトコト），即一句話。這句話可以是傳達了感動，可以是博人一笑，可以是發人深思。總之，一言，代表著言語的觸動，靈魂的交流。
{% endnote %}
具體的呼叫 URL 為：https://v1.hitokoto.cn/?c=i。c=i 表示句子型別（c）為詩詞（i）。
返回的響應為：
{
"id": 5545,
"uuid": "5d9def79-c283-4c4c-a9cb-f44ac8da26da",
"hitokoto": "採得百花成蜜後，為誰辛苦為誰甜。",
"type": "i",
"from": "蜂",
"from_who": "羅隱",
"creator": "a632079",
"creator_uid": 1044,
"reviewer": 1044,
"commit_from": "api",
"created_at": "1586266392",
"length": 16
}
M - Markup
M 指的是使用者介面的 Markup，比如 HTML 與 CSS。
我的部落格對比了多個 Hexo 受歡迎的主題，最終選擇了 fluid 。以下是我使用過的主題和我的簡單評價。
{% note info %}
?參考資料：
Fluid 是基於 Hexo 的一款 Material Design 風格的主題，以簡約的設計幫助你專注於寫作，由 Fluid-dev負責開發與維護。
主題 GitHub: https://github.com/fluid-dev/hexo-theme-fluid
預覽網站：Fluid's blog，zkqiang's blog
大家可以瀏覽 Hello Fluid - Hexo Theme Fluid (fluid-dev.com) 來體驗該主題的風格
{% endnote %}
JAM - 我的部落格寫作釋出流程
首先，文章全部託管在 Git 上。在我的電腦上安裝好相關依賴：Git、Node.js 、 VSCode（用作 Markdown 格式文章寫作、終端 Terminal 和 Git 版本管理）、hexo-cli（Hexo 的命令列）、hexo-theme-fluid（fluid 主題）和 @cloudbase/cli（騰訊雲 CloudBase CLI）。
其次，在終端執行 hexo new "新文章" 建立新的 markdown 檔案，並用 VSCode 對其進行寫作和編輯。
文章完成後，透過終端執行 hexo s 生成新的文章網頁，並本地預覽。
最後，透過 cloudbase framework deploy ... 釋出到騰訊雲上。
這裡也詳細說一下 cloudbase framework deploy ... 都做了些什麼，具體如下：
CloudBase CLI 1.9.2
CloudBase Framework 1.8.16
______ __ __ ____
/ ____// /____ __ __ ____/ // __ ) ____ _ _____ ___
/ / / // __ \ / / / // __ // __ |/ __ `// ___// _ \
/ /___ / // /_/ // /_/ // /_/ // /_/ // /_/ /(__ )/ __/
\____//_/_\____/ \__,_/ \__,_//_____/ \__,_//____/ \___/ __
/ ____/_____ ____ _ ____ ___ ___ _ __ ____ _____ / /__
/ /_ / ___// __ `// __ `__ \ / _ \| | /| / // __ \ / ___// //_/
/ __/ / / / /_/ // / / / / // __/| |/ |/ // /_/ // / / ,<
/_/ /_/ \__,_//_/ /_/ /_/ \___/ |__/|__/ \____//_/ /_/|_|
CloudBase Framework info EnvId ewhisper-xxxxx # 作者備註：CloudBase 的環境 ID
CloudBase Framework info Region ap-shanghai # 作者備註：騰訊雲區域
CloudBase Framework info Validate config file success.
CloudBase Framework info AppName ewhisper
CloudBase Framework info ? install plugins
CloudBase Framework info callHooks 'preDeploy' # 作者備註：部署前操作
CloudBase Framework info ? init: hexo... # 作者備註：init
CloudBase Framework info Website 外掛會自動開啟靜態網頁託管能力，需要當前環境為 [按量計費] 模式 # 作者備註：環境是按量計費的。
CloudBase Framework info Website 外掛會部署應用資源到當前靜態託管的 / 目錄下
CloudBase Framework info ? build: hexo... # 作者備註：build，就是呼叫 `npx hexo generate`
CloudBase Framework info running 'npm install --prefer-offline --no-audit --progress=false'
...
CloudBase Framework info running 'npx hexo generate'
# 作者備註：以下是 Hexo Generate 日誌
INFO Validating config
INFO Start processing
INFO [Fluid] 讀取 _config.yml 中 theme_config 配置項覆蓋配置
INFO Generate link [41870] for post [source/_posts/我的基於JamStack的新部落格.md][ 我的基於JamStack的新部落格 ]
INFO Generated: categories [[ '雲端計算' ]] for post [source/_posts/我的基於JamStack的新部落格.md][ 我的基於JamStack的新部落格 ]
...
INFO 292 files generated in 1.8 s
# 作者備註：以上是 Hexo Generate 日誌
CloudBase Framework info ? compile: hexo... # 作者備註：靜態網站沒有編譯過程
CloudBase Framework info callHooks 'postCompile'
正在部署[░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░] 100% 40.0 s
正在部署[░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░] 100% 45.1 s
CloudBase Framework info ? deploy: hexo... # 作者備註：部署到騰訊雲，其實呼叫的就是騰訊雲 COS 的上傳 API
CloudBase Framework info ? 網站部署成功
CloudBase Framework info callHooks 'postDeploy' # 作者備註：部署後展示應用資訊
CloudBase Framework info ? 應用入口資訊:
? 網站入口: https://ewhisper-xxx.tcloudbaseapp.com/
CloudBase Framework info ✨ done
其間，也會透過 Git 進行文章的版本管理和同步。
JAM - 我的部落格的部署架構
JAM 通用的使用者訪問路線如下所示：
靜態站點部分
Hexo 生產的站點，是完全的靜態站點，全部都是靜態檔案，包括：HTML、CSS、JavaScript 和圖片。這些靜態檔案，透過 cloudbase framework deploy ... 後，釋出到騰訊雲 CloudBase-靜態網站託管。這裡其實將靜態檔案釋出到了 2 個騰訊雲的產品中：
- 騰訊雲物件儲存 COS：靜態檔案是以物件的形式存放在 COS 中。
- 騰訊雲 CDN：同時 COS 中的靜態檔案，會快取到騰訊雲的 CDN 中。
使用者瀏覽網站時，過程如下：
- 訪問：https://EWhisper.cn;
- <EWhisper.cn> 域名在 DNS 中解析為 CName：<ewhisper.cn.cdn.dnsv1.com>；轉到騰訊雲 CDN
- 如果 CDN 命中，直接返回；如果 CDN 沒有命中，會回源到 騰訊雲 COS 的地址去訪問原始檔。
API 部分
對於 API 部分，需要開通、安裝部署的主要有以下元件：
- 靜態網站評論系統：Twikoo，部署方式見 Twikoo 快速上手
- 網頁訪問統計 API：LeanCloud。LeanCloud 只要申請個賬號，獲得對應的域名、AKSK 即可。
總結
以上就是我的基於 JamStack 的部落格 —— https://EWhisper.cn。主要是基於：Hexo、Fluid 主題、Twikoo 評論系統、LeanCloud 和 騰訊雲 CloudBase 來實現的。
從我的角度來看，JamStack 相比傳統 LNMP 開發，一些主要的區別包括:
- Jamstack 不需要安裝或管理作業系統 (如 Linux)
- Jamstack 不需要管理安全策略 (伺服器防火牆)
- Jamstack 不需要安裝或管理應用程式資料庫 (如 MySQL)
- Jamstack 可以在不使用 HTTP (Web) 伺服器 (如 Apache) 的情況下部署 Web 站點或 Web 應用
總體而言，選擇使用 Jamstack 建立網站有 4 個主要好處: 成本效益、效能改進、更好的安全性和更好的使用者 / 開發者體驗 。
歡迎體驗！✨✨✨
三人行, 必有我師; 知識共享, 天下為公. 本文由東風微鳴技術部落格 EWhisper.cn 編寫.