Skip to content
A skeleton boilerplate built with Eleventy.
Branch: master
Clone or download
Latest commit e63a120 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
filters
images
javascript
resources
site fixed sitemap.xml Mar 10, 2019
.gitignore Added git ignore Feb 11, 2019
README.md
eleventy.config.js Added sitemap.xml Mar 10, 2019
gulpfile.js
package.json
robots.txt
tailwind.config.js Added project files Feb 11, 2019

README.md

Netlify Status

Skeleventy

A skeleton boilerplate built with Eleventy and TailwindCSS. Check out Skeleventy!

Optional Gulp 4 upgrade - see this branch.

Features

  • Build sites faster, with the power of Eleventy, TailwindCSS and SCSS
  • Gulp build pipeline to watch, concatenate and compile styles and scripts
  • HTML minifier
  • Purgecss for removing unused CSS
  • ES6 support with Babel
  • SEO friendly pages (including open graph and twitter meta)
  • A simple, elegant blog

Requirements

Node >= v8.9.0

Installation

npm install

cd into your project folder and type the npm run dev command into terminal, to start the development server and Gulp. Eleventy has baked in hot reloading and will files for changes.

For those of you on Windows, see Daniel Schildt's potential fix for the environment helper.

Folder Structure

The site folder contains all the templates, pages and content, which Eleventy will watch and parse into HTML for us.

Within this, lives a globals folder, where you'll find a site.json file - for general site config stuff e.g name, author, email, social media...etc.

A navigation.json, which we loop over in the template, to generate our nav and a helpers.js which just contains a simple environment helper.

Uncompiled SCSS and JS reside in the resources folder - Gulp will be watching these folders for any changes (you should restart the server when creating new partials).

When in development mode, Skeleventy will use main.css as the stylesheet. This will be pretty chunky in filesize, due to it containing all of Tailwind's utility classes. Once you run the build command ready for deployment, Skeleventy will then reference the minified version of the stylesheet main.min.css.

Purge will also run via the build command and will cross reference all of Tailwind's utility classes with your templates/HTML and will remove all the unused ones - pretty cool right?

Ready to deploy?

Type the npm run build command to minify scripts, styles and run Purgecss.

Feel free to adapt this as you wish! Go build some cool stuff and put it on Netlify - seriously it's the future!

You can’t perform that action at this time.