What is Firebase Hosting?

Firebase Hosting is a developer focused static web hosting provider that is super fast, secure and reliable. You can quickly & easily deploy your static websites to a global content-delivery network (CDN) with a single command.¹

Key features of Firebase Hosting include:

• CDN-backed global content delivery
• Free Automatic SSL certificate provisioning
• Custom (and even naked) domain support
• One-command deploys, one-click rollbacks

Getting started

Create a free Google Firebase account

Sign in to the Firebase Console and create a new project. You will be prompted to enter a “Project name” and choose a “Country/region”.

Install Node.js

Firebase CLI works with Node.js (version 0.10.0 or greater), so you have to install Node.js on your system. Just visit Node.js website and get your specific setup file then install it on your system. And don’t forgot to add environment path variable in your system, so you can easily use your favorite command line shell from everywhere.²

On macOS with Homebrew, just use the following command to install Node.js:

brew install node

Install Firebase

First time installation:

Once you have Node.js installed, you can install the Firebase command line tools via npm:

$ npm install -g firebase-tools
# or use sudo (with caution) if required by your system permissions
# sudo npm install -g firebase-tools

This command installs the globally available firebase command.

Updating previously installed Firebase tools:

If you have a previously installed version of Firebase command line tools, you can easily update them to the latest version:

$ npm update -g firebase-tools

*# or use sudo (with caution) if required by your system permissions*

*# sudo npm update -g firebase-tools*

Now this will install all necessary firebase packages.

If you see any error like an upgrade to v4.0 on Windows, just ignore the error. After a few minutes all the packages will be installed on your local machine.

Now run this command to login (authenticate the CLI):

$ firebase login

Then, your browser will automatically open and it asks to give some permissions to Google.

If you want to deploy your site with continuous integration system such as Travis CI, you can get your Firebase token by:

$ firebase login:ci

Store the output token in a secure but accessible way in your CI system.

Setup Firebase project

Just like we use jekyll new to create a new jekyll website, here we do the same with Firebase project.

Choose your favorite location, and go to that directory with cd command.

Now run this command to initial the project:

$ firebase init

The same like Jekyll that generate many folders (layout, post, include, config, etc.) for us, Firebase will also generate configuration files along with your options.

Generate your Jekyll site

Now come back to your Jekyll website, you can copy your jekyll files to your firebase project’s root directory and build your site to the public folder:

$ jekyll build -d public

Check your local site with Firebase

We all know, we can easily see our Jekyll website locally though 127.0.0.1:4000, similarly, you can check that public folder with Firebase command. Just run:

$ firebase serve

Your site now locally available though 127.0.0.1:5000 or localhost:5000.

It is really good to see how your site will be live before you deploy it online. And don’t forgot to use _draft folder, so Jekyll don’t generate those draft posts in the public folder.

Deploying your site

To deploy your site, simply run the following command from your project directory:

$ firebase deploy

When Firebase successfully deploy it, the CLI will say visit this URL to see your site live. So just visit it, you will see your site is live with Firebase’s sub domain like https://projectxyz.firebaseapp.com.

Adding a custom domain

Firebase Hosting will handle provisioning an SSL certificate for your domain and serving your content over its CDN.

Verification of domain ownership

Before setting up your custom domain you’ll need to deploy your site to it’s own firebaseapp.com subdomain. This will give you access to the hosting admin panel, where you’ll be able to see the history of deploys and manage custom domains.

On the Hosting tab of the Firebase web app you’d like to associate with a custom domain, select the Connect Custom Domain button.

You will need to update the DNS entries for your domain by adding two TXT entries. The entries are visibly available on the Hosting tab once you start the process of adding a custom domain. Depending on your domain name server host, this verification step may be instant or it may take an hour or more…

Provisioning an SSL certificate

Once domain ownership is verified, it will provision an SSL certificate for your domain and deploy it across Google’s global CDN.

By checking its IP address, it might be the Fastly CDN just like GitHub Pages.

Activate your domain

The final step will involve modifying the DNS for your domain to point to Firebase’s servers. Firebase already write well excerpt about what to do, so just read and follow the instructions.

Deploy with Travis CI

In Travis, you can also install the Firebase CLI and deploy your site automatically by pull your GitHub repository. For the deploy step, you can access your Firebase project by your Firebase Token that stated above.

$ firebase deploy --token "${FIREBASE_TOKEN}"

Now, just focusing on your writing and push the contents to GitHub repo… Happy coding and writing… ✍️