What is a Static Site Generator?

I am a huge fan of static site generators and this website is built using one.

By the end of this post, I will prove to you that this is the best way to create a website in 2020.

Static site generators have many benefits:

• Superfast performance
• Free to host!
• Simplified SEO
• Improved security

I will show you how to create your first static site for free!

Let's get started.

What is a Static Site Generator

A static site generator is a completely different way of building websites.

The website is pre-built.

The static site generator takes content and turns it into flat HTML files.

The best way to describe how this is different from a traditional web server is to compare it to WordPress.

WordPress is a web server that comes with many parts under the hood:

• WordPress software
• PHP programming language
• Apache web server
• MySQL database
• Linux Host

When WordPress receives a request the web server needs to build the page. To do this it calls the database to fetch the data. It then builds the HTML and sends the response to the user.

So when we talk about WordPress we are talking about all this technology as a stack.

There are many moving parts and performance issues do happen. For example, database queries can be slow and pages take time to build.

This is very different to how static sites work.

Let's take a closer look.

How does a Static Site Generator Work?

A static site generator removes the need for a web server. Instead, the stack looks very different like this:

The static site reads the blog content and converts it to static HTML flat files. These flat files are then stored on a CDN.

When a user requests the web site the CDN simple fetches the file and returns it to the user.

There is no need to call a web server as the file was pre-built and ready to share.

Why use a Static Site Generator?

There are many benefits to running a static site. Here are the top four:

• Cheaper Running Cost
• Website Performance
• SEO
• Security

Let's look at these in more detail.

Cheaper Running Cost

Running a static site is cheap.

This is because there is no longer a web server.

We only need to host HTML, CSS and JS files on the internet and this does not cost very much.

There are three hosting providers I can recommend:

• Appernetic - Great place to start and it is free for 14 publishings each week.
• Netlify - Free for personal projects.
• ZEIT Now - Free for a team of one.

You can see all these providers will give you web site hosting for free.

I use Netlify to host the HTML files for this site and I would recommend them if you are comfortable with Github.

Yet, if you are starting from scratch and you don't know how to code then I would recommend giving Appernetic a try.

Website Performance

Static sites are fast.

This is one of their main advantages. Pages are pre-built and hosted on a CDN and pages download fast.

This has a huge improvement on the TTFB (Time To First Byte).

This is how PageDart gets a 100 on the Google Lighthouse performance score.

With performance being a Google ranking factor you should take this seriously.

Although, it is possible to get a 100 Google Lighthouse score using WordPress it is difficult.

Static sites considered performance from the start and it is very easy to create a fast site.

SEO

We have already discussed how the performance of static sites is the fastest on the web.

How about SEO?

Well because the pages are pre-built Googlebot will see the same page as users. There is no Javascript running client-side to render the page.

You are also closer to the website structure. For example, in WordPress, you define the slugs in the CMS.

This is simplified in static sites as all the files are in a folder with each page listed underneath. Like this:

It's easy to understand and see what is going on. Taking a file from the above we can see that it is in the blog folder so the URL would be /blog/benchmark-websites.

With WordPress, a lot of the structure is deliberately hidden. It can be difficult to know what is going on underneath the hood.

With a static site, things are more minimal and available.

Security

WordPress is not insecure. Yet, it has a reputation of not being secure and this is because it is often not configured correctly.

For example, the admin password may not be strong. SSL certificates can be difficult to install.

Static site generators are more secure for a few reasons:

• Free SSL - If you use one of the providers mentioned above you will get SSL for free
• No admin page - There is not an admin page like on WordPress so this is one less thing to secure
• No plugins - Poorly built plugins on WordPress have many vulnerabilities
• No database - There are exploits in databases that hackers use to get data. With static sites, there are no databases.

Unless you pay someone to secure your WordPress site the chances are that a hacker can attack it. If you use a static site you are reducing the attack area. Making it more difficult to exploit.

We have listed the benefits of static site generators vs WordPress. Next, let’s look at some of the static site generator frameworks that you can use as an alternative.

Static Site Generators

There are many static site generators available for you to choose from.

I have already mentioned that this site is build using Hugo but there are many more options.

Here is a list of popular generators:

• Hugo - Hugo is one of the most popular and once you get used to writing your blog posts using markdown this is great to use.
• Gatsby - Gatsby is great if you or your developers have React.js experience.
• Next.js - This is also React.js based and it is difficult to learn for a beginner.
• Jekyll - Jekyll is a simple, static generator for blogs.
• Metalsmith - Metalsmith is simpler than the others but less flexible.
• eleventy - Uses javascript to build the pages and outputs HTML.

This is not a complete list, there are many more generators available at StaticGen.

All the above produce flat HTML files but they use different technology to do it.

They can all be configured to integrate with a headless CMS listed above.

None of the frameworks come with a CMS. If you would like a CMS then you need to look for Headless CMS let's look at these next.

How does a dynamic CMS work?

If static site generators do not have a CMS then how do you write content?

The answer is using a headless CMS.

A headless CMS is separate and you integrate it with the static site generator.

Here are some options for using a CMS with a static site generator:

• Contentful - One of the leaders in headless CMS platforms.
• NetlifyCMS - Netlify is a static site CDN that has open-sourced a CMS.
• Prismic - Prismic has a good CMS for blogs and content pages that you should look at.
• Forestry - Forestry is a CMS that you host with your project like Netlify's CMS.
• Ghost - This is a headless CMS for blogs.

When you add a CMS to a static site the stack will look like this:

In the above diagram, when the content is ready to publish the CMS will send a message to the static site generator.

The static site generator will then create the HTML files and send them to the CDN.

If you have dedicated content editors then I would recommend that you use Prismic. This CMS has good workflows for the team supporting translations, personalization, and images.

If you are getting started then you can look at Netlify or Forestry. Both of these offer a simple CMS that is free for teams of 1 or 2.

By now you can see the benefits of a static site and you would like to try setting up your own.

Well, let’s create your first static site.

Create your First Static Site

If you want to dip your toe into the world of static site generators then I would recommend that you start with Hugo.

The easiest way to get a site up and running without any coding skills is to use Hugo with Appernetic.

Appernetic is free to start. Sign up and following their simple getting started guide.

Appernetic comes with its own CMS so it is very easy for those used to how WordPress works.

I promise that once you get used to this style of working you will not look back.

Superfast websites without all the complexity of WordPress!

What is a Static Site Generator, Final Thoughts

What is a static site generator? We have answered this by showing it is:

• A pre-built website
• Flat HTML files from your content
• These HTML files are then hosted on a CDN
• All requests to the pages instantly download the pre-built HTML

There are many benefits for website owners:

• The best performance on the web
• Cheap to run, so cheap it's free!
• Integrates with a headless CMS
• Great for SEO and the page is fast and pre-rendered
• Security is simpler
• Simple as you can access the files directly

This post has given you the confidence to try this yourself.

By following the Appernetic tutorial you can create a new website and host it for free.