部署项目
本教程指引你如何部署 VuePress 项目。
构建项目
当你在本地完成项目的初步开发后,你就可以使用 pnpm docs:build
命令构建网站。
如果你在使用模板,网站内容将会输出到 VuePress 项目的 .vuepress/dist
文件夹下。这些文件就是 VuePress 的最终输出结果。
你可以将此文件夹的内容部署到你网站的服务器上。最简单的做法是上传到 GitHub 并开启 GitHub Pages。
部署到 GitHub Pages
如果你在使用模板,且在创建过程中选择了创建自动部署文档的 GitHub 工作流,那么你唯一要做的就是设置正确的 base 选项。
如果你准备发布到
https://<USERNAME>.github.io/
,你必须将整个项目上传至https://github.com/<USERNAME>/<USERNAME>.github.io
仓库。在这种情况下你无需进行任何更改,因为 base 默认就是"/"
。如果你的仓库地址是一个普通的形如
https://github.com/<USERNAME>/<REPO>
的格式,网站将会被发布到https://<USERNAME>.github.io/<REPO>/
,也就是说,你需要将 base 设置为"/<REPO>/"
。
GitHub 工作流
如果你在创建模板时没有选择创建工作流,你可以现在手动创建它:
- 在项目根文件夹下创建
.github
文件夹 - 在
.github
文件夹下创建workflows
文件夹 - 在
workflows
文件夹下创建deploy-docs.yml
- 将下方内容粘贴至
deploy-docs.yml
并保存。
name: 部署文档
on:
push:
branches:
# 确保这是你正在使用的分支名称
- main
jobs:
deploy-gh-pages:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
with:
fetch-depth: 0
# 如果你文档需要 Git 子模块,取消注释下一行
# submodules: true
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 7
run_install: true
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: 16
cache: pnpm
- name: Build Docs
env:
NODE_OPTIONS: --max_old_space_size=8192
run: pnpm docs:build
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4
with:
# 这是文档部署到的分支名称
branch: gh-pages
folder: docs/.vuepress/dist
Github 教程
关于 GitHub 的相关教程,你可以参考 GitHub 简介。
其他部署方式
关于其他部署方式,请参阅 VuePress → 部署。
Gitee
如果你在使用码云,你需要注意码云的特殊仓库是 https://gitee.com/<USERNAME>/<USERNAME>
。如果你推送到这个仓库,你的文档将会发布在 https://<USERNAME>.gitee.io
上。