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

The beginnings of a new home page. Based on:


A simple Eleventy Starter Kit, my base for all new 11ty projects. (Demo Site)

Netlify Status


  • CSS Pipeline (Sass, CleanCSS)
  • JS Bundling (Webpack)
  • SVG Icon Sprite Generation
  • Critical CSS
  • HTML Minification
  • No external builds, everything runs through 11ty

Getting Started

To install the necessary packages, run this command in the root folder of the site:

npm install


  • Run npm start for a development server and live reloading
  • Run npm run build to generate a production build

Deploy a fork of this template to Netlify

Deploy to Netlify


Styling works with Sass. The main index file is in src/assets/styles/main.scss. Import any SCSS code you want in there; it will be processed and optimized. The output is in dist/assets/styles/main.css


Javascript can be written in ES6 syntax. The main index file is in src/assets/scripts/main.js. It will be transpiled to ES5 with babel, bundled together with webpack, and minified in production. The output is in dist/assets/scripts/main.js

SVG Icons

All SVG files added to src/assets/icons will be bundled into a symbol sprite file. The SVG filename will then be used as the symbol identifier and the icon can be used as a shortcode.

For example, if you have a github.svg file in that folder, you can display it anywhere by using {% icon "github" %} in your templates.

Critical CSS

Currently, critical CSS will only be inlined in the head of the homepage. This is done by using the critical package in an automatic transform.


My heartfelt thanks to these people, whom I shamelessly copied ideas from: