docs: update deployment doc

docs/.vuepress/notes.ts

@@ -12,7 +12,7 @@ export const zhNotes = definePlumeNotesConfig({
           text: '快速开始',
           collapsed: false,
           icon: 'carbon:idea',
-          items: ['介绍', '安装与使用', '博客', '知识笔记'],
+          items: ['介绍', '安装与使用', '博客', '知识笔记', '部署'],
         },
         {
           text: '写作',

docs/notes/theme/guide/功能/评论.md

@@ -41,7 +41,7 @@ export default defineUserConfig({
 ### 服务提供商
 
 [@vuepress/plugin-comment](https://ecosystem.vuejs.press/zh/plugins/comment/) 支持
-`"Artalk“ | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
+`"Artalk" | "Giscus" | "Twikoo" | "Waline"` 等多种不同的评论服务提供商。
 
 你可以根据自己的需求进行配置。
 

docs/notes/theme/guide/部署.md

@@ -0,0 +1,272 @@
+---
+title: 部署
+author: pengzhanbo
+icon: material-symbols:deployed-code-outline
+createTime: 2024/03/20 12:38:48
+permalink: /guide/deployment/
+---
+
+::: tip
+此文档 fork 自 [vuepress official doc](https://v2.vuepress.vuejs.org/zh/guide/deployment.html)，
+仅为了方便阅读。
+:::
+
+下述的指南基于以下条件：
+
+- Markdown 源文件放置在你项目的 `docs` 目录；
+- 使用的是默认的构建输出目录 (`.vuepress/dist`) ；
+- 使用 [pnpm](https://pnpm.io/zh/) 作为包管理器，当然也支持使用 npm 或 yarn 。
+- VuePress 作为项目依赖安装，并在 `package.json` 中配置了如下脚本：
+
+```json
+{
+  "scripts": {
+    "docs:build": "vuepress build docs"
+  }
+}
+```
+
+## GitHub Pages
+
+1. 设置正确的 [base](https://v2.vuepress.vuejs.org/zh/reference/config.html#base) 选项。
+
+   如果你准备发布到 `https://<USERNAME>.github.io/` ，你可以省略这一步，因为 `base` 默认就是 `"/"` 。
+
+   如果你准备发布到 `https://<USERNAME>.github.io/<REPO>/` ，也就是说你的仓库地址是 `https://github.com/<USERNAME>/<REPO>` ，则将 `base` 设置为 `"/<REPO>/"`。
+
+2. 选择你想要使用的 CI 工具。这里我们以 [GitHub Actions](https://github.com/features/actions) 为例。
+
+   创建 `.github/workflows/docs.yml` 文件来配置工作流。
+
+::: details 点击展开配置样例
+
+```yaml
+name: docs
+
+on:
+  # 每当 push 到 main 分支时触发部署
+  push:
+    branches: [main]
+  # 手动触发部署
+  workflow_dispatch:
+
+jobs:
+  docs:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          # “最近更新时间” 等 git 日志相关信息，需要拉取全部提交记录
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          # 选择要使用的 pnpm 版本
+          version: 8
+          # 使用 pnpm 安装依赖
+          run_install: true
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          # 选择要使用的 node 版本
+          node-version: 20
+          # 缓存 pnpm 依赖
+          cache: pnpm
+
+      # 运行构建脚本
+      - name: Build VuePress site
+        run: pnpm docs:build
+
+      # 查看 workflow 的文档来获取更多信息
+      # @see https://github.com/crazy-max/ghaction-github-pages
+      - name: Deploy to GitHub Pages
+        uses: crazy-max/ghaction-github-pages@v4
+        with:
+          # 部署到 gh-pages 分支
+          target_branch: gh-pages
+          # 部署目录为 VuePress 的默认输出目录
+          build_dir: docs/.vuepress/dist
+        env:
+          # @see https://docs.github.com/cn/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+```
+
+:::
+
+::: tip
+请参考 [GitHub Pages 官方指南](https://pages.github.com/) 来获取更多信息。
+:::
+
+## GitLab Pages
+
+1. 设置正确的 [base](https://v2.vuepress.vuejs.org/zh/reference/config.html#base) 选项。
+
+   如果你准备发布到 `https://<USERNAME>.gitlab.io/` ，你可以省略这一步，因此 `base` 默认就是 `"/"` 。
+
+   如果你准备发布到 `https://<USERNAME>.gitlab.io/<REPO>/` ，也就是说你的仓库地址是 `https://gitlab.com/<USERNAME>/<REPO>` ，则将 `base` 设置为 `"/<REPO>/"`。
+
+2. 创建 `.gitlab-ci.yml` 文件来配置 [GitLab CI](https://about.gitlab.com/stages-devops-lifecycle/continuous-integration/) 工作流。
+
+::: details 点击展开配置样例
+
+```yaml
+# 选择你要使用的 docker 镜像
+image: node:18-buster
+
+pages:
+  # 每当 push 到 main 分支时触发部署
+  only:
+    - main
+
+  # 缓存 node_modules
+  cache:
+    key:
+      files:
+        - pnpm-lock.yaml
+    paths:
+      - .pnpm-store
+
+  # 安装 pnpm
+  before_script:
+    - curl -fsSL https://get.pnpm.io/install.sh | sh -
+    - pnpm config set store-dir .pnpm-store
+
+  # 安装依赖并运行构建脚本
+  script:
+    - pnpm install --frozen-lockfile
+    - pnpm docs:build --dest public
+
+  artifacts:
+    paths:
+      - public
+```
+
+:::
+
+::: tip
+请参考 [GitLab Pages 官方指南](https://docs.gitlab.com/ce/user/project/pages/#getting-started) 来获取更多信息。
+:::
+
+## Google Firebase
+
+1. 请确保你已经安装了 [firebase-tools](https://www.npmjs.com/package/firebase-tools)。
+
+2. 在你项目的根目录下创建 `firebase.json` 和 `.firebaserc`，并包含以下内容：
+
+`firebase.json`:
+
+```json
+{
+  "hosting": {
+    "public": "./docs/.vuepress/dist",
+    "ignore": []
+  }
+}
+```
+
+`.firebaserc`:
+
+```json
+{
+  "projects": {
+    "default": "<YOUR_FIREBASE_ID>"
+  }
+}
+```
+
+3. 在执行了 `pnpm docs:build` 后, 使用 `firebase deploy` 指令来部署。
+
+::: tip
+请参考 [Firebase CLI 官方指南](https://firebase.google.com/docs/cli) 来获取更多信息。
+:::
+
+## Heroku
+
+1. 首先安装 [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli)；
+
+2. [在这里](https://signup.heroku.com) 注册一个 Heroku 账号；
+
+3. 运行 `heroku login` 并填写你的 Heroku 认证信息：
+
+```bash
+heroku login
+```
+
+4. 在你的项目根目录中，创建一个名为 `static.json` 的文件，并包含下述内容：
+
+`static.json`:
+
+```json
+{
+  "root": "./docs/.vuepress/dist"
+}
+```
+
+这里是你项目的配置，请参考 [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static) 来获取更多信息。
+
+## Kinsta
+
+请查看 [Set Up VuePress on Kinsta](https://kinsta.com/docs/vuepress-application/) 。
+
+## Edgio
+
+请查看 [Edgio Documentation > Framework Guides > VuePress](https://docs.edg.io/guides/vuepress) 。
+
+## Netlify
+
+1. 前往 [Netlify](https://netlify.com) ，从 GitHub 创建一个新项目，并进行如下配置：
+
+   - **Build Command:** `pnpm docs:build`
+   - **Publish directory:** `docs/.vuepress/dist`
+
+2. 设置 [Environment variables](https://docs.netlify.com/configure-builds/environment-variables) 来选择 Node 版本：
+
+   - `NODE_VERSION`: 18
+
+3. 点击 deploy 按钮。
+
+## Vercel
+
+1. 前往 [Vercel](https://vercel.com) ，从 GitHub 创建一个新项目，并进行如下配置：
+
+   - **FRAMEWORK PRESET:** `Other`
+   - **BUILD COMMAND:** `pnpm docs:build`
+   - **OUTPUT DIRECTORY:** `docs/.vuepress/dist`
+
+2. 点击 deploy 按钮。
+
+<!-- 下列平台是中文文档特有的，放在最下方 -->
+
+## 云开发 CloudBase
+
+[云开发 CloudBase](https://cloudbase.net/?site=vuepress) 是一个云原生一体化的 Serverless 云平台，支持静态网站、容器等多种托管能力，并提供简便的部署工具 [CloudBase Framework](https://cloudbase.net/framework.html?site=vuepress) 来一键部署应用。
+
+1. 全局安装 CloudBase CLI ：
+
+```bash
+pnpm install -g @cloudbase/cli
+```
+
+2. 在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 [开通环境](https://console.cloud.tencent.com/tcb/env/index?tdl_anchor=ad&tdl_site=vuejs)：
+
+```bash
+cloudbase init --without-template
+cloudbase framework:deploy
+```
+
+CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认。
+
+确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 GitHub Action 来持续部署 GitHub 上的 VuePress 应用。
+
+也可以使用 `cloudbase init --template vuepress` 快速创建和部署一个新的 VuePress 应用。
+
+::: tip
+更多详细信息请查看 CloudBase Framework 的[部署项目示例](https://github.com/TencentCloudBase/cloudbase-framework?site=vuepress#%E9%A1%B9%E7%9B%AE%E7%A4%BA%E4%BE%8B)
+:::
+
+## 21 云盒子
+
+请查看 [21 云盒子 - 部署一个 VuePress 静态网页](https://www.21yunbox.com/docs/#/deploy-vuepress)。