部署
此文档 fork 自 vuepress official doc。
下述的指南基于以下条件：
- Markdown 源文件放置在你项目的
docs目录； - 使用的是默认的构建输出目录 (
.vuepress/dist) ； - 使用 pnpm 作为包管理器，当然也支持使用 npm 或 yarn 。
- VuePress 作为项目依赖安装，并在
package.json中配置了如下脚本：
{
"scripts": {
"docs:build": "vuepress build docs"
}
}GitHub Pages
设置正确的 base 选项。
如果你准备发布到
https://<USERNAME>.github.io/，你可以省略这一步，因为base默认就是"/"。如果你准备发布到
https://<USERNAME>.github.io/<REPO>/，也就是说你的仓库地址是https://github.com/<USERNAME>/<REPO>，则将base设置为"/<REPO>/"。选择你想要使用的 CI 工具。这里我们以 GitHub Actions 为例。
创建
.github/workflows/docs.yml文件来配置工作流。
点击展开配置样例
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@v4
with:
# 选择要使用的 pnpm 版本
version: 10
# 使用 pnpm 安装依赖
run_install: true
- name: Setup Node.js
uses: actions/setup-node@v4
with:
# 选择要使用的 node 版本
node-version: 22
# 缓存 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 }}请参考 GitHub Pages 官方指南 来获取更多信息。
GitLab Pages
点击展开配置样例
# 选择你要使用的 docker 镜像
image: node:22-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请参考 GitLab Pages 官方指南 来获取更多信息。
Google Firebase
请确保你已经安装了 firebase-tools。
在你项目的根目录下创建
firebase.json和.firebaserc，并包含以下内容：{ "hosting": { "public": "./docs/.vuepress/dist", "ignore": [] } }{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }在执行了
pnpm docs:build后, 使用firebase deploy指令来部署。
请参考 Firebase CLI 官方指南 来获取更多信息。
Heroku
Heroku 已于 2022 年底停止免费服务
Heroku 已于 2022 年 11 月停止提供免费 Dyno 和免费 PostgreSQL 数据库服务，新用户无法再免费使用。如果你是个人开发者或学习用途，建议选择 Netlify、Vercel 或 GitHub Pages 等仍提供免费方案的平台。
首先安装 Heroku CLI；
在这里 注册一个 Heroku 账号；
运行
heroku login并填写你的 Heroku 认证信息：heroku login在你的项目根目录中，创建一个名为
static.json的文件，并包含下述内容：{ "root": "./docs/.vuepress/dist" }这里是你项目的配置，请参考 heroku-buildpack-static 来获取更多信息。
Kinsta
请查看 Set Up VuePress on Kinsta 。
在 Kinsta 注册账号并登录控制台，从 Git 仓库（GitHub 或 GitLab）创建一个新的静态站点。
在构建配置中设置如下选项：
- Build command:
pnpm docs:build - Publish directory:
docs/.vuepress/dist - Node version: 22
- Build command:
点击部署按钮，构建完成后即可通过 Kinsta 提供的默认域名访问站点，也可在控制台中绑定自定义域名。
Edgio
请查看 Edgio Documentation > Framework Guides > VuePress 。
全局安装 Edgio CLI：
pnpm install -g @edgio/cli在项目根目录初始化 Edgio 配置，根据提示完成框架适配选择：
edgio init部署站点到 Edgio 全球边缘网络：
edgio deploy
Netlify
前往 Netlify ，从 GitHub 创建一个新项目，并进行如下配置：
- Build Command:
pnpm docs:build - Publish directory:
docs/.vuepress/dist
- Build Command:
设置 Environment variables 来选择 Node 版本：
NODE_VERSION: 22
点击 deploy 按钮。
Vercel
前往 Vercel ，从 GitHub 创建一个新项目，并进行如下配置：
- FRAMEWORK PRESET:
Other - BUILD COMMAND:
pnpm docs:build - OUTPUT DIRECTORY:
docs/.vuepress/dist
- FRAMEWORK PRESET:
点击 deploy 按钮。
云开发 CloudBase
云开发 CloudBase 是一个云原生一体化的 Serverless 云平台， 支持静态网站、容器等多种托管能力，并提供简便的部署工具 CloudBase Framework 来一键部署应用。
全局安装 CloudBase CLI ：
pnpm install -g @cloudbase/cli在项目根目录运行以下命令一键部署 VuePress 应用，在部署之前可以先 开通环境：
cloudbase init --without-template cloudbase framework:deploy
CloudBase CLI 首先会跳转到控制台进行登录授权，然后将会交互式进行确认。
确认信息后会立即进行部署，部署完成后，可以获得一个自动 SSL，CDN 加速的网站应用，你也可以搭配使用 GitHub Action 来持续部署 GitHub 上的 VuePress 应用。
也可以使用 cloudbase init --template vuepress 快速创建和部署一个新的 VuePress 应用。
提示
更多详细信息请查看 CloudBase Framework 的部署项目示例
