Host a Gatsby website on Firebase
Tags: gatsby, firebase, tutorial, javascript
Published: 2021-12-15 14:54:11

## 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 :

```bash
// NPM
npm install gatsby-cli

// Yarn
yarn add gatsby-cli
```

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/](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 :

```bash
// NPM
npm install -g firebase-tools

// Yarn
yarn add firebase-tools
```

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v43pr23wg8pf7hjycc0w.png)

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](https://blog.ludivineachouri.com/). Check out my [instagram ](https://www.instagram.com/la.dev/)account to learn more about web development.