A new website: now on Eleventy!
Sorry for the radio silence on this website for the last few months. I've been working in secret in rebuilding the site, on a different platform.
But wait - didn't I just rebuild the site a few year's ago? Yes I did. Hugo is a great site generator, and I think it's a great project. But for my site's needs, it was time to move on.
Why leave Hugo?
- Hugo has a built in syntax highlighter for code examples, which was really easy to use. Really, there was nothing to do. However, for my particular brand of front end development, and the code examples that are some of the most important content that I publish, that syntax highlighter wasn't that great. The code was hard to read - especially when I had examples of things like nested Sass.
- This is more of a preference, but, I'll just say it: the template language is ... fugly. I always struggled to do even simple tasks when adjusting my markup.
- I'm not a Go developer. There were a lot of assumptions underlying the project that I simply didn't share.
Enter: Eleventy
I've heard lots of people in the front end community rave about Eleventy for a few years. After playing with it for a bit, I was convinced that it would be a better fit for my site. It addressed some of my major concerns:
- The syntax highlighter recommended by Eleventy is based on Prism.js, which handles my code examples MUCH better than the Hugo one.
- It supported multiple template languages, including Nunjucks, which makes way more sense to me.
- It is JavaScript based, which means I am able to understand some of the behind the scenes functionality much more readily.
But what about performance?
Not going to lie - Hugo's biggest selling point is it's speed, and it lives up to the hype. It is wicked fast.
That said, Eleventy is pretty darned fast. Is it as fast as Hugo? No. But, for my set of content (at the moment about ~70 pages), it's more than acceptable. Honestly, in my day-to-day working with it, I haven't really noticed the slow down. If I was working on a site with hundreds of pages, I might have a different perspective on this.
Any drawbacks?
All that said, I did bump my head on a few things with Eleventy. It wasn't all roses and sunshine.
- No built in Sass support. In order to develop with Sass, I had to look around quite a bit to figure out how to incorporate it in my project. Ultimately I ended up using Michelle Barker's Eleventy Parcel project as a starting point, which includes Sass support.
- It is way too difficult to inspect content objects when you're developing a page
- No "draft" state. That was out of the box in Hugo. Not a huge deal, but it was a nice feature.
- There are multiple documentation sites out there. The old ones are clearly marked as deprecated, but it is still confusing when Googling an issue.
- The flexibility of multiple template languages also makes it hard to understand some pieces of documentation, which may or may not be in the language you've chosen.
- I generally feel like it could include a few more "batteries". I had to add custom code to output simple things like the current year.
Conclusion
Overall I'm very happy with how this has turned out. The new framework let me work quickly, and I was able to understand the overall approach much better. I think the site conveys a lot of my personality, and looks very different from a lot of other sites out there.
Previous: Colorosetta: the VS Code Extension!