How to avoid repetition in static sites with Jekyll

If you have a static web site, repetition is something that can plague you; headers, footers, meta tags in the head section of your pages, etc.

On my company’s web-site this was something that was troubling me. I was repeating many things all over the place. In particular, the header with a selectable menu was one thing that would need to be modified in all pages if I decided to change the navigation.

I did not want to bother with a database and programming a dynamic web-site for such a small project. I didn’t really need anything dynamic.

That’s when I looked into what I could do to make things drier.

Jekyll

Jekyll is a Ruby program that creates static web sites using templates. You can have default layouts with variables, includes (ie: headers and footers) and lots of other goodies. It can create a site using files in either HTML, Markdown or Textile.

Jekyll is easy to get into. It took me less than two hours to read the entire documentation, test the default boilerplate sample and convert enough of my existing web site to have something functional. Learning Jekyll and converting an existing web site is definitively a project that can be done in a week night or two.

Example

You can create include files for parts of your site like this footer file here:

</div>
</div>

<div id="footer" class="hidden-phone">
	<div class="container">       
  	<img src="./img/l1.png" class="padded pull-right">
	</div>
</div>

Create a default layout for your pages:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>NP-complet - {{ page.title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="NP-complet, consultant, Montreal">
    <meta name="author" content="Gilles Leblanc">	
    <meta name="copyright" content="© 2012-2013 Gilles Leblanc" />
    <meta http-equiv="content-language" content="fr-CA" />

    <link href="./css/bootstrap.min.css" rel="stylesheet">    
    <link href="./css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="./css/base.css" rel="stylesheet">
    
    <link rel="shortcut icon" href="./img/favicon.ico" />
    <link rel="author" href="humans.txt" />

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->
   
  </head>

	<body>
	
		<div id="wrap">
    	<div class="container">
		{{ content }}			
	
		<script src="./js/jquery-1.9.1.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
        <script src="./js/application.js"></script>
  </body>
</html>

Here {{ page.title }} is a variable that will be replaced with the value defined in the actual page. {{ content }} will likewise be replaced with the page’s content.

Next is a sample page that uses the default layout. Notice the YAML front-matter section that contains the variable definitions:

---
layout: default
title: Accueil
indexActive: class="active"
---
{% include header.html %}

<img src="./img/small_up_logo_layout.png" alt="logo NP-complet" class="visible-phone centered">		

<div class="jumbotron">		  	
	<img src="./img/up_logo_layout.png" alt="logo NP-complet" class="hidden-phone">		 	 	
</div>
	
{% include empty-footer.html %}

It makes for very neat and tidy content pages.

If you have a static web site that needs to be updated from time to time and you don’t want to go dynamic, check out Jekyll, it will save you time in the long run.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s