Personal Blog Setup

How I set up this blog using Github pages and Jekyll

Posted by Sean Chen on January 28, 2018

Note: This blog post assumes basic knowledge of Github, HTML/CSS, and how to run UNIX commands using Terminal on a Mac. Miscellaneous links to learn about the assumed knowledge are listed below the blog.

Every time that I would think about starting a blog, I would fall into the endless rabbit hole of deciding on which framework to use and how I wanted the blog to eventually look. Every time I searched for inspiration online, I would end up looking at templates and would waste so much time that I never actually created anything. This blog post is meant to help those that are in the same boat that I was in. Hopefully I can help you guys get a good start on a blog with a simple look that can be customized to your needs.

To create your personal website, we are going to be using Github Pages, github’s website hosting platform, and Jekyll, a static site generator. We are also going to use a template that was created by Start Bootstrap to get a clean looking starter blog that you can customize.

Creating the Jekyll Blog

To start off, you want to make sure that you have the dependencies for jekyll installed (a simple google search should return how-tos for each):

  1. Ruby version 2.2.5 or above, including all development headers (ruby installation can be checked by running ruby -v, development headers can be checked on Ubuntu by running apt list –installed ruby-dev)
  2. RubyGems (which you can check by running gem -v)
  3. GCC and Make (in case your system doesn’t have them installed, which you can check by running gcc -v,g++ -v and make -v in your system’s command line interface)

Next you want to install jekyll by running the following command on your command line:

gem install jekyll

This will pull in the necessary dependencies and extensions for jekyll. Once you have jekyll installed, you can go ahead and create a new jekyll app running the following command (replace “site-name” with the name of your choice):

jekyll new site-name

This should create a new directory with the same name as your app. Open up that directory on terminal, list the files in it, and you should see the following on your screen.

Then, using a text editor, open up the Gemfile and change this line gem "minima", "~> 2.0" to gem "jekyll-theme-clean-blog". What you’ve done here is change the theme from minima version equal to or greater than version 2.0 to jekyll-theme-clean-blog. Then run bundle install in your command line to pull in the dependencies for that new gem.

You are then going to edit the _config.yml file and replace the current theme with theme: jekyll-theme-clean-blog. Finally, in your terminal, run bundle exec jekyll serve. You should see that you just started a server whose address is localhost:4000. On your browser, navigate to localhost:4000 and you should see your brand new blog!

To Be Continued…

Hosting on Github

How-To Links:

  1. How To Use Git: How The Heck Do I Use Git
  2. Learning HTML + CSS: Udemy: Intro to HTML and CSS
  3. How to use the command line on Mac OSX: Intro to the Mac OSX Command Line

References:

  1. Build a Personal Website Using Jekyll Blog Framework
  2. Start Bootstrap: Clean Blog Github