关于运维:我的基于-JamStack-的新博客

6次阅读

共计 11507 个字符，预计需要花费 29 分钟才能阅读完成。

明天灵机一动，介绍一下我的新博客站点 —— 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 %}

第二代网站 —— https://EWhisper.cn 由 Hexo 动态站点生成器，七牛云 - 对象存储和 CDN 提供图片存储和 URL，腾讯云 CloudBase- 动态网站托管提供动态网站托管反对，valine 或 Twikoo 提供评论零碎技术支持，博客访问量和评论信息存储在 LeanCloud 或腾讯云 CloudBase- 用户治理上，统计分析通过百度统计和 LeanCloud 来实现，博客首页动静诗词展现由一言开发者核心接口提供。主题目前来自 hexo-theme-fluid。

成果如下图所示：

上面一一介绍。

{% note info %}
📚参考资料：

Jamstack 架构中的 JAM 是指客户端 JavaScript、可重用的后端 API，和用户界面的 Markup，比方 HTML 与 CSS。
Jamstack 的要害特色是前端 Web UI 与基于 API 的后端服务之间的清晰辨别。与垂直集成的传统 Web 应用程序不同的是，Jamstack 应用程序是模块化和分散式的：UI 能够通过动态网页服务器、CDN、甚至基于区块链的存储进行散发；后端 API 服务能够部署在云上，也能够由边缘节点就近提供服务。
{% endnote %}

咱们先说 JAM 架构

J 是指客户端 JavaScript，那么我的博客中波及到的 JavaScript 次要有以下：

JS 动态站点生成器框架：Hexo，我在本人电脑上用 Markdown 格局写文章，通过 hexo g 生成网站动态页面，并通过 hexo deploy 进行部署。
部署托管：腾讯云 CloudBase，这里是应用了它的:
- CloudBase CLI：用于和 hexo deploy 一起工作，将网站文件公布到腾讯云上（动态局部具体应用了：DNSPod、COS 和 CDN）
- 除了 JavaScript 局部，还有波及 API 的局部有（前面具体介绍）：
  - 用户治理
  - 数据库
  - 云函数
动态网站评论零碎：Twikoo，这里应用了它的 JS 前端和基于腾讯云 CloudBase 的云函数后盾。
网页拜访统计：
- 百度统计: 用来做站长网页拜访统计和剖析。
- LeanCloud: 用于 PV UV 展现。这里次要用到了它的「数据存储」服务。

百度统计成果如下：

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。其实 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>&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/alus/alus_blush.png&quot; alt=&quot;alus_blush&quot;&gt;&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili/bb_sunglasses.png&quot; alt=&quot;bb_sunglasses&quot;&gt;&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq/qq_confounded.gif&quot; alt=&quot;qq_confounded&quot;&gt;&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tieba/tieba_antic.png&quot; alt=&quot;tieba_antic&quot;&gt;&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/tw-emoji/1f47d.png&quot; alt=&quot;1f47d&quot;&gt;&lt;img class=&quot;vemoji&quot; src=&quot;https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo/weibo_cat_cry.png&quot; alt=&quot;weibo_cat_cry&quot;&gt;</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-sha…

响应内容为：

{
    "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-sha…

响应内容为：

{
    "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-sha…

响应内容为：

{
    "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，比方 HTML 与 CSS。

我的博客比照了多个 Hexo 受欢迎的主题，最终抉择了 fluid。以下是我应用过的主题和我的简略评估。

NexT: 用的人最多，更新频繁，中文，无中文文档
icarus：主题对我口味，更新频繁，无中文文档
matery: 花哨，中文全反对
fluid: 简洁，全中文
butterfly: 繁体中文

{% 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 %}

首先，文章全副托管在 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 [我的基于 JamStack 的新博客]
INFO  Generated: categories [['云计算']] for post [我的基于 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 通用的用户拜访路线如下所示：

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 局部，须要开明、装置部署的次要有以下组件：

动态网站评论零碎：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 编写.

正文完

运维

发表至：运维

2023-01-09

0

关于运维:拥有此神技脚本调试从此与-echosettest-说分手

关于运维:选择HHDESK的理由二文件共享

关于运维:阿里云认证是什么考试难吗

关于gitlab-ce:gitlab迁移及迁移后500问题

关于微信小程序:如何使用搜索功能精确筛选数据

关于运维:我的基于-JamStack-的新博客

概述

我的第一代博客

第二代 – 基于 JamStack 的博客

JAM

什么是 JamStack？

JAM – 我的博客技术架构

J – JavaScript

A – API

动态网站评论 API

网页拜访统计 API

首页 Slogan

M – Markup

JAM – 我的博客写作公布流程

JAM – 我的博客的部署架构

动态站点局部

API 局部

总结

站内搜索