The roots of the web as we know it are embedded in static sites. Those static roots were the way of the way for a long time until a wall arose — they couldn’t keep up with everything dynamic sites offered.
This article was written by Daniel Madalisto Phiri as part of the Write for the community program
The reign of dynamic interfaces didn’t last forever though with problems and difficulties starting to show up in developing, deploying, maintaining, and scaling. Advancements in tools and web technologies were making the once innovative dynamic web difficult to manage while also creating the space for static sites to make a comeback.
On November 2nd, 2015, Smashing Mag published ‘Why Static Site Generators Are The Next Big Thing’. A couple years later and static sites have become ubiquitous if not nearly synonymous with frontend web development. Movements like Jamstack only help to further drive static adoption and shift the community even more towards the roots of the web with static sites.
What Exactly Is a Static Website?
For most purposes, a static site can be defined as a website that is sourced from purely static HTML files. As opposed to the limited and antiquated ways of generating static sites in the early 2000’s, 2020 has web developers spoiled for choice when it comes to static site generators.
A static site generator is what takes the source files and generates an entire website — or a static site. The process is simplified, removing the need to heavily depend on databases or other external data sources. The majority of generators also help serve basic content from blogs, company sites, product documentation, photo galleries to something as complex as full blown ecommerce platforms.
Why Care about Static Sites?
Static sites come with an array of benefits.
Less Complexity: With static sites, all you need is a web server that’s capable of serving static files. Adding in relatively basic hosting and deployment is then incredibly easy with services like Netlify and GitHub pages. You could almost say it’s a joy to build static sites!
Stronger Security: There’s little to no server-side functionality on most static setups which means less security concerns. Unless a hacker can exploit a vulnerability they find in your web server, static sites assure a more secure experience than most dynamic sites.
More Flexibility: Some static site generators require a fair amount of technical know-how. While that may mean learning a few new concepts at the start, it comes with a lot more freedom. Many static site generators have very refined plugins and can be extended using their core programming language.
Faster Speeds: Static site generators serve pre-compiled files (usually minified) to browsers, cutting load times by a large margin because all the web server needs to do is return a file. There’s also a good amount of optimization options that can be applied to all the files before everything is deployed.
What Are My Options?
If you want to build a static site, choosing a generator can be overwhelming at first sight. The aim of this list is to help make it easier to make a more informed decision depending on what your circumstances are.
As a disclaimer, the word “top” is very subjective. This list consists of some of the most popular static site generators for various use cases based on my personal experience and everyone may not agree with the choices. That’s okay!
Jekyll is probably the most widely used static site generator and has been around for quite some time — 2008 to be specific. It’s simple to use and low barrier to entry is sometimes cited as the source of its success in the era of newer, more modern static site generators.
Jekyll helps create static websites and blogs from plain text. With Jekyll, you’ll typically work with content in Markdown, a lightweight markup language designed for text formatting. The text content is then paired with the very popular templating engine, Liquid. One of Jekyll’s key selling points for newcomers is its wide range of importers. The series of tools enable an existing site to be migrated to Jekyll with relative ease. Jekyll was built with Ruby so if you’re comfortable with Ruby you might want to check it out. Fun Fact: GitHub Pages are powered by Jekyll.
Learn how to build a blog with Jekyll and Strapi
Docsify helps generate documentation websites on the fly. Unlike GitBook, it does not generate static HTML files, choosing instead to smartly load and parse Markdown files, displaying them as a website.
Docsify also allows you to write Vue components directly into Markdown files that will then be successfully parsed. Besides support for plugins and themes, it comes packed with a ton of really awesome features: progressive web app support for offline usage, smart full-text search plugin, emoji support, and compatibility with Internet Explorer 11 to mention just a few.
Vuepress is a Vue-powered minimalistic static site generator with a markdown-centered project structure, putting the focus on writing. Created to support the documentation needs of Vue’s own sub-projects, it is focused on static sites centered around content and provides features tailored and optimized for technical documentation out of the box.
Vuepress generates pre-rendered static HTML for each page, and runs it all as a single page application once loaded. It also comes with support for themes and plugins. Keep your eyes on Vuepress because Evan You, the creator of Vue.js, seems to have something interesting planned for the project.
Probably the most talked about static site generator today, Gatsby is based on React and leverages the power of GraphQL to pull data from different sources. That means it plays very well with a lot of content management systems, making it easier to get sites and apps up and running.
Beyond that, Gatsby is known for its speed, taking advantage of pre-fetched resources for other pages and only loading the parts of a website that are needed at any given moment. It also has a huge plugin ecosystem and can be used for progressive single page applications, or in other words a simple way to ensure a great offline experience.
Learn how to create a blog using Gatsby and Strapi
Docusaurus was built to save time and help keep focus on your project’s documentation or content. The idea is for people to simply write docs and blog posts with markdown and Docusaurus will publish it as a set of static HTML files ready to serve. That In turn, allows easier access to the full power of React to extend or customize a project’s layout.
A very useful Docusaurus feature is document versioning which helps keep documentation in sync with project releases. It also supports Algolia documentation search. In general, Docusaurus makes publishing your site really simple with options for GitHub pages or other static file hosts manually, using a script, or with a continuous integration like CircleCI.
Hugo is a static site generator written in Go. It comes with an ultra-fast build process and makes the creation of static websites quite seamless. It is probably the fastest static site generator available at the moment. A big benefit of using Hugo is that it comes with a theme library containing more than a hundred themes you can use to build a website.
Another key benefit of Hugo is its quicker, simpler path to getting started, with very little need for configuration and no dependencies other than the core binary. Hugo also provides full i18n (internationalization) support for multi-language sites using the same straightforward development process as single-language sites.
Eleventy uses the tagline, “a simpler static site generator”, and was created to be a JavaScript alternative to Jekyll. The whole idea behind it was to opt out of the framework rat race evident in the default zero-config setup. Eleventy is not a JavaScript framework — that means zero boilerplate client-side JavaScript. It works with your project’s existing directory structure but has flexible configuration options.
Your content is decoupled by design to make any future migrations easier just in case you decide to use something else later. Eleventy also works with multiple template languages — .html, *.md, *.11ty.js ,.liquid, *.hbs, *.ejs, *.haml and *.pug to mention a few. The big highlight is how you can use all supported template languages in a single project — a truly amazing concept!
Scully is the best way to build fast Angular apps and static sites. Many people refer to it as Angular’s answer to JAMstack calling. Scully pre-renders each page in your app in plain HTML & CSS. That means Scully gives you the best of both worlds — you can either pre-render your entire app to the most basic form of HTML & CSS, or still have a full powered single page application written in Angular. It’s a new and quickly evolving project so you should definitely keep your eyes on it and contribute if you can.
Similar to how React has Gatsby, Vue.js has Gridsome. Though it’s a relatively young project, it still boasts an impressive number of features — progressive web app support and SEO-friendly single page applications/static sites.
Gridsome has quite a sophisticated plugin ecosystem too, often leaving you spoiled for choice. It’s GraphQL support makes it simple and fast to build modern websites from almost any data source. Adding to its simple and safe deployment, building with Gridsome is also simply just fun to use. It’s worth mentioning that a background or prior experience with Vue really goes a long way in making your development experience better while using Gridsome.
Sculpin is a static site generator written in PHP. It converts Markdown files, Twig templates and standard HTML into a static HTML site that can be easily deployed. If you are most comfortable with PHP this is something you should try out! Based on PHP 7, it’s a fast and easy install using composer for that extra flexibility in whatever project you’re working on.
Honorable Mentions
There are plenty of options out there and I couldn’t end this article without mentioning three more static site generators. Although they can be used to create amazing and performant static sites, these honorable mentions offer more than just generating static sites.
Sapper is a framework for building extremely high-performance web apps using Svelte. Sapper, which is short for Svelte app maker, found its inspiration from Next.js (more on that below).
Similar to Next.js, Sapper has the ability to create server-rendered pages as well as define API endpoints. Interestingly, Sapper offers developers the ability to export pages as a static site. It’s a relatively new project — I’d keep my eyes on it!
Coming Soon Learn how to create a blog with Sapper and Strapi
Next.js is another amazing option that is built on top of React. Next.js can be used to create progressive web apps, server-rendered apps, and static websites among many other things. It let’s you define serverless functions as API endpoints out of the box and gives developers a lot of control over how they build and deploy their applications. It’s overall goal is simplifying development with a smoother and less cluttered experience.
Deploy a Next.js blog using Strapi
Nuxt.js is a Progressive Vue.js Framework for building performant, modular and fun web applications. It also lets you generate a static website based off of your Vue application. Nuxt also lets you skip the server while keeping the benefits of great SEO by pre-rendering all your pages and including all the relevant HTML.
Deploy a Nuxt.js blog using Strapi
Nuxt, Sapper and Next can all help you build web applications. Static sites are really a subset of these applications so it makes perfect sense for them to be able to create amazing static sites.
Like I mentioned above, the list isn’t by any means etched in stone by the gods of frontend web development. If you want to do a little more digging, StaticGen is a good resource to utilize and discover more static site generators.
If I missed your favorite generator, feel free to let me know in the comments below or on my Twitter account!
If you enjoyed the article, be sure to Tweet about it!
