A personal blog built using Eleventy (11ty), based on the eleventy-base-blog starter but refactored, restructured, and redesigned for responsive (mobile-first in mind).
This project started with eleventy-base-blog and evolved into a custom blog system with a redesigned layout, streamlined folder structure, minified CSS output, and improved responsiveness.
- 🎨 Gruvbox color palette design
- 🔧 Custom folder structure for better clarity and separation of concerns
- 💡 Responsive design with custom layouts and typography
- 🧹 Minified CSS output using
clean-cssduring the build process - 🧼 Removed unused base files to simplify the codebase
- 🌐 Custom and fancy
404page
├── eleventy.config.js # Eleventy configuration
├── LICENSE
├── package.json
├── pnpm-lock.yaml
├── public/ # Public assets copied as-is to output
│ ├── css/
│ │ ├── 404.css # Inlined in 404 HTML
│ │ ├── index.css # Linked globally in layout
│ │ └── prism-diff.css # Inlined in code block templates
│ └── img/ # Static images
├── README.md
└── src/
├── _config/
│ └── filters.js # Custom filters for Eleventy
├── _data/
│ └── metadata.js # Site-wide metadata
├── _includes/
│ ├── layouts/
│ │ ├── 404.njk
│ │ ├── base.njk
│ │ └── post.njk
│ └── postslist.njk # Reusable post list component
├── content/ # All content pages and posts
│ ├── 404.md
│ ├── about.md
│ ├── archive.njk
│ ├── blog/
│ │ ├── blog.11tydata.js
│ ├── feed/
│ │ └── pretty-atom-feed.xsl
│ ├── index.njk
│ ├── sitemap.xml.njk
│ ├── tag-pages.njk
│ └── tags.njk
You're welcome to use this blog setup as a base for your own site!
- Clone the repo
- Install dependencies
- Run the dev server
- Edit
cssfiles inpublic/cssto add your own styles - replace
trypanicname for your onw ineleventy.config.js,package.json,src/_data/metadata.js - update
README.mdandsrc/content/about.mdfiles - add your name in
LICENSEfile
- Edit