Learning How to Use a Static Site Generator!
August 14, 2024
Tags: Site Updates, Web Mastery
And in just one update, my previous blog post is now outdated lol.
As my previous two posts have made clear, my site has grown to a size where editing everything purely by hand was getting overwhelming. As of now, there are nine pages on my site that use the same lay out and six blog posts that have their own layout, so to speak. Every time that I need or want to update something simple, such as my heading image or the text in my footer, I have to go through all nine pages and apply the change to the code myself while also making sure nothing breaks in the process. And I want to have more pages - I have more quizzes planned, I want to make toybox adoptables of my own, and I eventually want to be able to host my guestbook on my own site again. Plus, who knows what more I'll add as I get more ideas? This is my personal website, an exersie in creaivity (and patience...) that I don't want to drop or artificially limit just because it gets tedious.
Oh, and lets not ignore the current state of the blog. It works, but man... I think the time between the last post and now shows how much I really don't want to go through the whole process I outlined just to make one blog post. The current method works and keeps me from having to edit fourteen pages every time I want to update something but just because something works doesn't mean it works well.
Near the begining of this month, however, I found something that would fit my needs perfectly. Static Site Generators, or SSGs. These are peices of software that allow you to make templates for your site pages. If you want to update the header, you just update it in the template and not every page. Many are also built with the assumption that most people will make blogs with them, so tutorials are also blog-focused. They are beautiful - and exactly what I needed.
Now, there's a lot - and I mean a LOT - of options for a SSG. I personally went with 11ty, also called Eleventy. All SSGs have a learning curve, one that can seem intimidating due to their use of terminals. These are generally NOT programs in the way most people expect programs to be - they're more like coding languages that you download then use your prefered text editor to code with (not accurate on a technical level, but I think the comparison helps in understanding what you'll be downloading). However, 11ty is designed to be simpler. Basically, I chose it because of all the options I found it scared me the least. And honestly? Once I got into it, it became a lot easier to understand and use. It's kind of like HTML and CSS in that way - it's intimidating when you're new to it, but once you start seeing the pattrens and universal rules you begin to get a feel for it. I might make my own guide to toss up here one of these days, but if you're intrested in learning then the guides I used are:
- The official docs
- This Official Video Guide [YouTube] - note that I don't reccomend following it step-by-step, unless you just want to make a practice site to delete afterwords, as they do skip over a lot of helpful file path/organiztion methods. However, it is great for just watching how the tool works and seeing it in action before you download anything.
- This unoffical guide * And this other unofficial guide that also explains how to then use Github to deploy/publish the finished site to Neocities.
My only addition is that many guides mention using Nunjucks to make the templates. You can if you want; I chose to use HTML for my templates because I'm more familiar with it. So use whatever you prefer.
I've only been using 11ty for the past few days and have gotten pretty good with it! Here's the current state of the new site layout made with 11ty - note that changes are not from limitations, but me just wanting something that looked/felt a little diffrent.
Anyways, that's really it! I just wanted to give a small update on the site update progress! It will be a while before this new version is done, but I hope it'll work out better for people once it is!