Let's Get It Working!

Topics: jekyll, github pages

Here we go! Coming late to the game but I’m finally diving into setting up a website on Github Pages. It’s super fun and pretty simple to set up.

The Github Pages documentation is a really well written, the Jekyll too. Reading up on a couple of guides like Jonathan McGlone’s.. So far so good.

I would like to start by building a simple, minimalistic web page using a static site generator. As in Simple is Better.

I like the ideas of the Jekyll Bootstrap, and I can see there are definitely a few alternatives out there but I’m thinking of experimenting with the basics first as a learning experience. So, pure Jekyll it is.

It’s fun to see a basic “Hello World” rendering as soon as you have an index.html and _config.yaml. With adding a 404 page and a css file, one can start adding some style and content.

Having at least one default layout file allows you to keep the reusable html components separated in one single file. Beside being highly reusable, this can be utilised to try and write content pages completely in markdown. If you fancy markdown. I didn’t make up my mind about it yet.

An example markdown file: index.md

---
title: My Website
layout: default
---
{{ page.title }}

An example layout file: default.html

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    <div class="container">
      <div class="header">
        {% include header.html %}
      </div>
      <div class="body">
        {{ content }} <!-- the content generated from the markup file -->
      </div>
      <div class="footer">
        {% include footer.html %}
      </div>
    </div>
  </body>
</html>

The include tags you can see in the example are pretty handy too - you can separate common snippets into their own files and maintain structure and readability.

Now I’m off to build this website..

Published on: 27 Feb 2016