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
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.
- Proceed to click on Create a project.
- Enter a project name and check yes if you wish to add analytics to your project.
- Wait for the project to be created.
Go to the 🌍Hosting tab on the sidebar and click on Start.
Firebase will ask you to install a client with the following command :
// 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
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.
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.
You can click on the address that looks like this : https://test-59961.web.app/ and your website will appear !