New website with Hyde

Vincent Bernat

My previous website was generated (dynamically) with mod_autoindex, a module from Apache targeted at rendering an index page for the files contained in a directory. Pretty basic (but themable). Here is a new revamped web site using Hyde, a static web generator written in Python.

Static or dynamic?

It has been a long time since almost everybody is creating dynamic websites. Most often, they are powered by some blog engine written in PHP like DotClear or WordPress. Infrequently, they are crafted with bare hands using one’s preferred language. Nowadays, hosting a dynamic website is pretty easy. There are a lot of cheap virtual servers solution that allow you to get a root access.

However, dynamic websites have some drawbacks:

  • Security need to be monitored tightly, especially security upgrades; some platforms are more often vulnerable than others.
  • Dynamic websites may have some problem to handle increased load.

With a static website, security problems are easier: there are far less components to monitor and most of them (for example, the web server) are pretty solid and well audited.

A site powered by nginx can handle several thousands of new connections per second without any special tuning. Getting this kind of performance with a dynamic website is far more difficult. Scaling is also easier. Just add more webservers and copy the content. No database, no synchronisation mechanism needed.

Hosting can even be done on simple platforms like Amazon S3, even if there is now more appropriate platforms for this like Amazon CloudFront.

Moreover, even a static website can receive comments using a system like Disqus which leverages the use of Javascript to add comment system to any static page.


Hyde is a static website generator written in Python. There exists a lot of those beasts. On StackOverflow, a question about this got some interesting answers. You will also find a fairly complete list on this blog. If you like Ruby, I assume that nanoc and Webgen are good candidates.

Let’s go back to Hyde. It was rewritten recently and the documentation is a bit incomplete. You will need to read the source code or look at examples (like the shipped one or this site) to understand how things are handled. Everything is handled by a plugin system. I hope it will not become a mess in one year (I play a large part in this).

Hyde takes your files, apply a lot of filters on them and generate the final website. It uses Jinja as a template system, Markdown for markup syntax, Less to write CSS in a more efficient way (and to minify them), UglifyJS to minify Javascript, etc. It is also possible to add metadata to files (title, author, creation date, etc.). But since everything comes as a plugin, you can use any technology you like.

In the end, you can tune all knobs but you need to do most of the work (HTML, CSS, Javascript), as well.

Conveniently, there is a small web server that rebuild modified files on the fly. This comes handy but this is a common feature with this kind of generator.

New website

Here is a new website crafted with Hyde. It is translated both in French and in English. This is done with the help of a small plugin. I am quite happy about the result.

Technically, there is one minified CSS file, one minified Javascript file and the dependencies (like jQuery) are loaded with the help of yepnope.js which will become part of Modernizr.

I don’t want to support Internet Explorer 6, but I plan to support Firefox 3, Internet Explorer 7 and recent versions of Chrome and Safari.

For the design, I have always been undecided. I am pretty impressed by some raw website but also by some others more elaborate. Since I am not a talented graphic designer, I have tried to keep things plain and simple.

If you are interested, sources are available on GitHub!

Share this article

The comments on this website are powered by Disqus and require the use of Javascript. Please enable Javascript or try with a different browser.

💬 You can read or publish comments. The comment system is powered by Disqus and its use relies on cookies.