diff --git a/docs/.vuepress/notes.ts b/docs/.vuepress/notes.ts index 83303917..911d7245 100644 --- a/docs/.vuepress/notes.ts +++ b/docs/.vuepress/notes.ts @@ -12,7 +12,7 @@ export const zhNotes = definePlumeNotesConfig({ text: '快速开始', collapsed: false, icon: 'carbon:idea', - items: ['介绍', '安装与使用', '博客', '知识笔记'], + items: ['介绍', '安装与使用', '博客', '知识笔记', '部署'], }, { text: '写作', diff --git a/docs/notes/theme/guide/功能/评论.md b/docs/notes/theme/guide/功能/评论.md index e9e203f7..e932d6b5 100644 --- a/docs/notes/theme/guide/功能/评论.md +++ b/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"` 等多种不同的评论服务提供商。 你可以根据自己的需求进行配置。 diff --git a/docs/notes/theme/guide/部署.md b/docs/notes/theme/guide/部署.md new file mode 100644 index 00000000..ce36bd9c --- /dev/null +++ b/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://.github.io/` ,你可以省略这一步,因为 `base` 默认就是 `"/"` 。 + + 如果你准备发布到 `https://.github.io//` ,也就是说你的仓库地址是 `https://github.com//` ,则将 `base` 设置为 `"//"`。 + +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://.gitlab.io/` ,你可以省略这一步,因此 `base` 默认就是 `"/"` 。 + + 如果你准备发布到 `https://.gitlab.io//` ,也就是说你的仓库地址是 `https://gitlab.com//` ,则将 `base` 设置为 `"//"`。 + +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": "" + } +} +``` + +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)。