New Website 2021

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 an astonishing 3.8 seconds.

New Website 2021 Homepage
New Website 2021 Homepage

What’s New?

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.

Typography

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.

Projects

The project area is now generated from a data file. Adding a new project needs no additional CSS or Markup.

Haiku

I simplified the Haiku section and removed unnecessary sections. It’s now a brief 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.

Sketchnotes

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.

Journal

The journal got the most significant 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.

Update 2022: I removed the links and quotes because they are hard to maintain. You can follow my link recommendations instead on Raindrop.io and my favorite highlights on my Readwise page.

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.

Homepage

I added a new section showing featured posts, the latest posts, links, or quotes.

RSS/Atom Feeds

The feed produced by Gatsby created plenty of problems. I was unable 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 issues are history with Eleventy. I created an RSS feed.

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 developing my last website, I felt it getting slower with advancing development time. Each GraphQL query, each Markdown file, each image, and 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 Building production JavaScript and CSS bundles - 40.079s
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

My new technology stack is so fast, the JavaScript compiles in 422ms, the PostCSS is converted to CSS in 900ms, Eleventy generates over 230 files and copies over 300 files to the 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 few 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.

High Maintenance

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

Eleventy is flexible. Multiple template languages are officially supported, and 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 data folder is automatically available to each template. Adding tags to content creates collections. This can be done quickly per folder in a JSON file. It’s possible to create custom collections and sort, modify, or group collections with JavaScript.

With YAML, frontmatter layouts can be chosen for each file or collection of files, and permalinks can be generated programmatically or per file.

Filters allow the modification of content, a few are built into Eleventy, and others depend on the template language. It’s effortless to create custom filters.

Shortcodes allow creating custom helpers to be used and generate output. I used them to replace a lot of my components.

I used these four Eleventy plugins:

Eleventy uses Markdown It as the default Markdown parser. I added plugins to support footnotes, GitHub headings, spoiler, subscript, superscript, and external anchors.

PostCSS

I used PostCSS to generate the CSS of my website, with a 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 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.

Gulp

I started development without any JavaScript bundler, but it’s convenient to be able to use modules or ES6 syntax. I used Gulp for my workflows.

Source Code

I learned a lot by looking at other developer’s Eleventy code, honorable mention goes to:

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.