Documenting your VueJS project with Github pages

This quick guide will walk you through how you can configure a standard VueJS Webpack project to build documentation for Github Pages when you run:

npm run build

Step 1: Setup the build system to build to /docs

Edit: config/index.js

  • find ../dist replace with ../docs
  • change assetsPublicPath: '/', to: assetsPublicPath: './',

Run:

npm run build

You should now have a docs folder in your project. Add and push to github

Step2: Setup pages on github

In your Github repo, click through to settings and scroll down to Github Pages. Set your source to: "master branch /docs folder"

And you're done! Now your /docs folder will automatically be published to github pages!

Next steps:

Provide a build-docs command

This is all good and well if you don't intend to publish your project anywhere except using github pages. But if you're building an app which you want to deploy somewhere, you might want to build the results to the more traditional build folder when you run: npm run build, and have a separate command for building the docs.

Resources