Website Update

Website update, using Jssg

You are seeing the new design of this site, and I wanted to talk a little bit about it, so let‘s get started.

It has been years since I did not touched this site, and I wanted to refresh it in some way. The previous web site was using Jekyll as a static site generator. While I wanted to refresh the visual aspects I quickly checked about Jekyll alternatives. What I could not found was a Jekyll-like application written in Java, so the questions were why and why wouldn’t I create one

Visual aspect

I wanted to make the site minimalist, simply because I‘m no designer. This is true, I can‘t make something beautiful with images and just plain CSS, so I kept it simple. A light gray background-color. Some shades of darker grays, a little touch of green. That‘s it.

The site is two column, and I hope it‘s legible on mobiles, I did my best for it, but eventually, it will depends on the content being served. Don‘t hesitate to tell me if it does not work correctly (I was asking myself about using something like Foundation)

I think that the user experience should be good, focus is on the content, which will encourage me to write something better and maybe more often than before.

Ease of update

Updating this site should not be a pain, it should be easy as jssg build and git push. This site is hosted on Google App Engine, the pages are being fetched from Github and my domain is just pointing on Google App Engine.

Making the site with Jssg

Like I said, I did not found a Jekyll-like application written in Java (correct me if I’m wrong) so I did wrote one. It has the same philosophy as Jekyll, but this is not a port.

I created a specific page for the [Jssg project][1] on this site if you need to know more details, but here is how the site is being build with that tool.

Directories

The site is architectured in the following way:

+ _build/
+ _layout/
|--+ index.html
|--+ main.html
|--+ nav.html
|--+ footer.html
+ _posts/
|--+ 2011-10-29-Hello.markdown
|--+ 2011-11-20-Unix-Prompt.markdown
|  ...
+ media/
|--+ css/
|--+ images/
|--+ javascript/
+ ego.textile
+ index.textile
...

Invoking jssg build will build the website by doing specific tasks

• Scan the _posts/ directory for each file having the pattern yyyy-MM-dd-.something.(markdown|textile)
  • Detect code snippets (if any)

    <ul>
      <ul>
        <li>
          Generate the <code>HTML</code> markup equivalent for the <code>Markdown</code> or <code>Textile</code> file content
        </li>
      </ul>
    </ul>
  
    <ul>
      <ul>
        <li>
          Highlight code snippets with (@Jygments@ / <code>Pygments</code>)
        </li>
      </ul>
    </ul>
  
    <ul>
      <ul>
        <li>
          Merge the <code>HTML</code> into the layout found in the <code>_layout/</code> directory using <code>Freemarker</code>
        </li>
      </ul>
    </ul>
  
    <ul>
      <li>
        Write the whole content in <code>_build/blog/yyyy/MM/dd/something</code>
      </li>
    </ul>
  </li>
  

• Scan the current directory for each file having the mkd|markdown|textile extension
  • Do exactly the same as above

• Copy everything that is in the current directory that has not already been processed into the _build/ directory

All these tasks are being executed automatically and takes just seconds.

During development jssg support a specific parameter named serve that will run Jetty (a HTTP Server) on the _build/ directory so that the site can be viewed directly. Besides, file are being observed by the jssg process, so that when you edit any Textile or Markdown file it will be reprocessed directly and I just have to refresh the page in my browser to see the change taking effects. It works also for medias like CSS, images and Javascript

Sample blog post

This is the markdown source for the first blog post of this site [Hello][2].

---
title: Hello
layout: main
description: Welcome note.
comments: true
date: 2011-10-29
url: /blog/2011/10/29/Hello
---

Hello
==============

![Hello]("/media/images/hellocat.jpg")
<p class="center">More is coming...</p>

Layout using Freemarker

The final HTML layout is resolved using Freemarker. Jssg provides Freemarker with context variables about the blog post or site page that is being rendered like the ${content} variable for the page content and ${posts} for the list of available blog posts.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
      <title>${header['title']}</title>
      <link rel="stylesheet" type="text/css" href="/media/css/style.css" />
   </head>
   <body>
<#include "nav.html">

      <div class="content">
         ${content}

         <ul>
         <#assign blogPosts = posts?sort_by("date")>
         <#foreach post in blogPosts?reverse>
            <li><span class="date">${post.date?date?string.medium}</span> — <a href="${post.url}">${post.title}</a></li>
         </#foreach>
         </ul>

<#include "footer.html">
      </div>
   </body>
</html>

[1]: http://grison.me/jssg “” [2]: http://grison.me/blog/2011/10/29/Hello “”