adikos.net

Static Site Generator Thoughts

I completed the move from Hugo to Eleventy today. I'm grateful for this list of static site generators I came across. There's a lot of them out there, in various states of maintenance and disrepair (just as any software project). I wanted to try to find one that is actively maintained and used, and Eleventy seemed like the best of the bunch for my purposes.

I will say I tried Cobalt which is very nice, but was not exactly what I was looking for it. It was also very picky about date formats in metadata, which was offputting, but if you're OK with that, it's nice. With such a common name, though, it's also impossible to find pre-made themes for; I didn't find any, but again, perhaps there was a lot of noise vs. signal in my searches. I think it would be nice for simpler sites and ones where you're OK rolling a lot of the theming yourself via CSS &c.

HydePHP is another strong contender. I was actually juggling and testing out Eleventy and HydePHP at the same time and seeing how closely I could hew to my original Hugo site. I was generally pretty happy with HydePHP, but I wanted a light/dark mode toggle and couldn't figure out how to code one in. It ended up being a little easier in Eleventy. So they were very close for me, and I think if you're looking for a good, solid static site generator, it's a great option as well.

I'm sure there are plenty of others, but I think this was a good move. Hugo was good to me for years, but the switch is worth making, for me at least. With that said, I'll get into a few of the tweaks I had to make to my installation to get it to work the way I wanted it. I used Eleventy Base Blog to get a working installation. I didn't see an easier way. Maybe one of these days I'll play with it more, but I'm happy with how it turned out for now.

I came across this light/dark mode toggle for Eleventy. I'm a big dark-mode fan, but I know plenty of people aren't, so I definitely wanted to give people the option. I thought hey, this is great! I'll definitely add it to my site. However, I had to tweak a few things in the CSS file:

:root.light .theme-icon {
    background-image:
      url('../img/sun.svg'),
      url('./img/sun.svg');
}

:root:not(.light) .theme-icon {
    background-image:
      url('../img/moon.svg'),
      url('./img/moon.svg');
}

This is probably a me problem, though. I placed the sun/moon svg images in ./public/img/ off of the root of the Eleventy installation. However, I have a few pages which are in a subdirectory when the site is published, so using ./ (for the current directory) will not find the image correctly. I thought about it for a second and found out that the CSS background-image can take two URLs. So that way, if one fails, it'll work with the other. A little hacky, but it works!

A little update: I found instances where even the .. relative link fails. So it's probably better to just use the full absolute link to the svg files. I've since done this and it's worked much better.

Otherwise, I can't think of any other bespoke stuff that I had to do with my site.

I've been running a static site for nearly 6 years now and it's overall been a pretty lovely experience. Sure, there's no WYSIWYG editing in place, but I kinda like the idea of "compiling" the site and then reuploading it. I also find it really, really cool, that it doesn't depend on a database in the background that can be easily hacked. I love it and I'd like to keep this site going for a long, long time. Thanks for reading, friends <3