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.