Host your own blog with Jekyll on Firebase and Travis CI
Tags: firebase, travis, jekyll, tutorial
Published: 2020-04-18 11:18:55

I always wanted to have my own domain and so with a cool email address. And so, I came across [Ionos](https://www.ionos.com/office-solutions/create-an-email-address?ac=OM.US.USf11K357090T7073a&kwk=668406507) with its relatively cheap domain name and email hosting. With $1/month, it came with 2GB email storage and a customised .net domain, and 1000 subdomain. What a deal! And, so I this post will walk you through all the process.

|Table of Content|
|----------------|
|1. [Firebase Hosting](#chapter-1)|
|2. [Create new Jekyll site](#chapter-2)|
|3. [Deploy site to Firebase](#chapter-3)|
|4. [Add to your Github](#chapter-4)|
|5. [Travis CI to trigger new build](#chapter-5)|

<a name="chapter-1"></a>
##1. Hosting on Firebase 

I have mine through Ionos. You can choose any domain provider as well. Now, with your domain ready, it's time to choose a hosting provider. In this case, I choose Firebase Hosting, because "IT'S GOOGLE". Seriously, it's because of it's relatively cheap rate and some generous free tier. Also, Google CDN is fast and Firebase is just simply Awesome! The pricing is available [here](https://firebase.google.com/pricing).

####Create a new project in Firebase
Step 1, choose your project name.
![Step 1](https://dev-to-uploads.s3.amazonaws.com/i/g5xx7zl14lon5flmu6t9.png)
Step 2, this is optional. To make things easier, we will just turn off the option.
![Step 2](https://dev-to-uploads.s3.amazonaws.com/i/z9931atpf4szm8m6dhq5.png)
Step 3, wait the project to be created.
![Step 3](https://dev-to-uploads.s3.amazonaws.com/i/lnf48ga2cwe7mqhi5i7x.png)

####Link your domain with Firebase Hosting
Now, once your project is created, head over to your project and click on the **Hosting** tab.
![Step 4](https://dev-to-uploads.s3.amazonaws.com/i/2km4al9mlus60sdsmx3p.png)
Click on get started, and then click **Next** on step 1 and step 2, then click on **Continue to console** as shown.
![Step 5](https://dev-to-uploads.s3.amazonaws.com/i/kq8t2ytb5dvz1074cgbn.png)
In order to let Firebase know that we have our own domain, click on **Add custom domain**, and the following will popup.
![Step 6](https://dev-to-uploads.s3.amazonaws.com/i/2hspr37vm4ma85mobcxb.png)
Now, in the domain column, type in your domain and then click on **Continue**. The next step will require you to verify the ownership of the domain. You will see the following TXT record.
![Step 7](https://dev-to-uploads.s3.amazonaws.com/i/5jyuu7l4320kue98e2eu.png)
Copy the TXT record and then add them to your domain dashboard. 
![Step 8](https://i.imgur.com/n0TX1SK.gif)
Once the verification is done, you will need to add A records to your domain.
![Step 9](https://dev-to-uploads.s3.amazonaws.com/i/5e5bu4km1rzbd2tex082.png)
Copy the A records and paste in your domain, the same step as per adding TXT record.

Now, your domain is linked to the Firebase hosting. yay!:heart_eyes:

<a name="chapter-2"></a>
##2. Setting up Jekyll
Prerequisite:
* [Git](https://git-scm.com/download/)
* [Ruby](https://www.ruby-lang.org/en/downloads/)
* [Node JS](https://nodejs.org/en/download/)
* [VS Code](https://code.visualstudio.com/download) or any code editor

Once all the above is installed, run the following code in your newly created folder.

```bat
1  gem install bundler jekyll
2  jekyll new my-awesome-site
3  cd my-awesome-site
4  bundle exec jekyll serve
```
* Line 1 & 2 will install Jekyll and build a simple Jekyll site.
* Line 3 & 4 will execute the newly created site and serve it at `http://localhost:4000`

You will see under your folder as shown below.
![Step 10](https://dev-to-uploads.s3.amazonaws.com/i/pepatnbut0hydxz64nkv.png)
When you execute line 4, your terminal/command prompt will display as follows.
![Step 11](https://dev-to-uploads.s3.amazonaws.com/i/8p1is1a85wf5z5pzllvv.png)

> :bulb: If you encounter this `Your user account isn't allowed to install to the system RubyGems.`, simply just follow the instruction given. Exit the installation and then just run `bundle install --path vendor/bundle` inside the directory.

When you head over to `http://localhost:4000`, you will see the following.
![Step 12](https://dev-to-uploads.s3.amazonaws.com/i/v35qe670ye502e0w51bj.png)

> :warning: Notice that there is a new folder "_site" after you run `jekyll serve`. When running Jekyll serve, it will use `jekyll build` and then the static site will being generated.

> :bulb: To create a new post, simply add them into `_post` folder. Remember, it's a markdown file, so here's the [cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)!

:beers: And you have just set-up a site!

#####This site is so simple, I want something special!
Yes, you can just download theme [here](https://jekyllthemes.io/free). That's the drawback of Jekyll, you need to know some coding skill to modify the layout. 

<a name="chapter-3"></a>
##3. Deploy your site to Firebase
Now that you have a simple blog setup, you want to host on Firebase. It's just simple. Follow the steps below!

Step 1, Install Firebase CLI Tool
```bat
npm install -g firebase-tools
```
Step 2, Then, login to your firebase.
```bat
firebase login
```
> When the prompt ask `Allow Firebase to collect CLI usage and error reporting information?`, just type in `Y`.

* First you will saw a browser popup asking you to sign in your account.
![Step 13](https://dev-to-uploads.s3.amazonaws.com/i/n7tqqgdpu292f5lnrz25.png)
* Choose your account and allow.
![Step 14](https://dev-to-uploads.s3.amazonaws.com/i/msie53qixkypw774ywrk.png)
* Once success, you will see this.
![Step 15](https://dev-to-uploads.s3.amazonaws.com/i/6pbmyr456y88dwt7kndj.png)
* In your command prompt / Terminal, you will see this.
![Step 16](https://dev-to-uploads.s3.amazonaws.com/i/99263sjnpr71p9z72qdu.png)

Step 3, Initialise your project to firebase.
```bat
firebase init
```
* Use down key to choose *Hosting* and space bar to select. Then, hit enter.
![Step 17](https://dev-to-uploads.s3.amazonaws.com/i/l2mqj6og56km88f6e1sk.png)
* Since we have created a new project earlier, thus, we choose **Use an existing project**.
![Step 18](https://dev-to-uploads.s3.amazonaws.com/i/wcma2i11srayiprpqpxc.png)
* Select the project.
![Step 19](https://dev-to-uploads.s3.amazonaws.com/i/ib6b877bupmn17lpb2md.png)
* Key in `_site` as your public directory, `Yes` to configure as single-page app and `No` to overwrite the index.html.
![Step 20](https://dev-to-uploads.s3.amazonaws.com/i/wzc7ikeo20ssm5lcapy8.png)

> :warning: These step will create two new files under root folder.
* `firebase.json` contains information about public folder and route.
* `.firebaserc` contains information about firebase project.

Step 4, (Optional) Deploy the site to Firebase.
```bat
firebase deploy
```

This will deploy to firebase hosting. When your command prompt / Terminal shows success, means your site is live!
![Step 21](https://dev-to-uploads.s3.amazonaws.com/i/yxw0omaah4qb1atdapyl.png)

This is cool **BUT** we don't want to do this everytime we add a new post, right? Ideally, when we write a post and it shall be show in the website without deploying manually.

<a name="chapter-4"></a>
##4. Github
Github is perfect for source control. And, there is some reason to consider,
* It won't loss, if you were to save in your hard disks, if they fail, it's all GONE!
* Rolling back to last successfully build if we messed up.
* Editing old files and republish them easily.
* FREE, so why not?

Step 1, Head over to [Github](www.github.com) and create a new repository.
![Step 22](https://dev-to-uploads.s3.amazonaws.com/i/ezybtvckkvuvsinclja4.png)
> Public or private? Your choice!

Step 2, Now, Git everything in the folder!
```bat
git init
git add .
git commit -m "First commit"
git remote add origin [YOUR_GITHUB_URL]
git remote -v
git push origin master
```
_Replace `[YOUR_GITHUB_URL]` with your Github repository link._

> :bulb: Whenever you have done something (eg add a new post), just remember to `git add .` and `git push`.

<a name="chapter-5"></a>
##5. TravisCI to automatically update every new post
Last step! There's several CI tools out there, like CircleCI, TravisCI, etc. But, I gonna use TravisCI.

Step 1, Go to [TravisCI](https://travis-ci.com/). Create a new account and sync with your Github.

Step 2, Once done sync with your Github, go to your dashboard, choose the repository you created and click **Trigger Build** button.
![Step 23](https://dev-to-uploads.s3.amazonaws.com/i/k8oi7svakzutbvv7t58w.png)

Step 3, Configure Travis.
Travis uses YAML script, a very simple language and in order to let Travis know you have the script ready, save them as `.travis.yml` under the root folder. Use the script below. Travis is just like you doing the manual deploying, but automagically! 

(a) Before configuring, you must need to have Firebase Token ready. In order to get the token, in your Terminal,
```bat
firebase login:ci
```
In your terminal, copy the token. 
![Step 24](https://dev-to-uploads.s3.amazonaws.com/i/5oxzauakmo72gqnolij5.png)

(b) Copy the following script and save as `.travis.yml` in root folder.
```yml
language: ruby
rvm: 2.4.1

branches:
  only:
    - master

notifications:
  email:
    on_success: always
    on_failure : always 

script:
 - gem update --system
 - gem install bundler
 - bundler update --bundler
 - gem install jekyll bundler
 - bundle exec jekyll build

after_success:
  - firebase deploy --token "[YOUR_FIREBASE_TOKEN]" 

env:
  global:
  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer

sudo: false
```
_Replace `[YOUR_FIREBASE_TOKEN]` with your Firebase token obtained in step 3a._

> The script is simple. It basically lists down what we did earlier for manual deploying.

(c) Add the file to Github repo.
```bat
git add .
git commit -m "added travis.yml"
git push origin master
```

Step 4, Watch the build done automatically everytime there's update to your Github repo.
In your TravisCI dashboard, you will see something like
![Step 25](https://dev-to-uploads.s3.amazonaws.com/i/msi53tk1hc8h1irwn3o7.png)

##5. What's next?
(a) Use Markdown editor to write new blog posts under `_posts ` folder. The documentation can be found [here](https://jekyllrb.com/docs/posts/).
(b) Add file and commit
(c) Repeat.

![Done GIF](https://media.tenor.com/images/45a77fafd65507de4242fb29498ab004/tenor.gif)

<a href="https://www.buymeacoffee.com/hongvin" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png" alt="Buy Me A Coffee" width = "140px" ></a>