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 allows you to get root access.
However, dynamic websites have some drawbacks:
- Security needs to be monitored tightly, especially security upgrades; some platforms are more often vulnerable than others.
- Dynamic websites may have some problems handling an increased load.
With a static website, security problems are easier: there are far fewer 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: add more web servers and copy the content. No database, no synchronization mechanism needed.
Hosting can even be done on simple platforms like Amazon S3, even if there are 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 a comment system to any static page.
Hyde#
Hyde is a static website generator written in Python. There exists a lot of these 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, applies a lot of filters to them, and generates 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 rebuilds modified files on the fly. This comes in 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 into French and 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, and one minified JavaScript file. 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 websites 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!