How to create a blog in less than a minute

Yo dawg! I heard you like blogs. So I started a blog and blogged about how to create a new blog. So you can learn to blog while reading this blog.

Hi everyone! I'm Matthieu Moquet, a french PHP web developer, currently working on the future of the awesome BlaBlaCar startup. To introduce myself in a few words, I'm a Symfony lover, an Android fanboy, an intensive git & vim user, and this blog will be all about that.

For my very first article, let's see how this blog was created, in a very simple way, using Jekyll.

Jekyll is a simple static site generator. It will transform all your HTML & markdown/textile content into ordered HTML files. It allows you write articles in simple text files and create static HTML pages, but without repeating the layout of your site.

Prerequisites

You must:

  • be able to install Jekyll: sudo gem install jekyll
  • know basic markup languages such as HTML, Markdown, and Yaml
  • know Git and have an account on Github (optional but useful to make it online)

Initialize the structure

First we're going to create the basic structure of our app. The content of each folder we need is described in Jekyll Usage page:

$ mkdir _layouts _posts
$ touch index.html _config.yml _layouts/{default,post}.html

You can customize the default configuration by editing the _config.yml file. For now, let's configure the permalinks of each post, with the date and the slug. There is an option to make pretty URLs automatically:

permalink: pretty

Create a basic layout

Let's have something to watch! We'll now create the layouts and the homepage.

  • _layouts/default.html will contain our main layout (header, body & footer)
  • _layouts/post.html will overload the default one to had the structure of the article (a title, some metadata and a body)
  • index.html will contain what we want to show on our homepage (for instance, the list of all blog posts)

Now what about the content? Jekyll offers you several variables to display your content. It uses the Liquid templating system to display them. If you're familiar with templating engine like Twig or Jinja, you should feel confortable with it.

The inheritance system works by using the content variable in the layout file, which will be replaced by the content of the file using this layout. Specifying a layout can be done in the Front Matter of any file.

Lets see an example of a basic structure:

_layouts/default.html: defines the basic structure

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Blog</title>
</head>
<body>
    {{ content }}
</body>
</html>

index.html: defines the homepage where we list all blog articles

---
layout: default
---

<h1>Blog post</h1>

<ul>
    {% for post in site.posts %}
        <li>
            {{ post.date|date_to_string }} »
            <a href="{{ post.url }}">{{ post.title }}</a>
        </li>
    {% endfor %}
</ul>

_layouts/post.html: defines the post layout

---
layout: default
---

<article class="post">
    <header>
        <h2>{{ page.title }}</h2>
        <time datetime="{{ page.date|date: "%Y-%m-%d" }}">
            {{ page.date|date_to_string }}
        </time>
    </header>

    <div class="entry">
        {{ content }}
    </div>
</article>

And then I just have to add a new markdown file in the _posts directory (following the convention YYYY-MM-DD-slug-of-the-post.markdown) to add a new blog post:

---
layout: post
title: This is an example
---

Hi folks! This is an example of content.

That's it! We've created a blog in a few lines. You're now ready to push it online on GitHub.

Go further

Of course, Jekyll has a lot more features not presented in this article. The best way to learn is to have a look at the many sites using Jekyll.

Here are some quick improvements you can do:

  • enable RSS feeds by adding an atom.xml file
  • enable dynamic comments with services like Disqus or Livefyre (javascript only)
  • use code highlight with Pygments

There are also plenty of plugins (written in ruby) you can use.

To simplify the installation of Jekyll, you can even use JekyllBootstrap which will initialize the structure for you and put it on your Github account. It has several themes you can use if you don't want to play with CSS.

I also recommend to read how Jekyll was born, a nice article by its creator which will give you a better understanding of the spirit of static blog generators like Jekyll.