I finally decided to move away from my own blog engine to go (literally ^^) to an static site engine.

djouxblog on rails

I like very much my blog engine. But it needs attention and maintenance to avoid security issues. Unfortunately rails and the different gems are complex pieces of software so it’s really mandatory to follow the security bulletins. Going to a static web site simplify every thing. Static pages are not the best attack vector :)

Also i don’t like the need to be online to write articles. Epiceditor is a great markdown javascript editor. And it’s well integrated in my blog engine : epiceditor

But you still need to be online to write articles and writing in a web browser is not so comfortable. Writing markdown files on your laptop with your favorite editor(hello SublimeText :) ) is an big improvement.

I also liked the possibility to restore a previous article version : history_article

But now i can use git directly to manage article versioning. It’s again an improvement :)

Migration to hugo

I switched to hugo. It’s in golang. I discovered it like that. It’s pretty fast and easy to use. It use content written in markdown to generate html pages through templates.

Installing hugo is easy. It’s only one binary. You can follow the installation instructions at hugo website : hugo installation.

You create your new website by specifiying the target directory :

  hugo new site ~/Documents/djouxtech
  cd ~/Documents/djouxtech

After that, you need to configure your site by editing config.yaml(or toml if you prefer this format) :

BaseURL: "http://www.djouxtech.net"
LanguageCode: "en-us"
Title: "Djouxtech"

  Author: "Alain Dejoux"
  DateForm: "Mon, Jan 2, 2006"
  Twitter: "adejoux"
  Github: "adejoux"
  ShowRelatedPost: True
  Disqus: "djouxtech"
  SyntaxHighlightTheme: "solarized_dark.min.css"

  tag: "tags"
  category: "categories"
  wiki_tag: "wiki_tags"

  post: /post/:title/

MetadataFormat: "yaml"

Themes contains the templates which will format your site. The topic itself is long. It’s better to look at hugo documentation to have all the informations.

I forked the theme i use currently. it’s available here

To install the theme :

mkdir themes
cd themes
git clone https://github.com/adejoux/hugo_theme_beg.git

Importing my articles was easy because they was already in markdown and accessible from the edition page in my application.

Now we generate a new article :

hugo new post/blog-migration.md
/home/adejoux/Documents/djouxtech/content/post/blog-migration.md created

It’s creating the file in markdown format.

You have some meta-data in the file header. Called Front matter in Hugo.

comments: true
date: 2015-03-22T16:20:13+01:00
title: blog migration
tags: ["blog"]
draft: false

It’s pretty simple to understand and straightforward. Again it’s very well explained on hugo documentation website.

Markdown itself is pretty simple to understand. The best is to look at Markdown-Cheatsheet.

hugo will generate a static website based on this templates and the theme files. The good part is you can run hugo in server mode to see your modifications directly on your web browser :

hugo server --watch --theme=hugo_theme_beg
0 of 14 drafts rendered
0 future content
21 pages created
0 paginator pages created
17 tags created
0 categories created
0 wiki_tags created
in 135 ms
Watching for changes in /home/adejoux/Documents/djouxtech/content
Serving pages from /home/adejoux/Documents/djouxtech/public
Web Server is available at http://localhost:1313/
Press Ctrl+C to stop

Now it’s possible to connect on http://localhost:1313/ to see the web site.

It will see when changes occurs and generate again the website.

Change detected, rebuilding site
2015-03-22 17:11 +0100
0 of 14 drafts rendered
0 future content
21 pages created
0 paginator pages created
0 categories created
0 wiki_tags created
17 tags created
in 117 ms

117ms to generate pages. Pretty quick :)

It’s really efficient for writing articles. You modify your files and the modifications are immediately visible in your browser. It’s really great with dual screen :)

Note : all pages are generated in the public folder. If you change things in the theme itself. It’s better to remove the folder and run hugo again. To have a clean state. Some files which don’t exist anymore in your templates could still exist in public folder.

Synchronizing with your production environment is really easy. You only need rsync :

rsync -avz public/ user@mysite:/www/monsite/

future improvements

I liked the aspect of the previous version : djouxblog_site

I hope to be able to modify the current theme to something better. I moved away from bootstrap and found it great to be able to understand most of my site css code. Another thing is to put back my wiki pages. It didn’t contain many things but i would like to have it back. And adding a section for project would be good. We will see what i will implement in the following months.