Powering the latest blog (here!) with 11ty

My favorite static site generator along with Tailwind UI to rebuild this very site.

🍿 3 min. read

Static Site Generation

11ty (Eleventy) just hit v1.0 and it's still by far my favorite static site generator. What the heck am I talking about? Well static site generators are code that typically gets run once to compile a static website - usually a directory full of simple html and css. Many, including eleventy work based off of content pulled directly from a collection of markdown files. Check out this very site's markdown to see for yourself! Often times a little bit of data is thrown into the header, known as "front matter" often written in YAML to define some content like a post title, date, tags, etc. This data along with the post content can then be compiled into a static site, no databases or anything to serve really. Just run the static site generator on deploy and let your web server host the html files that come out the other end.

HTML & CSS (with Templating and Functional Styling)

Now without some styling or extra layers of HTML it'd be a bunch of black text on a white background and there would be no tab titles or anything you'd expect a site to be. That's where eleventy offers optional templates which you can write in a wide variety of templating languages! I've leaned on nunjucks as a personal preference but handlebars or anything goes really. That handles the templating that will wrap the content and place dynamic data into the files that will be statically generated, now the styling...

Writing CSS manually is so very completely valid I cannot emphasize it enough. But as a lazy clever developer (look at me loving myself, woo) I leveraged TailwindCSS and TailwindUI. These tools allow for rapidly building out sites while focusing on the html "components" letting me pull together elements like a card that I can render a post into. When set up correctly, PostCSS will automatically strip away any unused CSS meaning this otherwise bulky library ends up shipping just a few kilobytes in the end, so there's next to no downsides in the final product. Using this strategy meant there were color variables defined by some very smart people I could lean on as well, and on top of that the HTML is very accessible. Everyone wins!

Writing Content

Last but not least, behind the scenes I'm now writing blog post content in Obsidian a markdown editor that is both simple to use and highly extensible. Think of it as the VS Code of Markdown, offering a wide selection of optional core and community plugins. What's incredibly nice is the Obsidian config is saved to the current directory, meaning I can synchronize it with this very respository. This means any of my devices can pull down this repo, open obsidian, and use the workflow I'm comfortable with to more easily write new content without some complicated admin panel or WYSIWYG editor like Wordpress would have. This also means the content is highly portable, I could move this whole blog to or another static site generator tomorrow if I wished.

I'm really excited for this new blog. Fingers crossed I'll begin writing in it! I have a lot of content to catch up on.

11ty Mascot, Possum with her babies floating by on a red balloon