Post/Code

HomeAboutUsesNow

Gatsby and Circle CI (Part 2).

Since my site runs on Gatsby, and the setup of my source branch in respect to my GitHub page was not ideal, I set about to update this setup. The steps I planned to take were two-fold:

  1. Update Gatsby and all the plugin dependencies.
  2. Sort out my repo structure so that I can keep both my source and serving folders in one repo. (Thus enabling a Circle CI build)

Updating Gatsby was simple enough, after a few false starts, I took the following approach:

  • Deleted my node_modules folder.
  • Deleted all my dependencies and devDependencies.
  • Re-installed all the necessary dependencies.
  • Made a few code updates in order to enable the migration. (These steps are highlighted here)

Once that was sorted out, I set about updating my repo structure. A few points on this topic:

  1. User repositories that use GitHub pages with same username can only serve their GitHub pages from master branch. (Only project accounts have the option to serve from either a master or gh-pages branch.)
  2. Within master, you can serve your site from a /docs folder.
  3. The challenge here is that Gatsby only builds into a /public folder. Changing the name of the output folder is not supported by Gatsby.
  4. A workaround here is to create a new script in your package.json to rename the public folder to dist once the build task has completed. Something like:
...
"rename": "mv public docs",
"rebuild": "gatsby build && npm run rename",
...

Once running the task, the site will be built as per usual and the folder renamed. This folder then needs to be added to the repo (since public is excluded via .gitignore): git add docs

Then push to master.

In my case, my GitHub page is now serving me README.md file at the homepage. However, I am hoping that, it is just taking some time for GitHub to realise that my index.html file has moved to my /docs folder.

Hence me writing this post in order to kickstart another deployment. Fingers crossed!

Update: I was misguided in my attempts above. As it turns out, personal user accounts do not have the ability/option to serve their front-end from a gh-pages branch, nor do they have the option to serve the files from a /docs folder. These are only available to 'Project' repos. As a result, while I learned a lot through this exercise, I have ultimately had to revert to my old deployment process for now. I will need to look into hosting my front-end elsewhere so that I can incorporate a pipeline and clean up my repos a little.