My photo

Mildred's Website

My avatar

GoogleTalk, Jabber, XMPP address:

GPG Public Key
(Fingerprint 197C A7E6 645B 4299 6D37 684B 6F9D A8D6 9A7D 2E2B)

Static website architecture

Sun 24 Apr 2011, 09:13 PM en website

This website is made of static pages. I see two good reasons for that: first, there is no need to recompute endlessly the same information. Then, with static pages, you can leave your web site online forever without having it defaced.

So, how to create a modern web site with that? First, I have to start with what I want:

This can be achieved using an off-line compiler that creates a hierarchy of HTML files. Many of these compilers exists, I choose nanoc, but I had to customize it, mostly using nanoc3_blog.

Some features can be easily provided:

Now, a word about design:

Pagination, this is frowned upon by the nanoc author as demonstrated on the guide:

First, a word of caution: I am not a fan of paginating items. Even though pagination is fairly easy to do in nanoc, I recommend not doing it, for one specific reason. Every time an object is added to a paginated collection, one object shifts from one page to the next. When a paginated page is bookmarked, it may show entirely different content a month later, and when a paginated page turns up as a result on a search engine, it may no longer contain the content that the person was looking for anymore. To avoid these issues, I recommend creating separate pages for each category, tag or year. Having said all this, I’ll nonetheless show you how to do pagination in nanoc, so you can get an idea of how it can be done.

In order to avoid having the object shifting pages, the most simple solution is to have the pages remain static. Say you want to have 10 items per page, the first page starts empty until it has 10 items. When an 11th item is added, a second page is created with one element. For blogs, it might seem to be in reverse order, but for archives, this is not a bad solution.

The pagination system must be uniform and available for any page on the website. This way, the index page and tag page can have the same pagination system. The pagination system must also support creating atom feeds. This way, we can have a feed for the whole blog and a feed per tag. In nanoc, this can be done using alternative representations for an item.

Comments, can be done using JavaScript. For a first solution, this is acceptable, even though having a solution working with user agents without javascript is a goal. For this, we can use jQuery and XmlHttpRequest. Because the server only provides static pages, XmlHttpRequest, having a same-origin policy, will refuse to work. There are several solutions:

For now, I am using the XmlHttpRequest solution with the CORS mechanism on the API server to allow communication. Here is where I'd like to move:

For the static form, here is what i'm thinking of:

This way, comments would be available for everyone.