Website redesign with 11ty!

Recently I saw a lot of people start talking about the expected new 11ty 2.0 release and decided to take a look. Immediately I had to try this out and begin rewriting my website to use this static site generator instead. Why? Why not! When I took even a basic template and complied it it was mere seconds. Compiling the same site content with Jekyll, took a lot longer.

I started many years ago with Jekyll on a simple blog called Jeyll Now and published straight to Github Pages. It was simple, easy, and widley popular. Soon I was looking for something new as the maintainer stopped working on it. Then found Minimal Mistakes and it has been amazing to use. I just thought it might be time now as well to be in more control of the whole design as well rather than someone else.

So, here it is

11ty redesign commit in Github

11ty is a static site generator similar to Jekyll, Hugo, and many others. What drew me to 11ty was the build speed, use of NodeJS, and the ability to make it your own. There were a lot of great plugins for Jekyll, but it was all Ruby based, and some of the market was hard to find Jekyll specific adoptions for a website.

I also liked the layout structure of the configuration and only include what is needed. Moving from Jekyll to 11ty for me was fairly painless. The post structure, support for liquid layouts, and more were helpful. What made some things even better was the nunjucks support, which I was unfamiliar with, but saw a huge benefit in this too. It's nice you can combine a few modes as well between Liquid and nunjucks.

The one thing that I first noticed was in Jekyll my blog posts were a permalink to /blog/slug-name and 11ty wanted to take the name of the file and permalink to /posts/2023-01-25-11t-redesign/ and this was going to be a problem. I didn't want to make a _redirects entry, but found I could if needed. Then looked into how the permalink is set overall. There was a posts.json file in my posts folder and added the following to it, and my links were the same!

{
  "layout": "layouts/post.njk",
  "tags": ["post"],
  "permalink": "/blog/{{ page.fileSlug }}/"
}

This would render each page with a permalink in the following structure /blog/11ty-redesign like I wanted. I didn't want old inter-post links to not work or redirect the url. Netlify's redirect file allows splats and this would have worked too in keeping 11ty's default posts folder:

/blog/*  /posts/:splat

This was just the beginning and will share some of the other nifty tricks I learned to redesign the web site.

Also 11ty uses BrowserSync to watch for changes and this was really nice in the transition to make changes and then have the web page auto load for you.

Plus you cant beat these build times.

Build times with 11ty

I’m publishing this as part of 100 Days To Offload. You can join in yourself by visiting 100DaysToOffload.com.
Tags: web design, 100DaysToOffload

Webmentions

If there are replies, they will show below.



Found an issue? Edit on Github

← Back home