Updated · 5 minute read

Deploy Jekyll to Firebase Hosting

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

Key features of Firebase Hosting include:

Ready to get started?

Create a Google Firebase Account

firebase hosting homepage

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 Xcode

Go to the Mac app store and Install Xcode if you haven't already. Then install Xcode Command Line Tools with the follow command

xcode-select --install

Install Node.js using Homebrew

The Firebase CLI (Command Line Interface) requires Node.js and npm. Installing Node.js will also install npm.

To install Homebrew just open the Terminal app on your Mac and run

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

If you have previously installed Homebrew make sure you have the latest version.

brew update

Now you can install Node

brew install node

It worth mentioning you can update Node at a later date using this Homebrew command

brew upgrade node

Check what version of Node you have installed. The Firebase CLI requires Node.js version 0.10.0 or greater.

node -v

You can also check what version of npm was installed

npm -v

Installing the Firebase CLI

Once you have Node.js and npm installed, you can then install the Firebase CLI via npm

sudo npm install -g firebase-tools

When Firebase is finished installing you will need to login

firebase login

When prompted, allow Firebase to collect anonymous CLI usage information by typing Y in Terminal and hitting the Return key. Your browser will now automatically open to allow you to sign-in to your Google account and accept some permissions.

Setting up a Firebase Project

Change directory to your Jekyll website’s directory.

cd ~/Sites/Jekyll/desiredpersona

Create a Firebase project

firebase init

Running the firebase init command creates a ‘firebase.json’ settings file in the root of your Jekyll website’s directory.

In Terminal you will be prompted to answer a few questions

What Firebase CLI features do you want to setup for this folder?

The only option we need to select here for our Jekyll static website is ‘Hosting’. Press the Spacebar key to deselect ‘Database’ and then hit the Return key.

What do you want to use as your public directory? (public)

You need to set _site to be used as your public directory.

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Type the letter N for No.

File _site/404.html already exists. Overwrite? (y/N)

Type the letter N for No.

File _site/index.html already exists. Overwrite? (y/N)

Type the letter N for No.

What Firebase project do you want to associate as default?

Choose your Firebase project folder that you created earlier in this tutorial from the list. Firebase initialization is now complete!

Deploy your Website to Firebase

Open your ’firebase.json’ file located in your Jekyll website’s root directory and add any files you want to ignore when Firebase deploys your website. Here’s what my file currently looks like

{
  "hosting": {
    "public": "_site",
    "ignore": ["firebase.json", "Gemfile", "Gemfile.lock", "Rakefile", "CNAME", "README.md"]
  }
}

You can find out more about the ‘firebase.json’ file settings in the Firebase Documentation.

Just like Jekyll, Firebase has a built in server which allows you to preview your website locally using this command

firebase serve

Now you can view your Jekyll website at http://localhost:5000

When you are ready you can deploy your website to Firebase hosting using the command

firebase deploy

You can view your live website by running firebase open in Terminal. Then select ‘Hosting: Deployed Site’ which will open your live website in a new browser window.

Setup a Custom Domain with Free SSL

Open the Firebase Console and choose the Firebase project you just created.

Then select Hosting > Connect Domain and enter your domain name when prompted.

Finally you will need to update your domain names DNS settings at your registrar with the new TXT and CNAME records that Firebase provides.