We wont get into the details of all of the awesomness of Firebase but we will use the Hosting service. With Firebase hosting we can host our blog and even get a SSL certificate to secure our site for free. Now since our host is for static files it means they are really fast at downloading but it also means our site isn’t dynamic or has a database. So we will use a static site generator.
Static site generators are great for sites that don’t have content that changes often. Sites such as blogs or simple company sites work great with static site generators. One of the most popular static site generators is called Jekyll. Jekyll is designed specifically for blogs. There are many different static site generators with various pros and cons but we will start with Jekyll.
To start we will need to download Jekyll. To install and create a new project run the following commands: If you are running windows there is a little more installation work you can read about here.
gem install jekyll jekyll new my-awesome-site cd my-awesome-site jekyll serve
Now that we have created our site lets run it locally by running
jekyll serve. Now you should see something similar to this:
Jekyll has a built-in templating system that allows us to create reusable templates and use markdown files for our blog posts.
I won’t go into the details of how Jekyll all works but I recommend checking out the getting started page
on the Jekyll docs. To prepare our blog for deployment we will run one last command
jekyll build. This will generate our site and place it into the
_site directory. Note, any static site generator
will work great with Firebase Hosting.
Deploying with Firebase
Jekyll is commonly used with Github but using Firebase Hosting we get some added benefits such as SSL certificates, ultra fast CDN, and URL redirect support. So now that we have our blog built lets set up a new Firebase app.
Select “Create New Project” and give your project a name. Now we will deploy our site.
To deploy we will need to install the Firebase CLI tool. To install make sure to have the latest NodeJS installed and then run
npm install -g firebase-tools.
Now that Firebase Tools are installed we can run
firebase init inside our website project.
Firebase will guide through a few setup options. First we want to select the hosting option to deploy to.
Next it will ask about our database rules, we can leave the default for now. Next it will ask what directory to
use to use to deploy the static file from. We will enter
_site. This is where Jekyll generates
and adds all of our websites static files.
Next the CLI will ask if we would like to set up redirects for single page app sites. We wont need this for our site. Last the CLI will ask which project you would like to use so we will select the project we created in the Firebase website console.
Now that our project is all set up we can simply run
firebase deploy to deploy our code to our
Firebase host. You should be able to see your live blog with the Firebase subdomain generated for you in the
In the Firebase console go to your newly created project and select the hosting tab on the right. Now select the Custom Domain button. You should see something similar to this:
Now follow the steps and add your Domain information and Firebase will automatically partition a SSL certificate for your domain for free. Now you have a fast, free and secure blog built on Firebase and Jekyll!
Web Component Essentials
Build reusable UI components with my new Course & E-Book!Start now!