Host Jekyll site on Google Firebase with free SSL

Host Jekyll site on Google Firebase with free SSL

simplify your static site deployment

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.1

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.2

On MacOS with Homebrew, just use to 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 machine.

Now run this command to login:

$ firebase login

Then, your browser will automatically open and it asks to give some permission 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 thing for Firebase.

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. And don’t forgot to use _draft folder, so jekyll don’t generate it those pages 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 a history of deploys and manage custom domains.

On the Hosting tab of the Firebase 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 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 certficate 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 service. Firebase already write well excerpt about what to do, so just read and follow it.

Deploy with Travis CI

In Travis, you can also install the Firebase CLI and deploy your site automaticly 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 it to GitHub…

Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.4 billion 🇨🇳. This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Setup an IKEv2 server with StrongSwan

Tutorials

2020.01.09

Setup an IKEv2 server with StrongSwan

IKEv2, or Internet Key Exchange v2, is a protocol that allows for direct IPSec tunneling between two points. In IKEv2 implementations, IPSec provides encryption for the network traffic. IKEv2 is natively supported on some platforms (OS X 10.11+, iOS 9.1+, and Windows 10) with no additional applications necessary, and it handles client hiccups quite smoothly.

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.