March 1st, 2020
Gatsby, Hugo, Jekyll, there are plenty of static sites generator out there. In 2020 it seems like lots of them are still being actively developed with huge active communities contributing to the projects.
A static site generator is a tool that creates a website as static files that can be deployed on CDN. That's it, no database!
Static sites are useful in a lot of cases and they have many advantages over traditional websites with databases, including performance and security.
Is a static website right for you? Let's see why you should have one!
Did you know that 53% of users leave your site if it doesn't load under 3 seconds (even slower for e-commerce sites)? Why take the risk of losing potential customers by having a slow website?
Having a slow website has a direct impact on your revenue.
Note that static sites are not the only solution to the "slow website problem". You could have a cache (a system that helps you keep some previous computations so you don't have to do them again) with a duration. When a request is made to your website, it checks if it's already cached, if it is it serves cached version, else it rebuilds the result from the request and caches it. A static site is different from a cache as it is just built one time and not rebuilt after a duration.
As a side effect of having a fast website, it also benefits from a better SEO ranking. Google made it clear that they want to make the web faster.
Google uses speed to rank your website. It also looks at how long it takes for the user to get back to the SERP (Search Engine Results Page) after clicking on your content. If the user comes back too fast on the SERP page, it means the experience wasn't great. Either the site was too slow or the content didn't answer their question.
By having static sites hosted on a fast CDN, you give your user the best experience and Google is going to notice that.
There are multiple reasons why platforms like Wordpress get hacked. Out of date core, plugins or themes and you get your site hacked (I've seen multiple Wordpress sites falling).
Most of the time, there are not even targeted attacks! It goes like this: a security issue is detected in Wordpress core, a plugin or a theme. The attacker tries the exploit on multiples websites to see if it works. If your site is on the list then congrats, it's now hacked.
By not having a database, static websites have a lower surface of attack. Every attack related to the database or the server (back-end) is now nothing to worry about!
Servers with databases cost something. Even if most hosting services have starter plans for a few euros every month, these costs can skyrocket if you have a lot of traffic and start needing more resources.
Maintenance is also cheap. Static files don't need things like Wordpress plugin updates or core updates. You will save time by not being forced to update your site for security reasons.
Hugo offers migration tools to import your content from most platforms. Gatsby offers the possibility to source from a large list of blogging platforms and CMS as well. Both include some wildly used platforms like Wordpress or Drupal.
Gatsby can also fetch data from your Shopify store!
A modern stack doesn't solve magically all your problems but it sure helps make developers work more comfortable.
On Gatsby, for example, you have this plugin called gatsby-remark-images. You can just plug it to your website and you've got out of the box image optimization! Maybe with an older stack, you would have to re-implement it yourself. Gatsby has a huge community of enthusiastic developers and it makes it easier for you to adopt bleeding-edge practices.
Also, job offers for newer stacks tend to attract more people. There is nothing you can't do with an old boring dev stack but developers tend to prefer newer ones!
Again, a purely technical point but a non-technical person should read it anyway. Having the right abstraction for your code makes further improvement go faster. React (what Gatsby is based on) received traction from the front-end community because it helped developers organize their codebase better. Code divided into components is easier to conceive, re-use and organize. Many people had (and still have) to maintain legacy code written with jQuery and they are scratching their head. The velocity of new developments finds itself lowered. Just to clarify: it's possible to write bad code with React and good code with jQuery. But I'd rather write code with tools that help me write good code.
Separating the back-end and the front-end of a website has multiple advantages. One example is that when you use an API for your back-end, you can consume it with your front-end and potentially a mobile application without rewriting code.
As for static site generators, there is a recent trend for headless CMS. A headless CMS is content management systems that only take care of content management. It leaves the visual part (the back-end) up to you. Wordpress can act as a headless CMS to work with your favorite static site generator.
Having a static website has many advantages for businesses and developers. If your website is mostly for content delivery and the content isn't changed very frequently (like blog articles for example), you would likely benefit from using a static website generator. Maybe just give it a try for your next project?