With the new year upon us, it’s time for a new-look personal website. But where should you start? We’d recommend Eleventy, the simpler static site generator. If you’re new to Eleventy, be sure to check out our Eleventy Beginner’s tutorial to help you get started. If you’d like to get set up with a great Eleventy theme, read on!
Why use Eleventy themes?
Developers often use themes (also called starters) when working with static site generators like Eleventy to save time and get up and running quickly with a pre-configured project setup. An Eleventy theme is essentially a boilerplate project that includes a basic structure and configuration for a static site, along with some example content and assets. Using a theme can be a helpful way to get started with a new project, especially for developers who are new to Eleventy or static site generators in general.
There are many different themes available for Eleventy, and you can choose one that best fits your needs and preferences. Some are more basic and minimal, while others may include more features and functionality. You can also create your own Eleventy theme by setting up a new Eleventy project and configuring it to your liking, and then sharing it with others as a starting point for their own projects.
Why start with a blog on Eleventy?
There are many reasons why developers might choose to create a personal blog. Some of the most common reasons include:
Learning in public: Developers often create personal blogs as a way to learn how newly released tools and static site generators work, and to share their knowledge and experience with others in the tech community. This can be especially helpful for other developers who are looking to learn more about a particular programming language or technology.
Networking: Personal blogs can be a great way to network with other professionals in the tech industry. By sharing their thoughts and experiences, developers can build relationships, and promote their skills and expertise to potential employers or clients. By regularly sharing their experiences, developers can demonstrate their growing knowledge and abilities to a wider audience.
Creativity: Finally, personal blogs can be a great creative outlet, both in terms of updating their stack to the newest tools, and writing about technical topics.
CloudCannon’s Top Eleven 11ty Blog Themes
Sendit
License: MIT
Author: CloudCannon
Sendit is a multipurpose Eleventy theme with a built-in blog, made with the Bootstrap CSS framework. The components have been converted to Bookshop. It’s the perfect starting point to see how CloudCannon’s Visual Editing and component-based page-building works, and how they can really speed up your blogging flow.
Sendit demo site
Source
Deploy on CloudCannon
Yetty
License: MIT
Author: Yolanda Gorriz Exposito
Built with accessibility and performance in mind, Yetty features Sass/SCSS, Critical CSS, PostCSS, persistent dark mode using local storage, cache busting via filter, minified HTML on production, JS compilation and minification, and image processing with the eleventy-img plugin.
Chirpy
License: MIT
Author: René Winkelmeyer
An Eleventy version of the popular Chirpy Jekyll blog theme, Chirpy features 4x100s on Lighthouse by default, light and dark modes, SEO and OpenGraph optimization, accessibility, JS and CSS build optimization, RSS, sitemap.xml, and responsive image optimization.
Eleventy Base Blog
License: MIT
Author: 11ty / Zach Leatherman
The one that started it all, the Eleventy base blog is also the basis for many other popular themes. If you’re making your first Eleventy blog, this is the theme for you. It’s deliberately minimal, and functions as its own documentation (though the readme at the GitHub source link below is also very helpful).
Eleventy Base Blog demo site
Source
11ty Starter Theme by Design 2 SEO
License: MIT
Author: Jeremy Faucher
An SEO-friendly theme for Eleventy, featuring grid CSS, blogging with sub-categories, and a clean, modern layout for a simple introduction to blogging.
11ty Starter Theme by Design 2 SEO demo site
Source
Minimalism
License: MIT
Author: Marco Micale
Minimalism allows for even speedier page creation, and comes complete with light and dark modes, RSS, SEO optimization, 404 error pages, easy social links, PWA, sitemaps, and top lighthouse scores.
Thisis Classic SEO
License: MIT
Author: Mesin Kasir
A blog-first and mobile-first Eleventy theme, Thisis is built for speed and SEO — two of the most important considerations when building a new site.
Supermaya
License: MIT
Author: Mike Riethmuller
Supermaya is an Eleventy theme designed to help you add rich features to a blog or website without the need for a complicated build process. Along with standard blog features like tags, Posts, Pages, and pagination, Supermaya includes RSS, semantic markup, offline content, lazy loading images and Critical CSS. It also includes seamless JS and SCSS compilation, and, via KeystoneJS, comments, claps, a reading list, and login functions.
Eleventy High Performance Blog
License: MIT
Author: Google
If you’re particularly picky about performance, here’s the perfect Eleventy theme for your blog. High Performance does perform extremely well, as it implements a wide range of performance best practices. It achieves perfect Lighthouse scores, a single HTTP request to First Contentful Paint, a very optimized Largest Contentful Paint, 0 Cumulative Layout Shift, and ~0 First Input Delay. Thanks, Google!
Eleventy High Performance Blog demo site
Source
11ty Tailwind Alpine (11ta)
License: MIT
Author: 11ta
As the title of this theme suggests, it’s a project template that has TailwindCSS and Alpine.js baked in. 11ta features SIAB (site in a box), 100 Lighthouse scores across Pages and Posts, an ATOM feed, inlined CSS for Prism Okaidia syntax highlighting, Webpack for Alpine and any other custom JS, Purged CSS and minified source on production, and custom 404 pages.
11ty Tailwing Alpine demo site
Source
Cool11ty
License: MIT
Author: Mesin Kasir
A simple and bright theme, Cool11ty is a straightforward introduction to Eleventy. More complicated sites might hit the edges of this theme sooner, but for a basic personal homepage and blog setup, this is a great place to start.
CloudCannon’s Git-based Eleventy CMS lets developers configure an ideal visual editing experience for any number of content editors. If you’re interested in setting up your new Eleventy blog with a configurable CMS, check out our Eleventy Setup Tutorial for a straightforward guide to getting started with Eleventy and CloudCannon.
Top comments (1)