DEV Community

Ludivine A
Ludivine A

Posted on • Updated on

Host a Gatsby website on Firebase

What is Gatsby ?

Gatsby is a static site generator that uses React and GraphQL. Very useful to create blogs (just like mine !), it allows you to create Single page apps very easily. Write your pages in JSX, or even better, with TSX, and write your content in Markdown, Gatsby will generate HTML and build a fast and secure website.

But Gatsby can also be used to create dynamic sites like e-commerce.

And what is Firebase ?

Firebase is a platform from Google that offers a range of tools to "build, improve and grow your app", from database to auth, hosting or file storage.

Combining Firebase and Gatsby is a great free solution to host your very own blog. So I'm going to show you how to host a Gatsby project on Firebase.

Creating a Gatsby project

Install the Gatsby client by running the following command :

// NPM
npm install gatsby-cli

// Yarn
yarn add gatsby-cli
Enter fullscreen mode Exit fullscreen mode

Run the command gatsby new to initialize your project.

Enter the project name and where you want to create it.

Gatsby offers to add a CMS, styling libraries and plugins. Select what you wish to install, select Done and press Enter.
(Installing Markdown is pretty handy if you wish to create a blog)

Wait until the project is created.

You can start the project with yarn start or npm start.

Hosting on Firebase

Creating the project on Firebase

First you need to create a project on the Firebase website.

Go to https://firebase.google.com/ and click on Get Started.

  1. Proceed to click on Create a project.
  2. Enter a project name and check yes if you wish to add analytics to your project.
  3. Wait for the project to be created.

Go to the 🌍Hosting tab on the sidebar and click on Start.

Logging in

Firebase will ask you to install a client with the following command :

// NPM
npm install -g firebase-tools

// Yarn
yarn add firebase-tools
Enter fullscreen mode Exit fullscreen mode

You will then need to log into your Google Account, in order to do that, use the command firebase login.

Then a window will pop up to select your google account. Authorize Firebase and a success message should appear.

Initializing the project

You can now use the firebase init command.

Firebase will then ask you which feature you want to add to your project. Here we will add Hosting, so select Hosting and press enter.

Then you can either use an existing project, create a new project or add Firebase to a Google Cloud Plateform project. Here we will use an existing project and select our previously created project.

Enter which directory will be the public directory, if you want to configure it as a single-page app (yes as well in our case).

You can add an automatic build and deploys to Github, but we will not talk about that in this article.

Two files will be created :

  • firebase.json holds rules of hosting
  • .firebaserc tells which firebase project you are using.

Deployment

You can now launch firebase deploy and your site will be hosted ! Go back to the Hosting page and you will discover a place to add a domain name and a history of deployments.

Firebase deploy

You can click on the address that looks like this : https://test-59961.web.app/ and your website will appear !


Originally posted on my blog. Check out my instagram account to learn more about web development.

Discussion (0)