Setting Up Jekyll
13 Jan 2019 - 3 min read
> Home

This post directly follows on from Hit the ground running and is probably best consumed with an environment that resembles what I had at the end of that post.

A Jekyll layout

This certainly isn’t award winning stuff, but by the end you will have the minimum viable product of a blog.

The Structure

In the root directory, create a _layouts directory, then create _layouts/default.html with the following content: In the root, create _layouts and in that default.html and post.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

This will serve as the default template, from which further templates will be built, and possibly simple pages will be compiled against. The first of the further templates to be built off default will be _layouts/post.html

---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

This layout starts with what Jekyll calls front matter [jekyllrb.com], this allows the layout to inherit from the default but adds the extra bits needed for a post.

Next step is the home page for the blog, create index.html, this will list the most recent posts with the newest first:

---
layout: default
title: Home
---
<h1>Latest Posts</h1>
<ul>
    {% for post in site.posts %}
    <li>
        <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
        <p>{{ post.excerpt }}</p>
    </li>
    {% endfor %}
</ul>

At this point, the site is functional in a minimal state. Typically, a slightly more mature home page would be used, adding some more structure, this becomes:

---
layout: default
title: Home
---
<section class="header">
    <div class="container">
        <div class="content">
            <a href="/"><div>The Cow Blog</div></a>
            <nav>
            </nav>

        </div>
    </div>
</section>
<section class="main">
    <div class="container">
        <div class="content">
            <div>Latest posts</div>
            <ul>
                {% for post in site.posts %}
                <li><span>{{ post.date }}</span><a href="{{ post.url }}"><span>{{ post.title }}</span></a></li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>

And the style

Time to style the site with the ever trusted, and in a lot of cases, hated CSS.
Create an assets/css directory, in which will live default.css

Rather than creating a complete style from scratch, I’ve used the Cocoa theme [gohugo.io] from the Hugo project and modified it slightly to my liking.
Link the style in with <link rel="stylesheet" href="/assets/css/default.css"> in _layouts/default.html.

Configuration

In the root directory, _config.yml should be populated with some basic options:

# Global Conf
timezone: "Australia/West"

permalink: /:year/:month/:slug/
lsi: true
future: false
show_drafts: false

Next steps

It should be obvious that this is barely an MVP, but it works and is ready to be fully customised.

I intend to document the growth and maturing of this site over time, so hopefully at some point there will be a follow up post or posts. The basic plan going forward from this point:

These are all reasonably low hanging fruit that would dramatically improve the site, but also are the only things I can think of right now. There will undoubtably be many more advancements

Contents