Pop quiz, hotshot.
I’m delighted to announce that Blog Awesome (the content you are reading right now) is now built with the Eleventy static site generator. For astute Blog Awesome readers the web site’s design will look mostly unchanged but rest assured: this move will improve the long-term durability, stability, and performance of the project.
We’ve also taken this opportunity to ship a bunch of lovely new open source utilities for other folks looking to make a similar journey to the 11ty ecosystem, and you can read on to find out how we used these here.
Importing Content
The previous web site was authored and delivered via WordPress. We’ve moved the front-end out of WordPress but the current options for content creation remain unchanged. Our technical writers can draft and post new content directly from the WordPress CMS (if they wish!). Additionally, folks comfortable with code can write blog posts locally in the template language and development tools of their choosing.
Anyone can use the same tools
To facilitate this decoupling, 11ty has open-sourced a new Import tool to easily and continuously import content from any WordPress site. Using npm (npx is bundled with npm), the import command might look like this:
npx @11ty/import wordpress https://example.com/
After the command completes, you’ll have all of the blog posts, images, videos, CSS, and JavaScript cleaned up and downloaded to your local project. Post content is (optionally) converted to markdown files, images will be optimized, and any syntax highlighted code snippets will be cleaned up with Prettier.
The new Blog Awesome’s origin story started as Eleventy’s own Base Blog with the content imported directly into the content/blog folder of the template project.
Icons
At Font Awesome, we know a thing or two about icons so we had to do something special for the 11ty ecosystem here too. For peak developer experience and ultimate control over site performance, we’re using a special new experimental 11ty plugin for Font Awesome icons: @11ty/font-awesome.
This plugin builds a per-route SVG spritesheet for every page on your Eleventy project, with tree-shaking enabled by default. To use an icon, copy the HTML directly from the Font Awesome icon search into any page and you’re done!
<i class="fa-solid fa-bus-simple"></i>The above HTML sample is rendered as with only a single instance of the SVG no matter how many buses are used. These icons work before (and without) JavaScript or CSS as well.
Colors
Most of the posts on Blog Awesome include a featured image at the top. Sometimes this featured image has a full width design treatment that bleeds out to cover the entirety of the header. Previously, these colors were manually configured. Now these colors are parsed out of the image directly without any additional intervention required using another 11ty plugin (@11ty/image-color).
Consider the following sample featured image from No, You’re Not Seeing Double. We Just Added the Remaining Duotone Styles!:
We’ve found the following theme colors and can use them to style the header:
Avoiding manual assignment of these colors allows us to more consistently adjust the text, icon, and logo colors in the header to have optimal color contrast.
The in the footer has a little easter that also makes use of these colors!
Keep it above 50 mph
Even better, we were able to deliver a much faster user experience for visitors as well. Let’s have a look at some before and after performance metrics for the home page.
| Asset Type | Before | After |
|---|---|---|
| Total | 1.5 MB (transfer) | 134 kB (transfer) |
| HTML | 18 kB | 14 kB |
| CSS | 597 kB | 0 kB (inlined) |
| JavaScript | 61 kB | 2.4 kB |
| Fonts | 212 kB | 77 kB |
| Images | 604 kB | 36 kB |
The following stats were gathered from Google’s PageSpeed Insights tool.
| Metric | Before | After |
|---|---|---|
| FCP | 4.5s | 1.2s |
| LCP | 7.1s | 1.4s |
| TBT | 240ms | 0s |
| CLS | 0.001 | 0 |
| Lighthouse |
|
We hope y’all enjoy the new site as much we enjoyed building it and the open source dividends that came along too. Now it’s your turn to go make something awesome!
