1. What is a static site generator?
So, I often preach the benefits of static site generators (SSG). But what exactly is an SSG? It’s software that is able to produce all the web pages for your website in seconds. It does this by merging your websites content with its layout templates. The output is simple, static html pages ready for viewing in a web browser.
In its most basic setup…
- You create and store your content as text and image files.
- Your web developer creates layout files for the design of your website.
- You, or your developer, then run the SSG to build your website.
- You, or your developer, send the new website to your web server, ready for your visitors to consume.
A content management system (CMS) gives you an interface for managing your content. The CMS automates steps 3 and 4.
2. Dynamic websites (e.g. WordPress) and SSGs explained...
Hang on a minute, you mentioned static html pages… didn’t you? Aren’t they a thing of the past? Aren’t dynamic websites the tech to use?
In the beginning (!!), web developers created a new html page for each page of your website. If you needed to edit a page, then the web developer would open the web page, make the change and save it. Simples…
Add a new page, oops… a longer job if the page needed to be in the website’s main menu. Every page with a menu would now need editing to list the new page. Fair enough, web developers got fed up with this approach. Welcome the dawn of dynamic websites.
Dynamic websites build the page for each request from a visitor. No pages pre-exist. The software running the dynamic website looks at the incoming URL (e.g. www.mysite.com/about-us/). It then builds the page and delivers it to the visitor. In our menu problem above… no worries any longer, the menu exists in the database. The menu is edited and saved there… there’s only one version of it. The dynamic site’s software pulls it out of the database and injects it into the requested page. WordPress runs in this way.
This dynamic process has been around for some time now. For example, WordPress’s first release was in 2003.
Static site generators also solved the menu issue when they arrived on the scene. Edit the menu once in your template and then the SSG merges it with your content.
3. SSG core advantages (over WordPress)
So what’s the big deal? Dynamic websites and SSGs, the end result is the same isn’t it… a web page for a visitor to read?
Dynamic websites use software to build the page when it’s requested. And SSGs are software that pre-builds the page so that it’s already ready to deliver to the visitor.
And that’s the main difference. The timing of the building of the web page. It makes a big difference to the speed of delivery of the web page. The security of your website and how easy it is to scale your website. Three very important factors in today’s world. For example, we know that Google uses speed as part of its ranking algorithm for searches.
Let’s deal with speed of delivery first. Remember, that a dynamic website builds the web page at the time of request. This means that the software needs to start, it then needs to connect to the database. It searches for the content and contructs the page with what the database returns and a layout. This process all needs to happen before your visitor can see any content. With an SSG website, the web page is already there. The server provides it straight-away.
Now, let’s deal with security. A dynamic website uses a mixture of technology for the software to work. For example, WordPress relies on the LAMP stack. This stands for Linux, Apache, MySQL and PHP. These are open source software and software libraries. This stack of technology gives points-of-contact for hackers. To avoid hacking, this set of software needs maintaining to the latest releases. Older versions of the MySQL database software have well known security vulnerabilities. For example, MySQL has been at the centre of hacked sites in the past.
Compare this with an SSG website. There’s no need for a database or a programming language. At the time of delivery, no software delivers the web page. It’s there already; ready for serving to the visitor. PHP isn’t required, nor is MySQL, or WordPress. Three less points-of-contact for a hacker.
The final difference that I’d like to highlight is scalability. Dynamic websites need software to run them (at the time of delivery remember). In turn, software needs processing power. It’s limited by the processing power of the server that the software sits on. A sudden spike in visitors can overwhelm the software. Result, it crashes and needs to reboot. The website freezes. Disaster for everyone.
Compare this with an SSG. There’s no software, only static pages. Processing power is not required. End result, the website copes with larger surges in demand.
4. When is an SSG not a good choice?
For the majority of brochure-type sites then a traditional SSG, like Jekyll or Eleventy, is a good choice.
Is there a case when SSGs are not a good choice? Traditional SSGs can struggle with data-intensive websites. An e-commerce website categorising and filtering many products would be a good example. In this instance, a traditional SSG would not work well at all. This kind of site requires dynamic functionality.
Enter web apps plus SSGs to the rescue.
5. Web apps and SSGs
Web apps are websites that behave like apps but within the browser. Pages are not refreshed when users click around the site. Once the app has loaded it then fetches data from a backend and injects it into the components that make up a page. The app fetches only data, not all the html, CSS and javascript that makes the page work.
It does all the logic within the browser, unlike a traditional dynamic website. The traditional approach runs logic in the backend server. It receives the browser request, does the thinking and then returns a complete html page. Hence the need for a refresh on each request.
Web apps provide the same functionality as a traditional dynamic website. A web app would be a good solution for our e-commerce example above.
There’s one issue though… after loading they’re very quick. But they can be slow to load. After all, they’re downloading all the components for all the pages that exist in the web app.
Static site generators to the rescue. A web app SSG will visit the complete site. And it will generate all the html pages for storing on the server - only html and CSS. When a visitor lands on the website, the static html view downloads first. Providing content for the visitor to view. Behind the scenes the full dynamic app is loading and initialising. Once loaded, it will then replace the static pages. And give the visitor all the dynamic functionality.
So a static site generator is suitable for any situation these days.
6. Managing your content - SSG content management systems
Today, there are a host of content management systems for static site generators. They all provide easy-to-use interfaces. And in the background the CMS uses the SSG software to build the website.
The majority of SSG content management systems are cloud-based software services. This means that they take care of maintaining the CMS. Unlike WordPress, and others, you do not need to worry about updates. This is welcome relief. Your CMS is always up-to-date and less vulnerable to attacks from hackers.
Here’s a list of potential CMSs for your brochure type website:
- CloudCannon (Cloud - uses Eleventy, Jekyll, plus many more SSGs)
- Siteleaf (Cloud - uses Jekyll as its SSG)
- NetlifyCMS (uses many SSGs)
For a dynamic web app, you can use a headless CMS. Headless CMSs separate your content from the frontend. Your developer creates your site and it pulls content from the headless CMS. Headless CMSs are becoming very popular. The main benefit is that you can swap your frontend without migrating content.
Here’s a list of potential headless CMSs for your web app:
- Contentful
- Sanity
- Flamelink
- Strapi
7. Choosing the right SSG
For brochure-type sites…
There are around 300 static site generators out there. Jekyll is the oldest and was once the market-leader. As mentioned above, Jekyll would be perfect for your brochure type website. But Eleventy has recently usurped Jekyll and it’s now my first choice SSG for this situation. Combined with CloudCannon you get Eleventy, CMS and hosting all in one.
I’ve also used Jekyll with the NetlifyCMS with good results. The site is then pushed out to the global Netlify content delivery network.
For e-commerce sites with few products…
If you don’t have many products for sale and don’t need dynamic functionality. E.g. filtering, categorisation. Then Eleventy, CloudCannon CMS and Snipcart would be a great solution.
For web apps with dynamic functionality…
We’re big fans of Angular for building dynamic web apps. There’s only one SSG for Angular and that is Scully. It’s the new kid on the block (2020) and looks very promising.
Emma is currently looking at Vue as a frontend library. There are more SSG options for Vue. These include: Gridsome, VuePress and Nuxt.
8. Conclusion
As you might have gathered, we love static site generators. Their simplicity and the benefits that they provide are excellent.
As a quick reminder…
- Faster performance for website
- Greater security
- Easy scaling for surges in demand
They now come with a great range of content management systems. This new wave of CMSs are easy-to-use and maintenance free. Giving you a great editing experience and peace of mind.
If you’re thinking of going forward with a SSG project, then we’d love to hear from you. We’re based in Cornwall, in the UK. But we can work with you, wherever you may be in the world.
