Static site generator. A phrase that is becoming increasingly more common across the web. As a newbie dev you may be asking yourself what's the purpose of a static site generator? If it's static, just write the html/css and be done, eh?
Not so fast. These brilliant tools are getting popular for a very good reason. There are a ton of generators out there, but the most popular at the moment seem to be Gatsby and Hugo. My personal favorite (at least this week) is Zola (formerly named Gutenberg), just because of it's simplicity and lightweight base. Hugo is great if you want to get a site up quick, as there are plenty of slick, pre-built templates available. Gatsby is super robust and used by big companies like Nike and Airbnb. It's also probably the most popular at the moment, but it's pretty heavy out of the box compared to it's peers.
When you want to create a site from scratch with a custom-made design, these generators make it simple by giving you structure to start from.
- Quick build capability through the use of templates and markdown.
- Low clutter structure makes maintenance a breeze.
- Super fast. Low clunk out of the box makes these sites ready to run out of the gate.
- Plays nicely with SASS
- You can add in any JS your heart desires.
This varies a bit from generator to generator, but I want to give you a basic idea of what these tools do:
You have html files assigned to different folders based what you're trying to achieve. Those files act as templates. Normally you begin with the index file (something you should be very familiar with). From there you can plug in a single line of code (something like, extends "index.html") into any additional html templates and everything you've written transfers without the need to duplicate efforts.
Obviously you don't want the same exact hard-coded content on every html page you create. That's where block modules come in. With just a couple of lines of code you can completely customize the content to be displayed in certain areas of your site.
Content gets plugged into the templates through markdown files. Not only is markdown super simple to use (just like here on dev.to) but it's highly functional. You can create a number of defining elements for your content called Taxonomies. These handy little things give you the ability to define tags, categories, or completely custom labels as your design requires. With taxonomies defined you can access that information in your template files or manipulate it with loops and/or statements, etc.
There are a ton of great generators out there. Do a bit of research and see what fits your project and/or programming style. I'll give you a few starting points for the generators I mentioned early in the post.
It uses Tera so you'll want to browse these docs as well if you're not already familiar with it.
I've not found a place online that walks you through Zola. But you can check out code from a site I built with it if you just want something to look through.
Again, this just scratches the surface of the various options and capabilities out there. If you're interested in giving it a try (and I would encourage you to do so!) these suggestions could be a good place for you to start.
If you're already a big fan of static site generators, share your pros and cons in the comments.