Recently I started looking into static site generators and how they could be utilized for a website I’m working on. I’m learning there are all kinds of static site generators built for everything you can think of. Some for creating photo gallery websites. Others for documentation. But most for a site with a blog. Their magic, as I found out in my research, is in how they deploy code. Below is an introduction to static site generators and how you can benefit from using one in your next project.
What is a Static Site Generator?
Before we get ahead of ourselves we need to define what a static site generator (SSG) is and what it does. A SSG allows you to build a powerful site locally on you computer and creates static HTML files for output to the web through a server. A static page is a full HTML web page that a user views.
In contrast, CMSs like WordPress and Drupal, create web pages in a dynamic fashion. Pages are pulled together from different includes files (index, header, & footer) on the server. And there isn’t an actual HTML page on the server.
Less Complexity (no PHP, MySQL, etc.)
To set up a WordPress environment you need to set up the server, PHP, and MySQL. Once that’s complete, you have to copy over the theme, plugins, database, and files from you development environment. Not so with a static site. With a static site generator your site will run your text files through a CDN. And you’ll never have to scale a server or multiple servers. Gone are the days of setting up complex auto-scaling strategies to handle traffic spikes. It’s just HTML, CSS, jQuery and your images. All hosted on a CDN.
Speed Via a CDN
With the use of a CDN and a static file system setup, pages on your site should never hang up. There’s no web host. Only a CDN with a plethora of servers worldwide guaranteeing a smooth and seamless experience. Whether you are in San Francisco, San Juan, or Saint Petersburg – you will experience the same site. And when you’re ready to test your page speed, I recommend to first read my post about the Google PageSpeed Insights Test.
Security (No Moving Parts)
One of the core benefits of using a SSG is its built in security. The static HTML pages that are the result of a generator have no moving parts; no secret entry on the backend that can become comprised by a hacker. It’s strictly HTML with images, CSS, and jQuery. All of the issues typical of a traditional dynamic site disappears when a static page is the final output.
Scalability (No Servers to Scale)
To scale WordPress we need to deploy the WordPress environment on multiple servers and our database instance on a separate server. At some point in the future, an additional database server will need to be added which adds another layer of complexity.
Not so with a static site generator. As mentioned earlier in this post, you’ll never need a server to scale. With all your files on a CDN, your time spent in planning and executing complex auto-scaling strategies is essentially a thing of the past.
Version Control (AWS/Git)
The beauty of version control lies in the ability to go back to any single version of your site. Git and AWS go about this in a somewhat different way, but the end result is the same. With a Git process you can go back to any single version of your site. Gits strength is in its branching. Branching allows multiple developers to work in different branches, or sections, and combine them later on the live version. AWS, on the other hand, allows you to create a snapshot (backup) of your site at any given point. With AWS S2 in place you can select any snapshot and push it live.
In WordPress we have the ability to revert to any single version of a page or post. We can also set up site-wide backups on a nightly basis if needed. To set up automatic backups you need to use a plugin built specifically for that. And it’s not as easy as Git or AWS when reverting to a backup.
I hope I piqued your interest with this this introduction to static site generators and how you can benefit from using one in your next project. Here’s a list of the main players and where you can find them online.
- Brunch — brunch.io
- Gatsby – github.com/gatsbyjs
- GitBook — gitbook.com
- Hugo — gohugo.io
- Hexo — hexo.io
- Jekyll — jekyllrb.com
- Metalsmith — metalsmith.io
- Middleman — middlemanapp.com
- Octopress — octopress.org
- Pelican — getpelican.com
I’d suggest Jekyll for your first static site. It’s the most widely used and has a large community of developers and plugins to use.
Best of luck and happy developing!