24
A Simple Intro to Static Site Generators
by Robert Joonas on
I recently heard about static site generators for the first time in my life. Reading about this topic on the web, quite quickly made me realize how powerful and convenient thay can be. However the word that commonly came up with static sites was 'blog', which gave me the impression, that static sites are only widely used in blogging. In this post I will talk about static sites and describe my process of using Eleventy - a static site generator, for the first time.
A static site is a collection of static HTML files. Everything that a user requests on a static site is ready to be rendered and shown to the user. No server requests are needed for viewing the content.
The first advantage of static sites would be the speed. As the name says, all of the content is static and every user on the web sees the content the same way. Nothing is "changed on the fly". That means, that for every request the user makes, the browser can just take the ready-to-go HTML files and show them to the user. There is no traffic going on between servers and that makes it super fast.
The second advantage to point out is security. A dynamic website typically stores some information in a database that can be hacked. That means there is some information in backend that is hidden from users. Things like authentication and user input are a potential door to this possibly sensitive information. With dynamic websites, site administrators can have a great responsibility in keeping this data hidden. With static sites, every user can access all the information that your website contains. There's simply no sensitive information. every static HTML file is visible to users.
Static sites can't be interactive, because there is no way to take user input. With static sites there is no way to display content that is changing automatically. The only way to update the page is to deploy the modified HTML files to the server. Luckily there are platforms and apps that let you do this conveniently and help you automate this process.
As the name says, a static site generator is a tool, that can be used to generate static HTML files based on raw templates. A page could consist of thousands of HTML files (for example a blog page with different posts). Imagine you have a site like that and you want to change your site logo in the header. Then you would have to go through all the HTML files and update them one by one. Not very convenient, is it?
A static site generator gives you the ability to define templates that define the structure of those HTML files. You can also have multiple templates and what's more, a template can extend another template. This allows you to conveniently define the parts in your files that have to be different and the ones that can remain the same throughout your entire page (such as header and footer). Also, say you want to add a post in your blog, you can just write a document in markdown language and let the generator make a HTML page based on that. It is as simple as that.
For getting started with static site generators I chose Eleventy because it simply seemed like a good and well documented tool. It also caught the eye of my friend and Plausible mentor Uku, who had not used Eleventy before. At first, wanting to start somewhere quickly, I found the Eleventy-base-blog. I pulled it from Github and started exploring the repository, quite quickly I realized, that there's way too much content to understand, being a complete beginner.
I started from scratch, looking at the base-blog project as an example. This turned out to be a great way of learning. At first I just added a simple post template. Then another one, to see if I can list the links to those posts on a single page. This example was done in the base-blog project, so I got it from there and removed some unnecessary code.
From there I went to creating a navigation section, which was a trivial task to just write some HTML. Then I Added the about page and the HTML structure was ready to go. All I still had to do was to add some styling with CSS and that's it, I have my own nice-looking blog page.
24