Blog

In Praise of Static Websites

In the beginning, there were static web pages. We had to be tech savvy and know HTML to publish anything. Then came Content Management Systems (CMSs), which not only allowed non-technical users to publish without knowing HTML, but also made web pages dynamic and interactive. Now, static web pages seem to be making a bit of a comeback. What's up with that?

Update: Since this post was written, the site has been moved to another SSG: Lektor.

What, Exactly, is Meant by Static?

The meaning of the word "static" depends on the context in which it is used:

Page Creation
The word "static" in "static web pages" means that the complete HTML page is stored on the web server, and therefore the content is not retrieved from a database and merged with an HTML template each time it is displayed. This is the kind of "static" I mean.
Layout
A page with static layout is not responsive, i.e. it will not adjust to the size of the device it is being viewed on. This is unrelated to whether the pages are stored as HTML. Even a CMS-driven dynamic website can create pages with a static layout. Similarly, an HTML page can be responsive and adapt to the device.
Content
Some might think that a "static web site" contains content that can never be updated. This is not true. Content can be added or modified in text files, and then the HTML page(s) can be rebuilt. (See the Workflow section below.)
static website example
Figure 1: The former JbrCodes website; the current one is static too

Static vs Dynamic

The difference between static and dynamic sites is the point at which the web pages are created (and the frequency). For static sites, a static site generator (SSG) is called once for each page -- to merge the content with the HTML template -- before it is published. For dynamic sites, this merging process is repeated every time someone visits the page. (However caching on dynamic sites can make this less of an issue.)

There are many articles on the web that compare the pros and cons of static sites versus dynamic ones. The main advantages of static sites are:

  1. Static sites are fast. A page isn't (re-)built every time it is viewed, as with most CMSs.
  2. Static sites are secure. An HTML page can't be hacked, unlike most CMSs (WordPress, Drupal, Joomla!, etc.).
  3. Static sites require a minimal web server environment. No database is needed. No scripting language (like PHP) is needed. (It's true, most Internet service providers (ISPs) include those things in even their cheapest hosting plans.)
  4. Static sites require no maintenance. Once they are launched, you can effectively forget about them (if you don't make updates). With dynamic sites, there are occasional updates to the CMS that must be manually installed.

The main advantages of dynamic sites are:

  1. Dynamic sites typically offer WYSIWYG editing, preferred by most non-technical editors. (A few SSGs offer such an editor too.)
  2. Dynamic sites can offer greater interactivity, such as user accounts, shopping carts, or anything that requires a database (which is most sites these days). (Static pages are capable of some interaction; the Congress Navigator and Choropleth Maps posts are examples.)
  3. CMS-based sites typically require less technical knowledge. In fact, many ISPs offer one-click installers for WordPress and other CMSs.

If you want to read more about the comparison, this article is a good place to start.

Workflow

Static site generators typically use the following edit/build/deploy workflow:

  1. You edit (or create) a text file containing the content you want to publish.
  2. You build an HTML page, which merges your text file with an HTML template. The result is a local file that you can view in a web browser, and edit if needed, until you are satisfied with it.
  3. Once the content looks good, you deploy the new/modified HTML page to a live web server. The page is now visible to everyone.

An Example

Figure 1 above shows this site's home page. In other words, this is a static website. (Look at the bottom of each page to see when it was generated.) It's an example of the proverbial eating one's own dog food.

There are literally hundreds of static site generators already out there; so why on earth would I create yet another one? Well, I did it for two main reasons:

  1. as a learning exercise (using Python and Jinja2)
  2. to create a minimalist solution that meets my minimalist requirements

My SSG was heavily influenced by Lektor. (In fact, I have switched.) Here were a couple of the useful features of my version, which Lektor also has:

  • Content is written in Markdown so that I can concentrate on content and not formatting. Markdown may not be a good solution for pages that have complex layouts with lots of fancy graphics (neither are CMS editors, for that matter), but for text-centric documentation it's great.

  • Each page has its own sandbox for its particular needs. Some of my demos/examples need to include extra CSS or JavaScript files. I can specify those files in the content metadata (see Figure 2) so they will be included only when that specific page is built.

  • Static pages can still have some interactivity, thanks to JavaScript. See the Congress Navigator and Choropleth Maps posts for examples.

  • I can define dependencies between content files. For example, when I add a new post, the post index page is marked as a dependency and will be rebuilt. Likewise, the home page is dependent on the post index page, so it will be rebuilt too. An HTML page is only rebuilt if its content has changed, or if it is dependent on a page that has changed.

title: Congress Navigator
ctype: blog-post
thumbnail: congress-thumb.jpg
publishDate: 2018-03-28
embedCss1: Congress.css
embedJs1: {jquery}
embedJs2: Congress.js
Figure 2: The metadata for the Congress Navigator post

In Summary

Are static websites "better" than dynamic ones? It depends on you and your needs. Do you have mostly text-based content to publish, and are you at least somewhat tech-capable? Then you might prefer a static site. On the other hand, is your site more interactive (with an online shop, for example), or are you less comfortable with technology? Then a dynamic CMS-based site might be better for you.

Published: 14 Jun 2018