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.