For most newcomers to web development, dynamic websites are the standard in Web 2.0 interactions. But that was not always the case.
When Tim Berners-Lee created the internet, as an information-sharing portal between scientists, web pages were static HTML documents.
Websites, at the time, were a collection of these static documents, stored in its entirety and there was minimal other interface on the server side.
With the introduction of CGI, or Common Gateway Interface, this changed. CGI allowed websites to run scripts and this enabled the web server to be more than just a storage facility of static HTML documents. The output of the scripts could be run on the server and displayed back on the website.
This led to dynamic websites — websites with which you could interact and communicate. Along came a host of server side technologies and websites become more like applications being served on the web server.
However, when it comes to aspects like speed, reliability and scaling, static sites offer unmatched performance. For use cases where content does not change often, such as blogs, landing pages, documentation and portfolio sites, static sites are a great solution.
A static website is delivered to the user exactly as it is stored on the web server.
The most common challenges are:
Deploying a static site has a steeper technical curve than publishing via a content management system like WordPress, Drupal or Django.
There are limitations to what can be offered on the client side. For example, for an eCommerce site, the static route would not be a great idea. Similarly, for monetizing web pages using targeted marketing ads, static sites would be a dead-end (though you can always put banner ads on a static site).
The former is a speed bump, but tools like Lektor and Publii (more on them below) are making it easier to lower the barrier of entry. Jekyll, one of the most popular static site generators, is also growing in adoption.
This article compiles a list of the resources you need to serve up your very own static site.
Note: If you have no previous experience with a static site before this, no worries. This article covers static site generators and CMSs that can help in that. I’d really advocate the “seeing-is-believing” approach when it comes to appreciating the performance of a static site. So just go ahead and jump into static sites with one of these tools.
One of the essential characteristics of a static site generator is that it serves up a simple source folder, which is a self-contained static website in itself. Hosting this folder on the server will deploy the static site. Here is an exhaustive list of options when it comes to static site generators.
One of the most popular static site generators, it supports importing from many dynamic blogs. It’s written in Ruby and is the engine behind GitHub Pages.
Extremely fast and flexible. It’s written in Go. It comes with a bare bone structure in place so that you customize down to the smallest detail.
Written in Python, Pelican can handle content input in multiple formats (Markdown, reStructuredText etc.). It also provides multilingual support beyond English.
Written in CoffeeScript and built on Node.js. It’s minimalistic, but can be customized and scaled with plugins.
Written in Ruby. Ruby language and RubyGems need to be installed to run Middleman. Minification, compressions and cache busting are built in. It follows Ruby on Rails conventions.
Built on top of the Jekyll framework, the difference is that it does away with the time consuming parts of setting up a Jekyll site like configuration. It’s written in Ruby. The latest version, Octopress 3.0, restructures the framework so that each features becomes an extensible gem with its own documentation. This way users can customize and choose the parts of Octopress that they want to implement on top of Jekyll.
Written in the Haskell language. It is well suited to small and medium sites.
Written in PHP and with a very simple setup. It combines plain text files with Twig templates to generate static pages.
Written in Rust, which gives it great compilation speed. It comes as a single executable file with no dependencies. Gutenberg also has Sass compilation and syntax highlighting built in.
Written in PHP. Jigsaw ompiles assets using Laravel Elixir. Elixir can be pre-configured so that the site is rebuilt automatically every time a change is deployed.
Written in Python. It provides a fully customizable data model the ability to define custom taxonomies. It is good for creating static sites beyond blogs.
Written in Python. MkDocs is aimed at creating quick project documentation with Markdown. It allows previews as you build and can be hosted almost anywhere.
Written in Python. Cactus is easy to develop locally and deploy directly to Amazon S3. It has the option to preview the site from the development web-server built in.
Written in CoffeScript. DocPad is a dynamic static site generator; this means that it takes content from several sources and renders them as a static output. It has a tiny core with non-essential functionality offered as plugins, which means its lean and extensible.
Static site generator that turns folders of images and videos into photoessays. It runs as a bash script and requires Imagmagik and FFmeg to work. Ideal for users who need a photo portfolio or gallery. This is a great example of what can be done with Expose.
Written in CoffeeScript. Good for building static front ends, especially small to medium sized.
Written in Python. It provides incremental builds and supports multiple input formats — reStructuredText, Markdown, IPython Notebooks and HTML.
You may ask why do I need a CMS if I’m using a static website? Well, the one thing that CMSs do simplify is access for non-technical users and enabling that content bottlenecks do not occur because of just one pipeline to push content. The issue with a lot of static site generators is that there is a fair amount of technical deployment. These CMSs can help with that.
1. Netlify CMS
Open source; Works with most static site generators; Git-based.
Free personal plan, paid plans starting from $9/site/mo; Supports Jekyll and Hugo; Git-based.
Free developer plan, paid plans starting from $7.20/mo; Supports Jekyll; Git-based.
Free developer plan, paid plans starting from €9/mo (discounts for more than 1 site); Supports — Jekyll, Hugo, Middleman, Metalsmith, GatsbyJS, Hexo; API-based.
Open source; Publishes websites as static HTML files; App-based.
Open source; Drag and drop editor for HTML and PHP websites.
Free starter plan, paid plans start from $25/mo; Supports Jekyll; Git-based.
Open source; Publishes sites as static HTML files; App and API-based.
Free plan till 14 publishings per week, Paid plans start from $0.5–$20.5; Supports Hugo; Git-based.
Plans starting at $10/mo; Supports Jekyll by default but can support other static site generators; Git-based.
Free developer edition, paid plans starting at $249/mo; Supports Middleman, Jekyll, Metalsmith; API-based.
A static site can load up to 6 times faster than a regular web page! Considering such numbers and the effects that can have not just on user experience but also on the Google ranking and SEO, static sites are surely an area worth considering for your own website.
If you’re looking to build your own site then these articles may also be helpful:
This article was first published on the zipboard blog.