My dillema when creating this blog for DBC is that I wanted a consistent layout. I wanted things re-usable. Unfortunately, because github.io only allowed me to use html pages, I always had to make a copy of my template and make changes directly in the HTML.
This was not letting my blog grow. It was stuck with the limitations of HTML. When I had over 12 blog entries and wanted to make changes to the layout, I had to edit the HTML 12 times! This is where Jekyll comes in to rescue my blog!
Jekyll is kind of like a semi-matic blogging platform built on ruby. It allowed me to define a reusable header and footer to wrap my content and blog posts together. It also does a lot of the organizing for me, such as making the URLs SEO friendly, adding the propper header code unique to each page, and make my website scalable!
Getting started is really easy! With what I learned from DBC from these past 7 weeks, making a blog on Jekyll was a walk in the park. We start off with the command line!
This will generate a bunch of files in the specified directory. The ones you have to pay attention to are in the _includes, _layouts, _posts. These three folders are the skeleton of your new Jekyll blog. Includes contains html chunks that can be used to stitch a template together. It contains your head html(which links to your CSS and other meta stuff you need to do). Header is the actual part of the HTML body that goes before your content. In combination with the footer, this will wrap all your pages together to build a great html page! Whenever you want to make changes such as adding Google Analytics code, you just need to do this once, and jekyll will wrap it up for you.
In the post folder, you can put in your blog entries in markdown format. This is much easier to read that regular old HTML! You can add everything from your categories to tags that will allow the Jekyll to link everything for you. Once you have imported your old blog into the Jekyll markdown format you can test to see how its running. Jekyll comes with a webserver that will allow you to test on localhost.
The real beauty of Jekyll is that everything is pre-rendered. A website that is database driven will usually die once it gets too much traffic. This is because the endless ammounts of queries the database has to make everyime someone visits the page. Because blogs are rarely updated, it makes sense to have all the posts rendered in HTML so that no queries to the database has to be made. Jekyll will do that automatically for you, so next time your blog hits reddit, HN or slashdot traffic, you will be ok!
Make sure you build and deploy locally to test your site!
Now browse to http://localhost:4000 and enjoy! This entire blog you’re reading is on Jekyll!
About the Author
Hello, I'm Ronald Ishak, a tech entrepreneur, blogger, father, developer from Jakarta Indonesia. I use this blog to document what I learn. If it helps you, please consider leaving a comment or sharing it!