Deployment

Vue-Styleguidist can generate a static website. To deploy it, follow this short intro and choose one of the providers.

Pre-requisites

First, specify the location where the styleguide site is going to be built using the styleguideDir option. It will default to a styleguide folder beside your styleguide.config.js.

Check out the results of running the following command

yarn styleguide:build

Now, you should have a directory containing HTML and javascript. Let's deploy it.

Deploy on Netlify (opens new window)

1. Connect Netlify to your GitHub account
2. Select the repo to deploy
3. Set the build command as vue-styleguidist build
4. The build folder will be styleguide if you have styleguide.config.js at the root of your repository and left out the option. If you changed the styleguideDir option, pick the new path chosen.

Deploy on Zeit Now (opens new window)

Connect your GitHub account with Zeit.

Create a now.json file at the root of your repository containing

{
  "name": "vsg-example",
  "builds": [
    {
      "src": "package.json",
      "use": "@now/static-build",
      "config": { "distDir": "styleguide" }
    }
  ]
}

And make sure to prepare a "build-now" script in your package.json that builds the styleguide

{
  "scripts": {
    "build-now": "styleguidist build"
  }
}

Adjust the distDir config according to your styledguideDir option.

Deploy on GitHub Pages

Github Pages (opens new window) can be very useful to serve static websites. It needs a little more effort than Netlify. It uses your repository files as the static pages themselves.

1. Create a repo called yourgithubid.github.io. Replace yourgithubid by your github id.
2. Enable GitHub pages on it. Settings > Options > Github Pages
3. Add an index.html in it. Whatever the content is, it does not matter.
4. Check that you can access the created page at https://yourgithubid.github.io/
5. Next, back on your library, run styleguidist build.
6. Upload (commit) in the yourgithubid.github.io repository the contents of your styleguide folder.
7. Go to the URL and see the styleguide live.

Automate deployment on Travis-CI

Zeit and Netlify simplify your website deployment automation. If you are going with GitHub pages though, because it is free for instance, you might want to build automation yourself.

This is how the very documentation you are reading is deployed automatically

deploy:
  provider: pages
  skip-cleanup: true
  local-dir: styleguide
  target-branch: docs
  repo: yourgithubid/yourgithubid.github.io
  github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable
  keep-history: true
  on:
    branch: delivery # only deploy when a commit or a merge is pushed to delivery

Read More (opens new window)

Deploy on surge.sh

1. Install surge CLI

npm install --global surge

2. Build your styleguide

npm run styleguide:build

3. Deploy it on surge

surge styleguide my-styleguide-on-surge.surge.sh

4. Follow the instructions