What are STATIC SITE GENERATORS and why YOUR BUSINESS NEEDS to use one
If you’re looking to revamp your website and you’re serious about this, you probably found mentions of static site generators, static sites and the JAMStack, on the Internet.
Unfortunately, for every article that tries to explain what are the benefits of using a static site generators, there are other 10 explaining why static sites are not good.
In theory: HTML, data and CSS are served from the same place
So Adrian, what’s a static site and why do I need one?
If you ask Google, a static site/web page is a page that’s delivered to the user exactly how it is stored. This means that whatever is stored on your hosting provider or server, that’s what the user gets.
The definition goes further and compares it with a dynamic sites which are rendered by a web application.
That’s an old and outdated definition and if you are presented with that description by an IT professional looking to revamp your website, drop everything and run. If you’re at your office, call security as soon as you hear them speak it.
A static site is a website that contains all the data it needs, in order to render itself in the browser. A static site is rendered by a web application, too. The “web application” is actually a tool called the static site generator. To simplify, let’s assume that the only difference between a site built on top of a static site generator and a dynamic site is that the static site is built once then served to the user as-is until its content is changed by a third party. At that point, the site gets rebuilt and the new version is served to users.
Technically, it’s more complicated
Diving a bit deeper into the technical aspects, let’s say that instead of a lot of PHP, and a MySQL database, and a pile of jQuery plugins, you just get HTML, CSS, JavaScript, images and probably fonts. Whenever a visitor hits your static website, they just get the pre-compiled version of your site.
By comparison, a database-backed site — a Wordpress website, for example — needs to go to the database, look for data for the page the user is trying to access, take that data and mix it with the HTML on the server, and only then, return HTML with data to the server.
The description doesn’t take into account the fact that once it reaches your client’s browser, the website needs to download the images, stylesheets and scripts, just like the static site does.
It’s also worth mentioning that the database-backed scenario above is optimistic. It assumes the database responds within a reasonable timeframe, the data for the page exists and the server is able to manipulate it and create the HTML to be returned to the user without error.
The static site skips all the preamble of looking into the database and assembling the pages on the fly, every time, for every page navigated by every user. This is done once, when the website is being built.
Let me explain the process
I’ve been talking so much about static sites although the title of the article says it’s about static site generators. As I said earlier, static site generator is a tool with two basic roles: webserver and build tool.
It takes the markup of your static site, gets data from a third party service/database/filesystem, and compiles it with that markup. This is the webserver role. Now, the description is not 100% accurate, since the generator behaves like the webserver only once, at build time.
The result of running the generator is a build. A bunch of code and data. This is the build tool role, since the generator takes data and markup and generates a build artefact that can be deployed and served to the user.
Things people say
One of the things Wordpress people yell about is updated content. Whenever you update your content in Wordpress, it is almost immediately rendered on the page. So unless someone misconfigured caching and totally messed up your server, changes should happen instantly.
Well, static sites rely on CI — Continuous Integration — processes that detect whenever you performed a change to your website and will recompile and deploy a new version, in a couple of minutes.
I don’t know about you, but I take out-of-the-box security and fewer maintenance headaches every day of the week, if that means using a static site/static site generator. 2 minutes is not that big of a delay, between you pushing a new article to the blog and have it available to users. I’m sure there are Wordpress websites that take about the same amount of time to publish an article, due to caching plugins and cache invalidation.
And don’t think that just because they’re generated statically, they’re not interactive. You can add dynamic data, from third party sources, by integrating service and APIs you either paid for or built and hosted yourself. You can do e-commerce on static websites. Virtually everything you can think of, you can do with static sites.
Another benefit of static sites is that they can be deployed virtually everywhere. Any filesystem will do. This makes them very cheap in terms of operational costs. You can deploy a static site to a CDN without a problem. It’s just HTML, CSS, JavaScript, images and fonts. It doesn’t need any specific server to run on.
No headaches installing, configuring and securing Apache, or IIS.
Closing word
For my website and other client projects I’ve built, I’ve used Netlify and Amazon S3 combined with Amazon CloudFront, since around mid-2015. I deploy and run all my static websites like this, and they works flawlessly. As far as pricing goes, both Netlify and AWS are very cheap. Netlify’s free plan is more than enough for a small business who just wants to maintain an online presence.
That’s it for now! Hopefully I managed to convince you the benefits static site generators bring to the table. If you’re in the process of revamping your online presence, give static site generators a chance.
One more thing
If you’re looking for people skilled in working with static site generators, React.js, Next.js, Gatsby.js, or Node.js, I might know one or two.
I’m actually working with them and they’re amazing professionals.
Reach out and let’s see how we can help you.