11ty version of the popular Chirpy Jekyll blog theme. Also powers my personal blog. I liked the UX a lot, but not the tech stack, hence I re-built it for myself. Sharing here with everybody, in case you like the same.
You can check out the live version on https://eleventy-chirpy-blog-template.netlify.app.
If you want to deploy, there's a button for it:
- 💯 on Lighthouse
- 🔆 and 🌛 mode
- 🎯 SEO and OpenGraph optimized
- 🌄 Responsive images optimization
- 👀 Accessible
- 🛠 JavaScript and CSS build optimization
- 👨💻 Prism-based syntax highlighting
- 📚 RSS (yup, still a thing), sitemap.xml, and JSON-LD
- 🔍 Algolia Search enabled
- and more
Opinionated setup with Prettier, ESlint, markdownlint and others. UX build with Nunjucks and TailwindCSS. JavaScript bundled with Rollup.
All blog configuration is handled via siteconfig.js
. Everything is inline documented.
All build processes rely on how NODE_ENV
is set. For production builds, which then also means minified CSS and JS you've to set the value to production
. I mention this explicitly as this is for some vendors not the default.
If you want to speed up your build times a bit you can add the generated images to your git repo. The .gitignore
already contains a commented section for that.
This repo uses Volta. Get it, and it'll make your node life so much easier.
Clone this repository.
git clone https://github.com/muenzpraeger/eleventy-chirpy-blog-template
Change into the cloned directory.
cd eleventy-chirpy-blog-template
Install dependencies. Note, if you prefer npm
over yarn
make sure to first remove the yarn.lock
file, and then run npm install
.
yarn install
Start the local development process.
yarn dev
Open the page, usually on http://localhost:8080, and dig around!
The UX of this template is based on the popular Chirpy template, just with a different tech stack. If you prefer to run Jekyll and Bootstrap, checkout Chirpy here. It's great.
Also big thanks to the the authors of the 11ty High Performance Blog.