We launched the new evocode.com this week using metalsmith, a static site builder and the alpha release of bootstrap 4. We wanted to share some of our discoveries and discuss how we will be building our websites in the future.
A content management system like wordpress, dynamically generates the HTML pages for each pageview on the fly. This is computationally expensive so it is generally recommended that you use several layers of caching from the database, objects, to full pages. This pre-computes the HTML pages to avoid re-calculating it for every user to free up the server’s CPU. Every new page request fetches the cached version of the HTML and serves it from disk. With several layers of caching this can be complex as you have to invalidate that cache whenever a change is made, or serve outdated HTML until that cache expires.
A static site builder like metalsmith generates HTML and saves it to disk. The web server then serves HTML the old-fashioned way like it’s 1995. As you can tell this vastly reduces the complexity of a website, but now you need to re-generate the HTML whenever the content or structure changes. As this site has a high read-to-write ratio (content changes infrequently, but many visitors will read it in the meantime), it is much more efficient to generate it only when there is a content change vs dynamically generating it for every visitor.
There are currently 395 static site generators listed here at the time of writing this. We chose metalsmith because it was the 2nd most popular JavaScript based generator and had a focus on extensible architecture. Since everything is a simple plugin, we knew we could easily make modifications as necessary. It also offered flexibility around the template language, which we selected handlebars.
In hindsight, metalsmith does have some shortcomings. The lack of documentation added an extra day of experimentation and figuring out the best practices. However, we quickly built this site in several days even with the additional experimentation time, so it was definitely worth the time spent.
We also decided to try out the alpha release of bootstrap 4 to really test out the new direction they are taking. I can definitely say that bootstrap 4 is incredible and the pre-release version is actually quite stable. They switched from Less to Sass, which integrates nicely with our existing toolchain. While the new site is currently JavaScript free, we initially built out a version that used Babel and ES6 to take advantage of the newest JavaScript features.
We aren’t sure of which static site generator is the right fit for us yet, but we are sure of this: we’re excited about static sites and what we like to call hybrid static. We are currently exploring new ways to make static sites have dynamic functionality and also exploring isomorphic web sites which are rendered to static html and bootstrapped back into a JavaScript single page site. This has made our website:
Extremely fast. You simply can’t beat serving static files. The files can also be served from a CDN to have insanely fast response times around the world.
Easy to learn. HTML, Markdown, YAML, etc is all easy to learn. A good static site builder can be picked up in a day or two. The barrier to entry is so low that you can easily switch tools based on the project requirements vs retrofitting a project into a CMS that you already know.
Minimal maintenance. There is nothing to hack and hosting on a scalable CDN or static site host gives near infinite scalability at very minimal cost.
As mentioned above, there are currently gaps that need to be filled in for more advanced sites. We will be exploring hybrid static sites, dynamic functionality, isomorphic, content management APIs, searching, etc going forward. We will be writing in more detail about all of our discoveries and best practices in the coming months.
If you have any questions or are interested in using static sites for your next big project, feel free to ask us any questions about our process.