New Website 2021
My brand-new website is online, using Eleventy as its static site generator. The development was quick and fun, and Eleventy gives me a huge amount of flexibility. And it’s fast, very fast. Burned by my last technology choice I did this time a performance test before picking the tool. I created 1000 large Markdown pages and let Eleventy render them to HTML. It was done in astonishing 3.8 seconds.
My new website looks familiar but different. I changed the complete code and picked a much simpler technology stack while keeping the design. I polished it everywhere, removed unneeded or complicated parts of the website, and extended it to other parts.
The new font is Secuela, a variable font with weights from thin to black. The new font allows having a slimmer weight for the dark mode. This ensures the contrast doesn’t bleed and blends the eyes.
The project area is now generated from a data file. Adding a new project needs no additional CSS or Markup.
I simplified the Haiku section and removed unnecessary sections. It’s now a short introduction and links to my Haiku. Gone are the different colored layouts. Haiku was the only section using the green layout. Sketchnotes were the only section using the brown layout. The blue layout I didn’t use at all. All these are gone.
The last Sketchnote section didn’t get a lot of love. The relaunch brings a nice grid layout with a detail page for each item.
The journal got the biggest change. I started splitting my posts into three categories: Posts, links, and quotes. Posts are my essays and posts, links are my retired monthly link post and the new irregular link post format. I added a quote format because some quotes are too good not to be shared. I took the time to extract all interesting quotes from my monthly posts and create separate quote posts out of them.
The overview page of the journal is now chronological, grouped by year. Small icons added to link or quote posts differentiate those from regular posts.
I added a new section showing featured posts, the latest posts, links, or quotes.
The feed produced by Gatsby created a lot of problems. I was not able to remove the CSS classes added by Styled-Components and the custom MDX tags blew up the file size so much that a lot of feed readers couldn’t parse it anymore.
All these problems are history with Eleventy. I even created four different feeds to subscribe to: Posts, Links, and Quotes combined, or Posts, Links, and Quotes as separate feeds. Subscribe to what you like.
Why Did I Change the Technology Stack?
Given the fact that my last relaunch was 10 months ago, why did I relaunch again?
The short answer is: Gatsby was too slow.
While I was still developing my last website, I felt it getting slower with advancing development time. Each GraphQL query, each Markdown file, each image, each technology added increased the build times.
To give you hard numbers: Building my previous Gatsby site with 77 posts took up to 3 minutes on a MacBook Pro 16" 2020 with 16 GB RAM:
success open and validate gatsby-configs - 0.307s
success load plugins - 5.841s
success onPreInit - 0.041s
success delete html and css files from previous builds - 0.005s
success initialize cache - 0.007s
success copy gatsby files - 0.215s
success onPreBootstrap - 0.047s
success createSchemaCustomization - 0.005s
success Checking for changed pages - 0.003s
success source and transform nodes - 15.801s
success building schema - 0.565s
success createPages - 0.122s
success Checking for changed pages - 0.004s
success createPagesStatefully - 0.471s
success update schema - 0.040s
success onPreExtractQueries - 0.001s
success extract queries from components - 4.080s
success write out redirect data - 0.012s
success Build manifest and related icons - 0.483s
success onPostBootstrap - 0.499s
info bootstrap finished - 35.813s
success run static queries - 6.581s - 22/22 3.34/s
success run page queries - 24.880s - 114/114 4.58/s
success write out requires - 0.006s
success Rewriting compilation hashes - 0.004s
success Building static HTML for pages - 18.687s - 114/114 6.10/s
success Generating image thumbnails - 105.103s - 521/521 4.96/s
success onPostBuild - 35.452s
info Done building in 163.798668245 sec
dist folder in 3.62s. This includes a plugin doing work on my images (adding sizes, lazy loading, and blur up). Adding time between the processes and the generation of a service worker with Workbox, my whole production build is done in 14,5s.
That’s the time Gatsby needed for processing the GraphQL queries. 😳
My old stack was so slow I had to switch from building via GitHub on Netlify to building locally and uploading via the Netlify CLI because my 300 free build minutes per month were used up early each month. And a build took nearly 8 minutes on Netlify.
Over the last months, my frustration rose with each essay I wanted to write, because seeing a mistake in the published text and fixing it could take up to 30 minutes of my time.
Let’s be honest: My old stack was too complicated for a website. A blog shouldn’t be a SPA (Single Page App), a good old MPA (Multi-Page App), or a website (as we used to call it) is the right choice.
I previously used TypeScript, Styled-Components, MDX, GraphQL, wrote hundreds of Jest unit tests, and used 120 npm packages. Updating and keeping a stack like this alive is work, not fun. The Saturday morning is gone, after updating 120 packages with dozens of major updates.
The New Tech Stack
Eleventy is flexible. Multiple template languages are officially supported, more can be added with plugins. I picked Nunjucks as my template engine because it’s inspired by the Django template engine which I liked a lot.
Eleventy takes a lot of the ideas of Jekyll and adds more features on top. It’s easy to create collections out of data or files. Every JSON file in the
With YAML frontmatter layouts can be chosen for each file or collection of files, permalinks can be generated programmatically or per file.
Filters allow the modification of content, a few are build into Eleventy, others depend on the template language. It’s effortless to create your own filters.
Shortcodes allow creating custom helpers to be used and generate output. I used them to replace a lot of my components.
I used only four Eleventy plugins:
- @11ty/eleventy-plugin-rss – Helps creating RSS/Atom feeds.
- @11ty/eleventy-plugin-syntaxhighlight – Adds code highlighting via Prism on build time.
- eleventy-plugin-lazyimages – Adds width and height attribute to all images, lazy loading and blur up technique.
- eleventy-plugin-reading-time – Calculates the reading time.
Eleventy uses Markdown It as the default Markdown parser. I added plugins to support footnotes, GitHub headings, spoiler, subscript, superscript, and external anchors.
I used PostCSS to generate the CSS of my website, with very few plugins. I added a few features to use SASS-style variables. I might move to CSS custom properties in the future. For now, I use them only for color variables.
Another thing added is the nesting of CSS, because it makes the writing easier and it’s more clear what belongs together.
Sorting media queries is a helpful plugin when using nested media queries. The plugin collects all CSS of one media query size and combines them.
I learned a lot by looking at other developers Eleventy code, honorable mention goes to:
- Zach Leatherman, the creator of Eleventy.
- Jecelyn Yeen, who wrote a full series on creating a blog with Eleventy.
- Phil Hawksworth who created multiple Eleventy starters to learn from.
- Stephanie Eckles, who created 11ty Rocks!, wrote multiple articles about Eleventy, and created a free Egghead course.
- Max Böck, who writes a lot about Eleventy in his blog.
My source code on GitHub is as always public for everyone, including all commits I did since I started the project in mid-March 2021.