Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Netlify Status

An Eleventy starter skeleton

Skeleventy gives you a rock solid foundation to build fast and accessible static websites. View the demo site.


  • A clean, minimal build pipeline with SCSS and Laravel Mix for compiling assets
  • Gorko, a smart little Sass-powered utility class generator
  • Purgecss to remove unused CSS
  • HTML minifier
  • Supports ES2017 JavaScript, with Babel compilation
  • SEO friendly page meta, including Open Graph and Twitter
  • Image lazy loading
  • Mobile navigation
  • XML Sitemap
  • Clean and simple blog, with categories and featured images

Getting started


Node v10+


  1. Clone the repo git clone
  2. cd into the project folder and run npm install
  3. Start the local development server by running npm run dev Tip: Eleventy has live reload baked in!

Folder structure


  • site/ contains all the global data, templates and content
  • utilities/ contains Eleventy helper filters and transforms
  • Each page should have it's own respective folder containing an file
  • You can then choose the most appropriate layout for each page (or create more if you need to)
  • The navigation is powered by the official Eleventy navigation plugin


  • css/ for compiled CSS
  • js/ for compiled JavaScript
  • images/ contains our site's images, an SVG icon sprite and a folder for meta images (OG, Twitter etc)

The build pipeline

Laravel Mix gives us a nice API layer on top of Webpack. Skeleventy uses a simplistic set up, but you can take advantage of extending Mix with custom Webpack configurations, code splitting and plugins such as PostCSS, if you so wish.

You'll find the site's uncompiled SCSS and JS within resources/ where Mix will be watching these directories for any changes. Tip: it's best to always restart the server when creating any new partials or folders


  • scss/ is structured into opinionated sub folders
  • The _config.scss file is where you can change the site's colours and the utility classes generated by Gorko
  • A typographic scale has already been set up using my personal favourite Major Third scale.
  • Tip: for more scales, check out Type Scale


I decided to remove Tailwind in favour of Gorko, purely for its simplicity and maintainability (especially for newer developers). Not having too much to begin with and adding in what you need, will lead to a simpler, more maintainable codebase. Gorko lets you add a sprinkle of reusable utility classes to help keep your code DRY. Credit to Andy Bell for making this handy little tool


  • utilities/ contains any global utility/helper functions
  • modules/ contains your site's actual JavaScript, all kept neat and tidy within their respective modular subfolders
  • You can import these subfolders into main.js using import '@modules/example-module'
  • Tip: you can set up optional import aliases via the webpack.mix.js file

A note on responsive images

Skeleventy doesn't have responsive images baked in, the main reason being: it's best using CDN. Check out this tutorial on setting up Eleventy with Cloudinary.