# 部署
下述的指南基于以下条件:
- 文档放置在项目的
docs
目录中; - 使用的是默认的构建输出位置;
- VuePress 以本地依赖的形式被安装到你的项目中,并且配置了如下的 npm scripts:
{
"scripts": {
"docs:build": "vuepress build docs"
}
}
# 云开发 CloudBase
云开发 CloudBase (opens new window) 是一个云原生一体化的 Serverless 云平台,支持静态网站、容器等多种托管能力,并提供简便的部署工具 CloudBase Framework (opens new window) 来一键部署应用。
- 全局安装 CloudBase CLI
npm install -g @cloudbase/cli
- 在项目根目录运行以下命令一键部署 VuePress 应用,在部署之前可以先 开通环境 (opens new window):
cloudbase init --without-template
cloudbase framework:deploy
CloudBase CLI 首先会跳转到控制台进行登录授权,然后将会交互式进行确认
确认信息后会立即进行部署,部署完成后,可以获得一个自动 SSL,CDN 加速的网站应用,你也可以搭配使用 Github Action 来持续部署 Github 上的 VuePress 应用。
也可以使用 cloudbase init --template vuepress
快速创建和部署一个新的 VuePress 应用
更多详细信息请查看 CloudBase Framework 的部署项目示例 (opens new window)
# GitHub Pages
在
docs/.vuepress/config.js
中设置正确的base
。如果你打算发布到
https://<USERNAME>.github.io/
,则可以省略这一步,因为base
默认即是"/"
。如果你打算发布到
https://<USERNAME>.github.io/<REPO>/
(也就是说你的仓库在https://github.com/<USERNAME>/<REPO>
),则将base
设置为"/<REPO>/"
。在你的项目中,创建一个如下的
deploy.sh
文件(请自行判断去掉高亮行的注释):
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
提示
你可以在你的持续集成的设置中,设置在每次 push 代码时自动运行上述脚本。
# GitHub Pages and Github Actions
- 创建 Github access token (opens new window);
- 在你 github 仓库下,创建一个 secrets (opens new window) ,填入刚创建的
token
- 在项目根目录下的
.github/workflows
目录(没有的话,请手动创建一个)下创建一个.yml
或者.yaml
文件,如:vuepress-deploy.yml
;
name: Build and Deploy
on: [push]
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
TARGET_REPO: username/repo
TARGET_BRANCH: master
BUILD_SCRIPT: yarn && yarn docs:build
BUILD_DIR: docs/.vuepress/dist
CNAME: https://www.xxx.com
详细使用方法,可以看jenkey2011/vuepress-deploy (opens new window)
# GitHub Pages and Travis CI
在
docs/.vuepress/config.js
中设置正确的base
。如果你打算发布到
https://<USERNAME or GROUP>.github.io/
,则可以省略这一步,因为base
默认即是"/"
。如果你打算发布到
https://<USERNAME or GROUP>.github.io/<REPO>/
(也就是说你的仓库在https://github.com/<USERNAME>/<REPO>
),则将base
设置为"/<REPO>/"
。在项目的根目录创建一个名为
.travis.yml
的文件;在本地执行
yarn
或npm install
并且提交生成的 lock 文件(即yarn.lock
或package-lock.json
);使用 GitHub Pages 部署提供程序模板并遵循 Travis 文档 (opens new window)。
language: node_js
node_js:
- lts/*
install:
- yarn install # npm ci
script:
- yarn docs:build # npm run docs:build
deploy:
provider: pages
skip_cleanup: true
local_dir: docs/.vuepress/dist
github_token: $GITHUB_TOKEN # 在 GitHub 中生成,用于允许 Travis 向你的仓库推送代码。在 Travis 的项目设置页面进行配置,设置为 secure variable
keep_history: true
on:
branch: master
# GitLab Pages and GitLab CI
在
docs/.vuepress/config.js
中设置正确的base
。如果你打算发布到
https://<USERNAME or GROUP>.gitlab.io/
,则可以省略这一步,因为base
默认即是"/"
。如果你打算发布到
https://<USERNAME or GROUP>.gitlab.io/<REPO>/
(也就是说你的仓库在https://gitlab.com/<USERNAME>/<REPO>
),则将base
设置为"/<REPO>/"
。在
.vuepress/config.js
中将dest
设置为public
。在你项目的根目录下创建一个名为
.gitlab-ci.yml
的文件,无论何时你提交了更改,它都会帮助你自动构建和部署:
image: node:9.11.1
pages:
cache:
paths:
- node_modules/
script:
- yarn install # npm install
- yarn docs:build # npm run docs:build
artifacts:
paths:
- public
only:
- master
# Netlify
- 在 Netlify 中, 创建一个新的 GitHub 项目,使用以下设置:
- Build Command:
yarn docs:build
或者npm run docs:build
- Publish directory:
docs/.vuepress/dist
- 点击 deploy 按钮!
# Google Firebase
请确保你已经安装了 firebase-tools (opens new window)。
在你项目的根目录下创建
firebase.json
和.firebaserc
,并包含以下内容:
firebase.json
:
{
"hosting": {
"public": "./docs/.vuepress/dist",
"ignore": []
}
}
.firebaserc
:
{
"projects": {
"default": "<YOUR_FIREBASE_ID>"
}
}
- 在执行了
yarn docs:build
或npm run docs:build
后, 使用firebase deploy
指令来部署。
# Surge
首先,假设你已经安装了 surge (opens new window);
运行
yarn docs:build
或者npm run docs:build
;想要使用 surge 来部署,你可以运行:
surge docs/.vuepress/dist
;
你也可以通过 surge docs/.vuepress/dist yourdomain.com
来部署到 自定义域名 (opens new window)。
# Heroku
在这里 (opens new window) 注册一个 Heroku 账号;
运行
heroku login
并填写你的 Heroku 证书:heroku login
在你的项目根目录中,创建一个名为
static.json
的文件,并包含下述内容:
static.json
:
{
"root": "./docs/.vuepress/dist"
}
这里是你项目的配置,请参考 heroku-buildpack-static (opens new window) 了解更多。
- 配置 Heroku 的 git 远程仓库:
# 版本变化
git init
git add .
git commit -m "My site ready for deployment."
# 以指定的名称创建一个新的 heroku 应用
heroku apps:create example
# 为静态网站设置构建包
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
- 部署你的网站:
# 发布网站
git push heroku master
# 打开浏览器查看 Helku CI 的 dashboard
heroku open
# Vercel
请查看 用 Vercel 创建和部署一个 VuePress 应用 (opens new window)。
# 21 云盒子
← 多语言支持 Front Matter →