Modern Static

Because the static… is the new dynamic

Let me start with a fact, I was technologically raised as a WordPress child. I had some real fun exploring new themes & plugins, creating mine later and in general playing with WP in the LAMP playground. Together we had great times but we also had some difficult ones. I will never forget how many hours spent debugging the most nonsensical errors causing white screens of death after core or plugin updates. Even more stressful and risky is the process moving a WP site from a hosting provider to another. So, having some demanding projects following I decided to go down to the web technology market and find some new and cool technologies to use.


At this point, I got introduced to the static website generators, an increasingly popular approach to building websites and blogs. Static website generators are File-based and Database-free CMSs that run locally on your machine providing “dynamic” features and then generate static html files to be easily uploaded on your host. The whole process is automated and is usually executed using the command line. There are quite a few site generators out there to choose, built on languages like Ruby, Python, Node.js or even PHP (who doesn’t love PHP, right?).

The process to create a new website is trivial. Firstly, you have to create the file structure for your new local CMS. That is done by running the corresponding command at the terminal or just by downloading the whole thing from the creator’s website. Most of the times the structure is pretty clear and leads you on how to start developing your website. From that point the process of creating your webpage or blog should be summarized to these three things: Templating, Styling, Automation.

Templating is the process of adding some “dynamic” functionality to your static html layout. This is achieved by inserting tags that can be dynamically loaded providing for instance, webpage titles, meta and content from the separated content files. Therefore, you can have one layout file and any number of content files providing the content to that single layout file. The benefit is obvious, that you don’t have to copy the structure of the webpages over and over. Every website generator comes with a set of supported templating engines so you can choose whatever fits best to you. Some good ones I’ve seen or played with are the eco, Haml, jade and mustache. There are lots of them so don’t spend much time deciding. Just go with the one that your site generator offers as the default.

<% if @projects.length: %>
<% for project in @projects: %>
<a href=”<%= project.url %>”><%= project.name %></a>
<p><%= project.description %></p>
<% end %>
<% else: %>
No projects
<% end %>

Now that the layout and content files are separated we could start writing some content to populate the pages. But content files are html as well, so your will have to write these boring html tags all along. Or maybe not… This is a great point to get introduced to Markdown, a text-to-html conversion tool for web writers. As the name implies you can write plain text in a specific format and markdown is smart enough to parse and transform it into html. So you can spend more energy on writing and less on putting tags.

### Header 3
> This is a blockquote.
>
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

Since you have the layouts and content already created it’s time for some hardcore css coding, right? No, don’t just start writing your styles. CSS coding is fun but requires a lot of effort. What if you had a more compact and smarter syntax to write your styles easily but still be compatible with the web standards? Well, you have and CSS preprocessors offer this to you. The syntax that the preprocessors offer varies but always remain more compact and powerful than the CSS itself. Take a look at Stylus (my favorite), SASS and LESS. Each one of them comes with the required tools to convert the CSS on steroids you write in the specific syntax to the old plain CSS. I will not get into detail what exactly they offer but to mention some highlights they support variables, code snippets, functions, conditional statements and more.

textarea
input
color #A7A7A7
&:hover
color #000

At this point you are ready to upload to your host the files created by the static website generator using Filezilla or any other ftp program. But if you also care about performance your files should be concatenated and minified before uploading, right? This doesn’t sound much dificult but since you will be working locally the website you will be probably uploading it very often, making the process boring and tiring. This is why you really need Grunt.js. From my personal experience it is a bit dificult to understand what Grunt exactly does when you start reading about it but by the time you get it you will wonder why you were not using it all that time. In brief, Grunt is a javaScript automator. You define some typical tasks like css minification, file concatenation, ftp-deployment, etc. and when you are ready to deploy you just have to run the command grunt and everything will be executed magically, every time.


As a conclusion of this post I would say this, it is now easier than ever to create a static-dynamic website and blog. Given the power of the tools they provide you will still have the functionality of a full featured CMS like Wordpress but much less headaches and things to worry about. My personal favourite website generator for the moment is Docpad. It offers all the required tools like the ones described above and a lot more than them. It is based on Node.js and is totally free. So go get it and start playing now.