Static websites
- A static web page is delivered to the user exactly as stored on the server.
- By contrast, a dynamic web page first has to be generated using a web application.
- Which of course means that static websites display the same web pages for every user, as opposed to dynamic websites which can dynamically generate sites tailored to their users (at a significant cost and overhead).
- Static sites can still dynamically do stuff, but they have to do it at the user's end (e.g. using JavaScript).
I'll briefly explain how some of it works in the background, but if you're not interested and just want a guide on how to make a website like this, feel free to skip to the link below.
What is a static site generator?
- Static site generators (SSG) build static websites using a source directory of files and templates.
- Or in layman's terms, an SSG takes a file like a markdown document, and generates a static website/web page from it.
So why should you use a static site and a static site generator?
Netlify has a pretty neat list that I'll try to abbreviate below:
Security:
-
By having only static HTML/CSS/JS files you're very much minimizing your attack surface compared to running a bunch of software like a CMS (e.g. WordPress, Drupal) with its own database being run in a virtual machine running some OS…
-
That doesn't mean static sites don't have an attack surface at all though. They can, and do, depending on you. But by default, especially if you're a beginner, you have much better security out of the box, and I'll go through what to do to make sure it stays secure.
Speed:
-
Whenever someone visits your site, especially if you're using a CDN (more on that later), the load speeds (e.g. time-to-first-byte) will be much faster (or at worst the same) than a CMS.
-
The reason behind this is that you're giving the browser exactly what it wants (which is static HTML/CSS/JS) as soon as it requests the site, since that is actually the only stuff you have on your server and there is no need to render it into static files before serving it to the viewer.
- A static site can be hosted on any server that can just return HTML files.
- Which means, you don't have to find hosting that provides machines running software specific to your site (e.g. PHP, MySQL, WordPress, Nginx/Apache, whatever Linux distro you'd like).
- Which means you don't have to worry about the hosting company (or you yourself) keeping all of the software and dependencies up to date.
- Which means that once you've set up your site, you can just focus on actually doing stuff you're interested with it (e.g. writing). It also means you'll get a lot more for a lot, lot cheaper (even free!).
Scalability
- If you ever get to the sweet trouble of having much more visitors than you'd've expected, that won't be an issue at all if you're using a static site.
- Scaling it up just means increasing your bandwidth with your provider, so more requests can be served, and it usually just means clicking a few buttons and paying a few bucks extra.
What static site generator to use?
There sure is a bunch of them. And there are quite a few good ones. You can see a list of them here, but I'd recommend going with Hugo. It has a friendly, active community that will help you out and it is really well developed, fast and as secure as it gets. But you can use any other generator you'd like, the process is mostly the same and is just as straightforward for other SSGs.)