I recently decided to write my technical content on my personal blog instead of on Medium, but to write on your blog you need to have a blog 😀. So I decided to build one with the following requirements,

  1. I can easily manage the content and churn out new articles without having to write some HTML.
  2. Free hosting (you cannot pay for everything 😁).
  3. Custom domain name.
  4. Should have TLS and certificate should be free.
  5. Deploying new content should be easy.

I searched around some possible options like Wordpress, Drupal, etc… they did not really meet my expectations so I decided to check out the personal blog of some developers, I found Jake Whartson’s Blog and Chris Bane’s blog interesting because of the simple style and then I saw an article on how Chris had built his using a tool called Jekyll which is a tool that builds your blog as static web pages, this sounded cool because I had built my business card web page http://oziomaogbe.com as a simple static site and I hosted it on Firebase Hosting for free and I was able to get free SSL certificates too, building the blog would not be any different, so I decided to go with that option. I would build the blog using Jekyll, host it on Firebase, host the code for the website on Github (I could have used any Git service, like Bitbucket on Gitlab but I wanted to see my contributions grow on my public profile 😉). I had used Tavis CI for my business card too so I decided to use it for deploying the blog to firebase anytime I push my changes to Github.

Lets get to the fun stuff

Let's get to the fun




Building the blog

  1. Setting up Jekyll:

    The downside to Jekyll is that you have it know some coding to modify the layout of your blog, but there are many free Jekyll themes available and this site is using one of them, also you have to write your blog posts as Markdown but with markdown editing tools like Stack Edit this is not any different than writing in Medium.com. To setup Jekyll you have to install it using Ruby you can do so by running the following commands

       $  gem install bundler jekyll
   $  jekyll new my-awesome-site
   $  cd my-awesome-site
   $  bundle exec jekyll serve

    this would install Jekyll and build a sample jekyll site and serve it at http://localhost:4000 you can create and edit your blog posts as markdown in the folder _posts in your website’s home directory. Here is a sample of what your website folder would look like
    Ozioma’s Blog, you can edit metadata to your site using the config file in the home folder of the website.

  2. Github:

    The code for the jekyll website is hosted in a Github Repository.

  3. Firebase: I used firebase hosting for hosting the blog since it is just static content and firebase hosting is free and also gives you free SSL certificate, also deploying to firebase hosting is quite easy, for information on how to set up firebase hosting you can check out the Docs.

  4. Travis-CI: I wanted easy and quick deployment of new content for the blog so I used Travis CI hooked to the Github repository. Here is my travis yaml file

    language: ruby
rvm: 2.4.1
before_script:
   - cd blog
script:
 - gem update --system
 - gem install bundler
 - bundler update --bundler
 - gem install jekyll bundler
 - JEKYLL_ENV=production bundle exec jekyll build --verbose
 - cd ..
 - ls
deploy:
   skip_cleanup: true
   provider: firebase
   token:
     secure: "FIREBASE_CI_TOKEN"

This deployment setup handles both deploying to my business card website http://oziomaogbe.com and the blog http://blog.oziomaogbe.com but since they are both hosted on the same Firebase project their deployment process is the same, we only had to make sure the Jekyll blog is built correctly and that is why we had the scripts

cd blog
gem update --system
gem install bundler
bundler update --bundler
gem install jekyll bundler
JEKYLL_ENV=production bundle exec jekyll build --verbose

Travis handles the firebase deployment so I did not have to explicitly run the firebase deployment commands, I only had to supply the firebase json file https://github.com/Oziomajnr/Ozioma-Personal-Website/blob/master/firebase.json and generate a a CI token using

firebase login:ci

and then encrypt the generated token using

travis encrypt "GENERATED_FIREBASE_TOKEN" --add

this encrypts the firebase CI key and gives you a public key that you can use in your travis yaml file since that file is kind of public.

So that is it, next I would write about how I migrated my content from medium to my Jekyll blog.

It's over

Let me know in the comments below if you tried it out and also if you had any issues in the comments below.