I’ve been pretty heavy into just using HTML and CSS for my website. I don’t have any real reason to avoid JS other than wanting my site to be as simple as possible (and my own personal vendetta against the language).
Despite this, updating every one of my pages by hand when I have a status or nav update is quickly adding up. I’m about to embark on rebuilding and rebranding my site, and the only technical “needs” I’m going to include are adding Bootstrap to pages dedicated to my OCs so that I can use codes from ToyHouse.
For those who have experience with JS and 11ty - which has been more approachable to you? Programming isn’t scary to me, but any mention of git has me tensing up.
I had a good time with 11ty because I worked off of a template, but if you’re starting from a preexisting website it might be easy to fall into a rabbit hole and get overwhelmed with information (especially around the config file). There is some buy-in.
Note that 11ty is a site generator which itself uses Javascript, the programming language, to do things. You set it up, then generate the website, and drop that website into whatever your static host is. If all you ever want to do is automatically update your pages with some sort of website template that has your nav menu, header, footer and styling, 11ty is probably overkill.
I use 11ty because it lets me write my articles in Markdown, generates an RSS feed, and lets me add features easily if I ever want more. I also used a template with good-to-haves like tags and a main page that aggregates posts.
If you just want to dynamically cook your HTML layout to wrap your content in a navbar and some CSS there’s infinitely simpler ways to do that. If you really don’t fear programming you could write a script in your favorite language that looks something like this:
START = "<html><mynavbar>...</mynavbar><body>"
END = "</body><myfooter>...</myfooter></html>"
for content in my_pages:
page=START + content + END
create_file(pagename, page)
and be spared all the bloat of 11ty. It doesn’t have to be Javascript because it’s all happening in your computer anyway, not the end user’s.
If you want to move a site into 11ty you’ll have to at least sit down and patiently read over the getting started docs, install a javascript package manager and tooling, learn a few basic commands, and figure out the 11ty ‘mental model’ for how things hook together. Nothing to scoff at if you’re not a software developer, but for a software developer it’s pretty easy stuff. If you find git scary i’d expect this to be scary too.
I’m not quite understanding what you mean by updateable layouts or how you would use JS for them. Are you asking whether it’s easier to use JS to render elements in the browser than setting up Eleventy includes, whether it’s easier to write a basic SSG in JS than use Eleventy, or something else?
In any case, if you want to do anything more complicated than the default behavior in Eleventy, you will at least have to learn how to write a function in JS, and how to use NPM. But it’s pretty set and forget. No need for git, but TBH it’s helpful and your text editor may well have a plugin that makes it easier (I use the one built into Kate).
That looks similar to h-include which also provides a custom element, but I like the docs page for embed-html better. It’s good that it doesn’t assume you’re using npm or a bundler.
If your main use case is updating a header/nav across multiple pages, a careful find and replace across all files using your text editor might work for the moment, assuming you don’t want to get into static site generators or JavaScript yet.
If the choice is between client-side JavaScript and something like 11ty that makes static files, I’d definitely encourage the latter, which sounds more like your cup of tea anyways.
