GitHub Pages allows you to deploy your site to GitHub's free static site hosting service.
There's a few steps to complete:
-
Install
gh-pages
usingyarn add gh-pages
ornpm i gh-pages
-
Add the following to
gridsome.config.js
:
siteUrl: 'https://<your-github-username>.github.io',
pathPrefix: '/<your-gridsome-repo-name>',
- Add the following scripts to your
package.json
:
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"
-
Run the command
npm run deploy
-
Go to GitHub's website and make sure your Repo's settings under "GitHub Pages" show the
gh-pages
branch under "Source".
Notes
GitHub Pages allows you to have a "GitHub user page" that acts as a profile/main page on <your-github-username>.github.io
by having a repo named <your-github-username>.github.io
.
- If you are deploying to your GitHub user page (your main site on
<username>.github.io
)- Remove this line from
gridsome.config.js
:- pathPrefix: '/<your-gridsome-repo-name>',
- Now when you run the
npm run deploy
command, your project will be built and the contents of thedist
folder will be pushed to thegh-pages
branch which is where your "GitHub user page" will deploy from. - This also allows you to keep track of your project on the
master
branch (or any branch you want) whilegh-pages
only contains your built files.
- Remove this line from
- If you are using a custom URL such as
www.yourname.com
you will need to changegridsome.config.js
to:siteUrl: 'https://www.yourname.com',
- In addition to this, you will want to create a
CNAME
file inside/static
to avoid a known issue in GitHub Pages that results in the deployment incorrectly overwriting the custom domain setting within GitHub user settings.// CNAME custom.domain.com
- In addition to this, you will want to create a
- If you are using an apex domain for your GitHub user page (ie.
https://yourname.com
points to all of your GitHub Pages sites), and your Gridsome project is not your GitHub user page (not on the roothttps://yourname.com
page, but a separate repo), then you will need to make surepathPrefix
matches your Gridsome project's repo name ingridsome.config.js
:pathPrefix: '/<your-gridsome-repo-name>',