Kailoon.com

Kailoon.com is an open-source portfolio blog starter built with Eleventy (11ty) and Tailwind CSS, based on the official eleventy-base-blog template and tuned for developers who want a lightweight, high-performance personal site.

What is Kailoon.com?

Kailoon.com is a simple portfolio blog built using Eleventy (11ty) and Tailwind CSS, derived from the eleventy-base-blog project. It takes Markdown content as input and generates a static HTML site with a blog and portfolio pages, ready for one-click deployment on Netlify. The template was created by designer/developer Kailoon, who also maintains a Next.js version of the same personal site at kailoon.com.

Key Features

• Responsive image shortcodes — Includes respimg and figure shortcodes that output WebP images with configurable srcset widths (400, 600, 800, 1200, 1440 pixels) via Cloudinary.
• Dark mode support — Built-in dark mode toggle, a feature added on top of the base blog template for readers who prefer a darker theme.
• External link optimization — Automatically adds target="_blank" and rel="noreferrer" to external links using markdown-it and the markdown-it-link-attributes plugin, improving SEO and outbound link handling.
• Draft posts — Enables draft posts that are kept out of the published site until you're ready to release them.
• Cloudinary and Netlify ready — Pre-configured for Cloudinary image delivery and Netlify deployment, with the author reporting a perfect 4x100 score on Google Lighthouse.
• CSSnano minification — Production builds minify CSS with CSSnano to reduce file size.
• Markdown-driven content — Manage site metadata in metadata.json, homepage content in data.json, and pages like about.md as plain Markdown files.

Who is it for?

• Portfolio owners — Developers and designers who want a quick, minimal portfolio with a matching blog, hosted statically and free of server maintenance.
• Eleventy beginners — People learning the Eleventy static site generator who want a practical starting point that already wires up Tailwind, dark mode, and responsive images.
• Netlify deployers — Users who prefer Git-based deployments to Netlify and want a template that runs with zero build configuration beyond the included settings.

What can you do with Kailoon.com?

• Publish articles — Write Markdown posts with front matter; the template handles drafts, responsive images, and external link handling automatically.
• Display a portfolio — Use the respimg shortcode to embed responsive, width-optimized images from Cloudinary, with an optional figure caption via figure.
• Customize quickly — Update four files (metadata.json, data.json, about.md, and the content folder) to replace the entire site's content.

How does Kailoon.com work?

1. Clone or download the repository and run npm install to pull in dependencies.
2. Remove the sample posts and works that you don't need.
3. Edit metadata.json with your site name and settings.
4. Edit data.json to update the homepage content.
5. Edit about.md for your about page, then run the build and deploy to Netlify.

Pros and cons

• Pros: Extremely fast static output, perfect Lighthouse score, includes dark mode and Cloudinary optimized images, simple Markdown workflow, and is free and open source.
• Cons: The author notes the live site has since moved to Next.js, so this Eleventy version may receive less frequent updates, though the repo is still maintained.

FAQ

Does Kailoon.com support dark mode?

Yes, the template includes a dark mode feature, which was added on top of the original eleventy-base-blog.

What image formats are generated?

The responsive image shortcodes output WebP format through Cloudinary, with multiple srcset widths for different screen sizes.

Is Kailoon.com free to use?

Yes, it is an open-source template. You can clone it from GitHub and use it for personal or commercial projects without charge.

Can I deploy Kailoon.com to Netlify?

Yes, the template is Netlify-ready and has been reported to achieve a perfect 4x100 score on Google Lighthouse.

Does the template include draft posts?

Yes, draft posts are enabled, letting you keep unfinished articles hidden until they are ready for publication.