This post was originally posted on my personal blog as Introduction to static site generators. Here an adjusted version for DEV:
Even in 2019 many developers are used to spinning up a WordPress (or similar software) for content websites. Until recently I've been one of these developers. I was willing to develop a website using technology to get done what I could get done without. My choice of framework wouldn't have been WordPress, but at the end the result is the same: building a system to deliver what a static publishing software could have handled easily. In many cases it simply isn't worth the effort to set up, configure and maintain a fully fledged content management system and store content in a database.
2019 is the year of the static generator. Get your blog started today!
What is a Static Site Generator?
A static site generator (also called static publisher) is a program, that generates a complete website as an output. The generation can either be done locally on your computer or on a web-server during deployment. The website is then served through your web server — just like the old’n’days.
Content is typically written in a template language like Markdown or Liquid. This allows you to concentrate on your writing and ignore the layout and styling of your content. Some static generators allow you to mix and match your templates using PugJS, Markdown and others at the same time. Being a statically generated website, you'll have your content in a readable format on your computer available at any time. Should you wish to re-use it or re-publish this means very effort finding and reworking your own content.
As no database (besides the file-system) is used no SQL or extracting addons/plugins are used. This makes your website deployment more stable and robust. With GitHub and co. you can also edit your website on the go and deploy simply by committing new content.
Why using a Static Site Generator?
Security: There is no database or backend application. This reduces surface for attacks and therefore makes your security excellent 🔐️
Performance: As no backend application is serving your site less memory and CPU are used — your website stays up longer under heavy load 💪️
Backed up by default: You will always have a copy of your content separated from the web-server (usually in git). This ensures your site is very easily replicable in case the server hard-disks fail and your live site goes offline.
Easy to move: Migrate your website to another hosting company without much pain: push the output (HTML, CSS, JavaScript) onto the new server and re-configure the DNS and you are all set.
Easily choose website hosting: You don't have to worry supported technology or PHP/Python/Ruby versions, because you only need to serve static contents.
Even not a major issue anymore, still the hosting for static sites is generally cheaper. Mostly it's free: With Netlify and GitLab, GitHub you get static hosting for free.
Which Static Site Generator should I choose?
There are many static site generators out there to select from. Your decision depends more on preference for frameworks than technical differences. My personal favourites are:
Eleventy: Very simple and straight forward. You can get started with Eleventy in a few minutes. Supports pug, markdown and of course plain HTML by default. My personal website is based on the Eleventy starter by Dan Urbanowicz.
Nuxt.Js: Nuxt.JS is a no-configuration framework based on the idea of NextJS and VueJS. You can write your complete website in VueJS components. Check out the getting started video for Nuxt in just over one minute.
VuePress: VuePress is a Vue.js powered static site generator which combines the power of Vue with server-side rendering (SSR). Markdown is the language of choice here. After compiling you will get a single-page app. Comes with extensive and detailed documentation.
Summary
I’ve found the main advantage of using a static site generator to be the ease of getting things up and running. The effort for set up and configuration is very low. You can get started writing the same day. It's stable and scales very well — perfect for production websites. Using a static generator is highly recommended and has suited my needs and skills perfectly. This being said, I'm sure non-devs will find their way around as well. Some understanding of HTML and CSS is recommended for any online project you are doing at the end. I encourage you to look around, try a few static site generators out to find the one that best suits your needs. If you need support consider reaching out to my development company. I'm providing a range of services with a focus on CMS and application development.
If you liked this article please consider sharing it on Twitter or Facebook. 🙏️ If you got any questions please contact me.
Top comments (0)