Static Site

Hugo

In a previous entry, I described how I got to using GitHub Pages. That was one of the (if not the) first question I had to figure out when I decided to write my notes in an Internet format (ok, blog, but I don't see myself as a blogger). The second thing I had to figure out was what to use as a writing tool. I could simply write static HTML by hand and leave it at that (actually, if you stumbled upon this website before I posted my first few posts, I left a Hello World page up for a few weeks/months while figuring all this out!). I am trying to set the bar a little higher than that for myself.

For work, I have been playing with Django and at some point, I thought I could write something in Django or use a Django CMS, but since GitHub Pages only serve static content, I had to abandon that plan. I could have done static HTML with some CSS framework like Bootstrap or Foundation. Actually, that is how I started to write all of this, but then, the same friend of mine that pointed me in the direction of GitHub Pages, also reminded me that they suggest a workflow with Jekyll. Trying to get information about that, I learned that Jekyll is what is called a static site generator and that there are quite a few alternatives out there. Looking at a few of the alternatives, I decided to go with Hugo (no pun intended), originally written by Steve Francia. I can't claim to have researched the subject extensively, but Hugo seemed like it was configurable enough for my needs/tastes, fast enough and easy enough.

Basically, the idea of a static site generator is to "build" a website telling a build system (I like to think of it as a compiler) how to construct each individual page using templates. Then, all you do is generate new (mostly) unformatted content and ask the generator to rebuild the site. This will update everything and include the new content. As it constructs these pages, the build system will make a list of the entries and collect bits and pieces of informations which it will make available to you via a templating language (Hugo being written in Go, it uses Go's templating language). You will be able to access that information more or less easily depending on the templating language and insert it in your templates. For instance, to create a page listing all the posts of the site, you could, in the template, loop through the list of posts and add each of them in a <ul> element. As another example, you can get the title of the post in the template so that when designing the page, you can style that title as you please. For instance:

<h2 style="bad idea, use CSS !"> $.Page.Title </h2>

I am not suggesting it is a good practice to style that way (as mentioned in the example), but it illustrates my point about the variables. In the templates, you can also include JavaScript or any other kind of valid HTML you want. You can therefore use a front-end CSS framework like Zurb Foundation or Twitter Bootstrap.

Alright, this is how I got to Hugo. I will stop here and start a new post on my setup. The next post will mark my first post that will actually be what I want for this little site: notes for me on how I did things. It really is necessary. Since writing the previous post, I have not done anything involving Hugo and already, I can't really remember the organization of all of this. Hopefully, taking notes will help.