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.

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

Create a repository named like username.github.io

Note: In this case you don’t need to specify pathPrefix and your website needs to be pushed to master branch.

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

After running npm run deploy you should see your website at http://username.github.io

Run gh-pages — help to list all the supported options

Useful npm scripts for gh-pages

• If your source is in a private repository, create a public repository named about, the source code will reside in the private repository and the static content generated from the build will go into the public repository, add the repository name in gridsome.config.js

{
    "scripts": {
        "deploy": "gridsome build && gh-pages -d dist --repo <url>"
    }
}

• Deploy to another branch [Not gh-pages]

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