Deploying a Gatsby Site to Firebase with CircleCI
I’ve been building static sites for a while now, using generators like Jekyll and Hugo. While these have been great, I‘ve been searching for the “holy grail” of website development. Taking the best of the dynamic and static worlds and fusing them together. Because let’s face it, we all want our static sites to be a little more dynamic, but we still want all the benefits static sites offer. Fortunately, I think I might have found this “holy grail” with Gatsby.js.
I don’t think it’s fair to call Gatsby a static site generator, because it’s much more than that. If you haven’t heard of Gatsby before, definitely go check it out.
While Netlify and S3 are great places for hosting (some of my sites use both of these), I’ve always had a slight preference for Firebase Hosting. However, it doesn’t come with one important feature that Netlify does, Continuous Deployment. Therefore, unless you want to run
firebase deploy every time you want to deploy your website, you’ll need to set up a service like Circle CI. So this post will help you get everything up and running. Let’s dive in!
Setting Up Firebase
There aren’t too many steps to get Firebase up and running. Once you login or create an account on the Firebase website, you’ll want to add a project. Then you can go to Hosting in the sidebar, and click Get Started. This will show you how to add the Firebase Tools CLI, create a Firebase project in your folder and how you can manually deploy a site. And of course, you can add any custom domains too.
In the CLI, after you run
firebase init you’ll want to select Hosting and then the project you created. Under Hosting Setup, you can keep the default
public. Then type
N to decline single-page app rewrites and choose not to overwrite your 404 and index pages.
Now you should be able to run
gatsby build and then
firebase deploy to deploy your Gatsby website to Firebase! If this works for you we are now ready to get continuous delivery working with Circle CI.
But before we setup Circle CI, we’ll need to add Firebase Tools as a dev dependency in your Gatsby project. You can do this by running
npm install --save-dev firebase-tools. If this is successful you can go and check your
package.json file and you should see it added. This is how mine looks.
*This is also probably a good time to add your project to GitHub if you haven’t already.
Setting Up Circle CI
We’re now ready to setup Circle CI.
First, at your project’s root, you’ll create a folder called
.circleci and then add the following
config.yml file inside.
*Make sure you use the same node.js version you‘re developing your Gatsby site with. I’m using Node 8, so that’s what I have in the config file.
Next, we’ll need to generate a token in Firebase for Circle CI to use as an environment variable. To do this run
firebase login:ci and copy the token it generated.
Now you’ll want to login to Circle CI and add your project’s git repository to Circle CI. When setting up the project, you can select Linux as the Operating System, and Node as the language and then click “Start Building.” The first build will fail because we haven’t added our Environment Variable for Firebase yet! To fix this, go to the project’s settings and then “Environment Variables.” When adding the variable, under name type
FIREBASE_TOKEN and then paste the token you generated under value.
Now make a commit to your repo, and voilà! You are now using Circle CI to deploy your Gatsby site to Firebase!
You can check out a sample project repo here: https://github.com/jonathancary/gatsby-circleci-firebase
Hope you enjoyed this tutorial! Let me know if you have trouble getting this to work.
Previously, I have not been an active participant in any dev circles, but I’m really wanting to change this. So plan on seeing more posts like this as I dive into Gatsby and many other things. Once my portfolio site is finished, I plan on making it a public repository and creating some tutorials about it. Time to start paying back for all the amazing tutorials I’ve read, that have gotten me to where I am!