Building This Site

So, I decided to open source the code for my site. It’s generated using Jekyll and Twitter Bootstrap. Jekyll works by taking your HTML wireframes (in my instance, provided mostly by Bootstrap) and CSS and runs a templating engine through it. Then, when it’s time to make a post, I open up my favorite text editor and start typing away (in Markdown). Take 2014-01-21-building-this-site.md for example:

---
layout: post
title: Building this site
date: 2014-01-21 22:15
---
So, I decided to open source the code for my site. It's generated using [Jekyll](http://jekyllrb.com) and [Twitter Bootstrap](http://getbootstrap.com)...

The top bit between the sets of three en-dashes is for Liquid which is bundled as a part of Jekyll. Liquid is the templating engine created and maintained by Shopify, but that’s not important right now as it is just an enabling technology that Jekyll uses. Supply some basic metadata in the first section to tell Jekyll what the HTML title tag should be, etc. Because I’ve chosen a post layout, Jekyll takes 2014-01-21-building-this-site.md, converts it to HTML, and looks for a template (modified from a Bootstrap template, in my case) named post.html and drops in the converted HTML. Bootstrap templates can be modified to your heart’s desire, but the major bit that Jekyll cares about is {{ content }} (content is just one defined variable; there are a ton of others, but you must use content). Jekyll takes my newly converted HTML and replaces {{ content }} with that HTML. The new page is placed in a date-based folder hierarchy and is given a permalink (e.g. http://btmiller.com/2014/01/21/building-this-site.html). That takes care of the actual content.

I would also like this new post to be indexed in a list on the main page. The index will require its own Bootstrap template in the same manner as the post template because each time I write a new post, the index will need to be regenereated as well – so let’s call it list-index. You can expect the list-index template to also have a {{ content }} tag where the generated HTML will be placed.

At this point, an actual index.html file needs to be created at the root of the web directory where you are serving content. This file will have more Liquid templating in the same manner as 2014-01-21-building-this-site.md:

---
layout: list-index
---
{% for post in site.posts %}
<h2> {{ post.title }} </h2>
<p> {{ post.excerpt }} </p>
<p><a class="btn btn-primary" href="{{ post.url }}" role="button">Continue reading &raquo;</a></p>
{% endfor %}

As mentioned before, Jekyll has many variables that can be called. See Jekyll’s documentation for more information regarding variables. index.html calls upon list-index to serve as the template. Next, Jekyll will loop through my _posts folder and grab the title ({{ post.title }}) and a brief excerpt ({{ post.excerpt }}) from each post, insert some additional markup, convert each to HTML and drop it in a list.

All of the code used to generate my site is on Github and is available under The MIT License. This does not include anything in:

• _posts/
• assets