# Deployment

The following guides are based on some shared assumptions:

You are placing your Markdown source files inside the docs directory of your project;
You are using the default build output location (.vuepress/dist);
You are using yarn classicopen in new window as package manager, while npm is also supported;
VuePress is installed as a local dependency in your project, and you have setup the following script in package.json:

{
  "scripts": {
    "docs:build": "vuepress build docs"
  }
}

1
2
3
4
5

# GitHub Pages

Set the correct base config.
If you are deploying to https://<USERNAME>.github.io/, you can omit this step as base defaults to "/".
If you are deploying to https://<USERNAME>.github.io/<REPO>/, for example your repository is at https://github.com/<USERNAME>/<REPO>, then set base to "/<REPO>/".

Choose your preferred CI tools. Here we take GitHub Actionsopen in new window as an example.

Create .github/workflows/docs.yml to set up the workflow.

Click to expand sample config

name: docs

on:
  # trigger deployment on every push to main branch
  push:
    branches: [main]
  # trigger deployment manually
  workflow_dispatch:

jobs:
  docs:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
        with:
          # fetch all commits to get last updated time or other git log info
          fetch-depth: 0

      - name: Setup Node.js
        uses: actions/setup-node@v1
        with:
          # choose node.js version to use
          node-version: '14'

      # cache node_modules
      - name: Cache dependencies
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: |
            **/node_modules
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # install dependencies if the cache did not hit
      - name: Install dependencies
        if: steps.yarn-cache.outputs.cache-hit != 'true'
        run: yarn --frozen-lockfile

      # run build script
      - name: Build VuePress site
        run: yarn docs:build

      # please check out the docs of the workflow for more details
      # @see https://github.com/crazy-max/ghaction-github-pages
      - name: Deploy to GitHub Pages
        uses: crazy-max/ghaction-github-pages@v2
        with:
          # deploy to gh-pages branch
          target_branch: gh-pages
          # deploy the default output dir of VuePress
          build_dir: docs/.vuepress/dist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

提示

Please refer to GitHub Pages official guideopen in new window for more details.

# GitLab Pages

Set the correct base config.
If you are deploying to https://<USERNAME>.gitlab.io/, you can omit base as it defaults to "/".
If you are deploying to https://<USERNAME>.gitlab.io/<REPO>/, for example your repository is at https://gitlab.com/<USERNAME>/<REPO>, then set base to "/<REPO>/".

Create .gitlab-ci.yml to set up GitLab CIopen in new window workflow.

Click to expand sample config

# choose a docker image to use
image: node:14-buster

pages:
  # trigger deployment on every push to main branch
  only:
  - main

  # cache node_modules
  cache:
    paths:
    - node_modules/

  # install dependencies and run build script
  script:
  - yarn --frozen-lockfile
  - yarn docs:build --dest public

  artifacts:
    paths:
    - public

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

提示

Please refer to GitLab Pages official guideopen in new window for more details.

# Google Firebase

Make sure you have firebase-toolsopen in new window installed.

Create firebase.json and .firebaserc at the root of your project with the following content:

firebase.json:

{
  "hosting": {
    "public": "./docs/.vuepress/dist",
    "ignore": []
  }
}

1
2
3
4
5
6

.firebaserc:

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

1
2
3
4
5

After running yarn docs:build, deploy using the command firebase deploy.

提示

Please refer to Firebase CLI official guideopen in new window for more details.

# Heroku

Install Heroku CLIopen in new window.
Create a Heroku account by signing upopen in new window.
Run heroku login and fill in your Heroku credentials:
```
heroku login
```
1
Create a file called static.json in the root of your project with the below content:
static.json:
```
{
  "root": "./docs/.vuepress/dist"
}
```
1
2
3

This is the configuration of your site; read more at heroku-buildpack-staticopen in new window.

# Netlify

On Netlifyopen in new window, set up a new project from GitHub with the following settings:
- Build Command: yarn docs:build
- Publish directory: docs/.vuepress/dist
Set Environment variablesopen in new window to choose node version:
- NODE_VERSION: 14
Hit the deploy button.

# Vercel

See Creating and Deploying a VuePress App with Vercelopen in new window.