Interested in building a new website with, or converting an existing site to, either of the two best static site generators (SSGs)? Please read on, my friend.
Recently, I’ve been spending spare hours working on Eleventy and Hugo starter sets for folks like you. And they’re not only updated versions of the ones I announced last July, but also two new ones I’m announcing today.
Rather than expect you to find them on your own in my various scattered references across my humble little site, I thought I’d write this brief post to list them all together. Maybe you’ll find them helpful in whatever you choose to do in Eleventy or Hugo. Each is always based on the current appearance and layout of this site, which I hope will make clearer the connection between the code and the result.
I’ll list each by the name of its respective repository (“repo”) in GitHub. I’ve also linked each to its live demo on Vercel.
Eleventy starters
Incidentally: the eleventy_solo in each Eleventy starter’s name comes from that of this site’s repo (and, if you’re wondering why I chose that name, you may want to see my post from last year about when, and why, I converted the site over from Eleventy/webpack to Eleventy-only).
The Eleventy starters are distinguished by two things: which of the numerous Eleventy templating choices they use, JavaScript or Nunjucks; and how they’re styled.
So, here we go.
- eleventy_solo_starter — JavaScript templating; Tailwind CSS, which as of version 2.1.0 includes the just-in-time (JIT) compiler (for details about the advantages of this experimental addition to Tailwind, refer to the official announcement as well as my related post). View the demo.
- eleventy_solo_starter_njk — Nunjucks templating; Tailwind CSS, now with the JIT compiler. View the demo.
- eleventy_solo_starter_scss (new) — JavaScript templating; Sass/SCSS. View the demo.
- eleventy_solo_starter_njk_scss (new) — Nunjucks templating; Sass/SCSS. View the demo.
Hugo starters
For now, I still have only two Hugo starters. This is for two reasons: there’s only one form of templating in Hugo (Go-based templating); and the Tailwind JIT compiler isn’t yet compatible with Hugo. One is based on Tailwind CSS (again, no JIT) and the other on Sass/SCSS. Once the Hugo-vs.-JIT issues are resolved, I’ll likely add a JIT-equipped Hugo starter, too.
- hugo_twcss — Tailwind CSS. View the demo.
- hugo_solo — Sass/SCSS. View the demo.
Enjoy
As usual, I’ve learned a few things while working on these, including the need to fix some embarrassing oversights in the older ones. Regardless of your proficiency with Eleventy and/or Hugo, perhaps you’ll find them similarly educational. Have fun with them.
If you use one of the repos, you’ll probably want to “watch” that repo for changes (which have been frequent of late). Also, please let me know — including with GitHub issues, if you prefer — if you encounter difficulties with any of them.
Happy SSG-ing!