Twenty Twentyone

Twenty Twentyone is an Eleventy starter blog theme styled with TailwindCSS, built for one-click deployment to Netlify and inspired by Ghost's default Casper theme.

What is Twenty Twentyone?

Twenty Twentyone is a static blog starter template built on Eleventy (11ty), a JavaScript static site generator. The theme takes Markdown files as its content source and outputs a static HTML blog with plain HTML templates and TailwindCSS styling. Created by smolcodes and published on GitHub, it includes configuration for NetlifyCMS, Hyvor Talk comments, and MathJax, and offers a one-click Deploy to Netlify button for fast setup.

What makes Twenty Twentyone stand out?

• TailwindCSS with PurgeCSS — Utility-first CSS with automatic removal of unused styles; includes Tailwind's Typography plugin and Prism for syntax highlighting in code blocks.
• NetlifyCMS integration — A configuration file at src/admin/config.yml lets you connect the CMS to your own GitHub repository, and GitHub Identity for authentication.
• Hyvor Talk commenting — A lightweight comment system; you only need to replace the Hyvor ID in post.html after creating an account.
• MathJax support — The theme loads MathJax so posts can render mathematical notation written in LaTeX-style syntax.
• Eleventy image shortcode — Version 2 introduces an image shortcode using eleventy-img for optimized responsive images.
• Markdown callouts — Version 2 adds callout blocks for notes and warnings in Markdown content.
• HTML minifier — Version 2 automatically minifies output HTML for smaller files.
• Webpack build — The theme uses Webpack to process assets alongside the Eleventy build.

Who should use Twenty Twentyone?

• Bloggers wanting a Casper-inspired design with a built-in CMS (NetlifyCMS) to write posts in a web interface without touching code.
• Eleventy developers who want a TailwindCSS and Webpack-based starter with a clear local workflow: clone, npm install, run the Eleventy and Webpack builds.
• Technical writers who need to publish posts with code highlighting and mathematical formulas using Prism and MathJax.
• Indie web publishers who want to deploy to Netlify in one click and have comment functionality via Hyvor Talk.

What can you do with it?

• Set up a blog in minutes: Use the one-click Deploy to Netlify button to create a live blog without manual configuration.
• Write with MathJax: Publish posts containing LaTeX-style math, with a link to a useful guide for authors.
• Manage content via NetlifyCMS: Edit site.json in src/_data, then use the CMS admin panel to author Markdown posts.
• Customize the design: Modify tailwind.config, use preflight styles, and edit HTML layouts in src/_includes.

How does it work?

The theme uses a two-step build: first run npm run build:eleventy to compile the Eleventy site, then npm run webpack to bundle assets. For local development, npm run start runs the site. You can also deploy automatically by clicking the Deploy to Netlify button in the repository, which connects the GitHub repo and builds the site on Netlify's servers.

FAQ

Is Twenty Twentyone free to use?

Yes, the theme is publicly available on GitHub as an open-source project, so you can clone, modify, and deploy it. Hosting costs would depend on your chosen provider; Netlify offers a free tier.

How do I set up Hyvor Talk?

Create an account on Hyvor, find your site ID on the General Settings page of the Hyvor Dashboard, and paste that ID into post.html located in src/_includes/layouts.

How do I configure NetlifyCMS?

After adding your repository to Netlify, edit src/admin/config.yml to change the repository value to your own repo, and enable GitHub registration in Identity settings under Netlify.

Does the theme support code syntax highlighting?

Yes, code blocks are styled with Prism, which is included through the TailwindCSS setup and the Tailwind Typography plugin.

How do I change site information?

Edit the site.json data file found in src/_data. This is where global site settings like the title and description are stored.