
See the Gatsby Publish Action for more information. You can use GitHub actions to push your Gatsby site to GitHub Pages.

Note: Don’t forget to add your CNAME file to the static directory. Path prefixing is only necessary when the site is not at the root of the domain like with repository sites. If you use a custom domain, don’t add a pathPrefix as it will break navigation on your site. If you are deploying to branch different to main, replace it with your deployment branch’s name in the deploy script.Īfter running npm run deploy you should see your website at Deploying to the root subdomain and using a custom domain If you go down this route, you will need to add an extra option for -repo (works for https and git urls) in the gh-pages command below.
#CREATE REACT APP GITHUB PAGES CODE#
Have a separate repository for your source code (so is used only for deployment and not really for tracking your source code).This means you do not necessarily have to change your default branch.
#CREATE REACT APP GITHUB PAGES HOW TO#
Note: GitHub Pages lets you use any branch for deployment, see this docs page on how to do this.Change the default branch in your repository settings (“Branches” menu item) from main to source.To create a new branch called source run this command:.Change the default branch from main to something else, and use main as a site deployment directory only:.

So if you use main for development you need to do one of these: ⚠️ Keep in mind that GitHub Pages forces deployment of user/organization pages to the main branch. Deploying to a GitHub Pages subdomain at github.ioįor a repository named like, you don’t need to specify pathPrefix and your website needs to be pushed to the main branch. To address this, use the -f option from the gh-pages command to avoid keeping an history of the GitHub Pages branch. This might slow down operations like clone and increase disk usage. ⚠️ As your repository will grow and get more commits, so will your gh-pages branch. If you don’t have a main or gh-pages branch, you can create them and then return to source settings to change your publishing source. Note: To select main or gh-pages as your publishing source, you must have the branch present in your repository. Make sure that your repository’s settings has the gh-pages branch set as the source to deploy from. When you run npm run deploy all contents of the public folder will be moved to your repository’s gh-pages branch. Then add a deploy script to package.json in your repository’s codebase: You’ll need to add your /reponame path prefix as an option to gatsby-config.js: Specific instructions Deploying to a path with pathPrefixįor sites deployed at a path like /reponame/, the -prefix-paths flag is used because your website will end up inside a folder like /reponame/. See the instructions below how to configure it (as it depends on what option you’ll choose). This will make it easier to publish your Gatsby site to GitHub pages.

You can add a custom deploy script to the "scripts" section of your package.json. The best way to push a Gatsby app to GitHub Pages is by using a package called gh-pages.
