You can create a static website. All you need is some HTML files. And you might also include a CSS file to give your pages style - to make them look interesting. You probably know this already... stick with it.
As you start adding more pages, you will begin to realise that many of the pages will share lots of the same HTML content. Every page that has a nav or menu for example. That should be every page, if you would like users to get around easily. And every page with a footer which includes your logo and social media links. Not to mention including meta tags for SEO benefits and a site icon etc. These will all share HTML elements.
So for a normal site you might have:
For each of those pages around 50% (could be more) will be common HTML. The same HTML as each other, with some different content in the middle.
Preprocessing is a little bit off topic forthispost(not much...). You can trust that it means taking more than one file and/or data source and outputting a pure HTML file. (There will be another post about that here soon).
Then for each page's content you could use a different content file. And those content files can be quite simple - markdown will do perfectly. That way they can be easy to create, a small size, and easy to edit using any text editor.
For the same site as above that would look more like this:
To begin with it seems more complicated right? There is one more file, and another folder. However, each markdown file only contains the necessary content. Most likely just some front-matter (to include a title and meta description) and then the content itself.
The nunjucks layout file is the only file which contains all of that HTML. Plus many sites will have more content than 4 simple pages.
If you wanted to have another set of pages (or posts) with a slightly different layout, say for a blog, you can easily do this now by adding an additional layout. Let's change the base layout's name to be more semantic, and add that new layout too:
A Static Site Generator allows you to do exactly this. You give the HTML preprocessor mentioned above information about the layout (eg. base.njk), and information about the content (eg. about.md) and it gives you HTML for the browser (eg. about.html).
The Static Site Generator abstracts this process away somewhat, allows you to add additional configuration, and is usually set up locally to watch any files for changes. Each time you save the layout, content or data files (and run the build command) the site's files are regenerated and available to view instantly.
The static site generator, as long as it's a good one, handles lots of files and quite complex layouts with ease.
Who Wants a Static Site Anyway? Wordpress Exists... permalink
Well. Yes. But how good is Wordpress actually? Actually Wordpress (WP), and other dynamic Content Management Systems (CMS), are a bit similar to static site generators. No, that's misleading - they are more like 'Dynamic Site Generators'.
They generate the content from a set of templates and content files. Though the content is usually in a database. But they differ from static site generators by doing this 'on-the-fly', or dynamically at the request time, rather than before a user requests it (at build time, which might have been only a few minutes before the user arrived or since the last manual git push).
Each time you visit a website, you make a request to see that page. When it's a dynamic site, like WP, that request takes longer because the correct files are not sitting waiting to be served. They are instead created there and then. WP will grab the template from the files, grab the content from the database and then using that information will generate the page and display it.
When the same request is made to a static site, the file is already there, and is served immediately. In the case of a static site generator, the layout and the content had already been generated into HTML files when the site was built and deployed. In fact it is most likely served from a Content Delivery Network (CDN) too.
This means a few things:
The site is faster. It doesn't only feel faster, but it will be demonstrably snappier. It's almost certainly served from a CDN, which means the files being served are literally closer to the user. There's no build time after the request is made, only prior to it. Because of that there's no logic to run, or authorisation to happen or anything similar.
The site is more secure. Serving a site statically does not need the server to perform much logic. This means that there is a much reduced chance of malicious code being injected. Not needing to contact a database similarly reduces this risk too.