How Gridsome works with GitHub Pages

Gridsome is Vue flavoured and a powerful static site generator. It’s the Gatsby alternative for Vue. It is data-driven meaning it uses a GraphQL layer to get data and dynamically update pages from it.

Features of Gridsome

1. Fast by default ⚡️
2. It’s PWA ready 🚀
3. Prefetching 💪
4. Code Splitting done automatically ✂️

The quickest way to put Gridsome site to GitHub Pages is by using a package — gh-pages.

tschaub/gh-pages

npm i gh-pages -D

Add a publish script to your package.json

{
  "scripts": {
    "deploy": "gridsome build && gh-pages -d dist"
  }
}

In the gridsome-config.js, add your repository name as path prefix

module.exports = {
    pathPrefix: '/path',
}

When you run npm run deploy all the contents of the build folder will be pushed to your repository’s gh-pages branch.

If you’re creating a User page