Deploying

    • You are placing your docs inside the directory of your project;
    • You are using the default build output location (.vuepress/dist);
    • VuePress is installed as a local dependency in your project, and you have setup the following npm scripts:
    1. Set correct base in docs/.vuepress/config.js.

      If you are deploying to https://<USERNAME>.github.io/, you can omit base as it defaults to "/".

      If you are deploying to https://<USERNAME>.github.io/<REPO>/, (i.e. your repository is at https://github.com/<USERNAME>/<REPO>), set base to "/<REPO>/".

    2. Inside your project, create deploy.sh with the following content (with highlighted lines uncommented appropriately) and run it to deploy:

    1. #!/usr/bin/env sh
    2. # abort on errors
    3. set -e
    4. # build
    5. npm run docs:build
    6. # navigate into the build output directory
    7. cd docs/.vuepress/dist
    8. # if you are deploying to a custom domain
    9. # echo 'www.example.com' > CNAME
    10. git init
    11. git add -A
    12. git commit -m 'deploy'
    13. # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
    14. # if you are deploying to https://<USERNAME>.github.io/<REPO>
    15. cd -

    ::: tip
    You can also run the above script in your CI setup to enable automatic deployment on each push.
    :::

    GitLab Pages and GitLab CI

    1. Set correct base in docs/.vuepress/config.js.

      If you are deploying to https://<USERNAME or GROUP>.gitlab.io/, you can omit base as it defaults to "/".

      If you are deploying to https://<USERNAME or GROUP>.gitlab.io/<REPO>/, (i.e. your repository is at https://gitlab.com/<USERNAME>/<REPO>), set base to "/<REPO>/".

    2. Create a file called .gitlab-ci.yml in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content.

    1. image: node:9.11.1
    2. pages:
    3. cache:
    4. paths:
    5. - node_modules/
    6. script:
    7. - npm install
    8. - npm run docs:build
    9. artifacts:
    10. paths:
    11. - public
    12. only:
    13. - master
    1. On Netlify, setup up a new project from GitHub with the following settings:

      • Build Command: npm run docs:build or yarn docs:build
      • Publish directory: docs/.vuepress/dist
    2. Hit the deploy button!

    Google Firebase

    1. Make sure you have firebase-tools installed.

    firebase.json:

    .firebaserc:

    1. {
    2. "projects": {
    3. "default": "<YOUR_FIREBASE_ID>"
    4. }
    5. }
    1. After running yarn docs:build or npm run docs:build, deploy with the command firebase deploy.
    1. First install , if you haven’t already.

    2. Deploy to surge, by typing surge docs/.vuepress/dist.

    You can also deploy to a custom domain by adding surge docs/.vuepress/dist yourdomain.com.

    Heroku

    1. First install Heroku CLI.

    2. Create a Heroku account .

    3. Run heroku login and fill in your Heroku credentials:

      1. heroku login
    4. Create a file called static.json in the root of your project with the content below:

      static.json:

    This is the configuration of your site. see more at heroku-buildpack-static.

    1. Set up your Heroku git remote:
    1. # version change
    2. git init
    3. git add .
    4. git commit -m "My site ready for deployment."
    5. # creates a new app with a specified name
    6. heroku apps:create example
    7. # set buildpack for static sites
    8. heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
    1. Deploying Your Site
    1. # publish site
    2. git push heroku master