Ready to take your Jekyll site to the next level from Github pages? Learn how to use Firebase’s global content delivery system to have complete control over your development process and hosting.
Reasons to Use Firebase
Firebase is a mobile and web application development platform. Firebase provides static website hosting, just like Github pages. Below are a few reasons you may want to consider Firebase over Github for hosting your static site:
Manage Multiple Environments — Interested in testing SSL certificates before deploying to production? How about search engine indexing? Interested in testing in an environment not production? Github pages offers one hosted site per user. This means no development site unless owning two Github accounts sounds is appealing. In Firebase you can host multiple projects. One project can host a development site. One project can host your production site.
Web Application Hosting — If the time comes to expand your static website to a web application Firebase functions will seamlessly allow you to build out your webapp from the comfort of your static site. For example if you want to create dynamic content in a portfolio you could route the requests to the portfolio page to Firebase functions which would serve up your dynamic content.
Deployment Control — Did you just deploy a huge mistake to production and need to rollback? With Firebase, just login to the console, find the latest deployment, and click the rollback button. Simple. In Github pages you would need to revert to a previously stable commit and push the branch to Github.
Route Control — Firebase provides flexible static website hosting. You can configure routes easily in Firebase.
Hosting Overview with Jekyll, Travis-CI, and Firebase
Jeykll is a static site generator. The product is a simple and flexible solution for bloggers.
Travis-CI is an managed continuous integration service to build and deploy projects in Github. Travis-CI is free for public projects on Github. The service offers flexible build configurations and integrates with many popular products for deployment.
I develop this site locally and push changes to Github, Github notifies Travis- CI, Travis-CI builds this site in a container and deploys to Firebase to host the static content.
Firebase Hosting Setup
You will need to install the Firebase CLI. The Firebase CLI is a node package easily installed with npm.
Change directories into your Jekyll project directory. Initialize the Firebase settings within the project directory with
The initialization will create a file in the root of current directoy called
firebase.json. You may customize the hosting behavior in this file with URL redirects and rewriters.
Generate Authentication Token for Travis-CI
Travis-CI will need to be able to authenticate with your Firebase app. Generate an authentication token for your project by using the continuous integration login feature with Firebase CLI
When complete an authentication token should be printed to the terminal. Save the key in a safe and private location for later.
Travis-CI Deployment Setup
Add Travis Build for your Github Repository
Setup a Travis-CI build for your Github project. If you were using Github
pages this would be
<username> is your Github
username. See the getting started docs for Travis-CI
Test a Simple Build on Travis-CI.
Add a file
.travis.yml to your project in a feature branch. The following
simple build will use a container with Ruby v2.3.1 installed, pull the Github
project branch with new changes, install the dependencies for the project,
build the Jekyll site and list the contents of the site.
.travis.yml file and push the feature branch to your Github
project. Login to Travis-CI and navigate to the main dashboard. You should see
a build starting for your feature branch. After the build completes you should
see the contents of the compiled static site listed in the log.
Deploy Site to Firebase
Install Travis-CI CLI
We will need to use the Travis CLI to encrypt the Firebase authentication token. Install Travis CLI with ruby by installing the gem
Login to the Travis CLI client.
Enable the Github repo with Travis-CI. When a repo is enabled in Travis-CI Github will push notifications to Travis-CI whenever a change is made to the repo.
Encrypt the Firebase Authentication Token
If you are hosting this repo publically you will need to encrypt the Firebase authentication token in the Travis-CI build file.
Follow the instructions to encrypt the key from the terminal. When complete you should see a YML snippet with the encrypted key.
Use this key in the next step.
Add Deployment in Travis-CI Build
Travis-CI has many plugins for deploying to other services including Firebase. The deployment plugins allow for easy configuration of common deployment scenarios. For example in this blog build I am able to deploy to a Firebase project only from a build off a specific branch and maintain an encrypted authentication token for the Firebase API.
After the build step in the
.travis.yml file add the following:
This configuration tells Travis-CI to deploy the contents built in the script
step to Firebase. The
token/secure should be the encrypted token generated
by the Travis CLI in the previous step. The
project should be the Firebase
project you wish to host the static files on.
skip_cleanup instructs Tracis-
CI to leave any generated artifacts alone. The
instructs Travis-CI to only deploy when the build branch is
.travis.yml file should look like the following:
Finally you will need to configure which files to deploy to the Firebase
project. Edit the
firebase.json file to instruct Firebase to deploy the
_site, the Jekyll-generated static files.
You made a change to your Jekyll site. You committed the change and pushed the
change to your Github project. Github notifies Travis-CI to start a build.
Travis-CI finds the
.travis.yml file in your repo. Travis-CI spins up a
container with Ruby installed, installs the gems required by your project,
installs Jekyll then runs a Jekyll build. Travis-CI authenticates with
Firebase then deploys the static files built from the
branch. Firebase hosts your website effortlessly for you.
The continuous integration solution with Travis-CI and Firebase used for hosting gives you greater control over development of your site. Firebase empowers you to manage multiple environments, extend your static site to a web application and rewrite URLs in the way you need. Travis-CI allows for full control of your build and deploy process. This hosting solution will unlock possibilites for you static blog.