Skeleventy is a free, open-source Eleventy starter skeleton that provides a clean, minimal build pipeline for fast and accessible static websites.
What is Skeleventy?
Skeleventy is a boilerplate project for the Eleventy static site generator, created by Joseph Dyer and published on GitHub with 386 stars. It takes Markdown content organized in per-page folders and compiles it into a static HTML site with an SCSS-based styling system, JavaScript built with Babel, and an asset pipeline managed by Laravel Mix. The starter runs on Node v10+ and is designed to deploy directly to Netlify, where its demo site is hosted.
Key Features
- SCSS + Laravel Mix build pipeline — Laravel Mix provides a Webpack-based API on top of Webpack to compile SCSS and JavaScript from the resources/ directory, with live reload during development.
- Gorko utility class generator — a Sass-powered tool that creates only the utility classes you configure in _config.scss, replacing a heavy CSS framework like Tailwind.
- PurgeCSS — automatically removes unused CSS from the compiled stylesheet, keeping the final file size small.
- ES2017 JavaScript support — Babel compilation allows modern JavaScript syntax to run in older browsers.
- SEO-friendly meta output — includes Open Graph and Twitter card meta tags for social sharing.
- Image lazy loading — built-in lazy loading for images to improve page performance.
- XML Sitemap — automatically generated sitemap for search engine indexing.
- Clean blog structure — content organized in per-page folders with index.md files, supporting categories and featured images.
Who is it for?
- Front-end developers who want a minimal, maintainable starting point for an Eleventy site without the overhead of a CSS framework.
- Bloggers who need a simple blog setup with categories and featured images.
- Developers learning Eleventy who want a well-structured example that separates content, utilities, and assets.
- Freelancers building client sites who need a fast static site that can be extended with custom Webpack configurations.
What can you do with Skeleventy?
- Launch a personal blog: publish Markdown posts with categories and featured images, with generated sitemap and SEO meta.
- Build a company or portfolio site: create per-page markdown files with custom layouts for a lightweight, accessible site.
- Prototype a static site: use the included build pipeline and Gorko utility classes to quickly iterate on design without a complex toolchain.
- Learn the Eleventy workflow: study the folder structure and utilities to understand how Eleventy, Laravel Mix, and PurgeCSS fit together.
How does Skeleventy work?
Clone the repository, run npm install, then start the local development server with npm run dev. Eleventy watches site/ for content changes and Laravel Mix compiles assets from resources/. The project splits Eleventy configuration into site/ (global data, templates, content) and utilities/ (filters and transforms), with navigation powered by the official Eleventy navigation plugin.
Pros and cons
Pros:
- Minimal and maintainable, with Gorko generating only the utility classes you need.
- PurgeCSS keeps the final CSS small.
- Live reload during development.
Cons:
- Responsive images are not baked in; the README recommends using a CDN like Cloudinary for that.
Alternatives
- eleventy-base-blog — the official minimal blog starter maintained by Eleventy's creator, which includes a blog with posts and tags.
FAQ
Is Skeleventy free?
Yes, Skeleventy is a free, open-source starter on GitHub. You can clone the repository and use it for any project without licensing fees.
How do I get started with Skeleventy?
Clone the repository, install dependencies with npm install, and run npm run dev to start the development server. Eleventy includes live reload, so changes appear instantly.
Does Skeleventy use Tailwind CSS?
No, Skeleventy uses Gorko, a Sass-powered utility class generator. The README notes that Tailwind was removed in favor of Gorko for simplicity and maintainability.
Does Skeleventy include responsive images?
No, responsive images are not included. The README suggests using a CDN like Cloudinary and links to a tutorial for setting up Eleventy with Cloudinary.
Can I extend the build pipeline?
Yes, Laravel Mix gives you an API on top of Webpack, so you can add custom Webpack configs, code splitting, and plugins like PostCSS.
