Pugsum: A 11ty starter kit using Pug Templates and TailwindCSS

Demo

Features:

• 11ty for templates and site generation
• TailwindCSS for a utility first CSS workflow
• PurgeCSS for optimizing CSS output
• PostCSS for processing Tailwind
• Sass/SCSS for leveraging other vendor stylesheets with Tailwind
• Webpack for optimizing our JS and CSS files
• Webpack-dev-server for HMR and live-reload
• Babel for ES6 support
• HTML minifier to minify production HTML

Disclaimers

This is a starter project to demostrate how you can use Pug templates with 11ty. Not all 11ty features are supported on Pug templates, please read the 11ty docs to see what features are included.

Prerequisites

• Node and NPM

Running locally

# install the project dependencies
npm install

# run the build and server locally
npm start

View the site at http://localhost:3000/

Previewing the production build

When building for production, an extra build step will strip out all CSS classes not used in the site. This step is not performed during the automatic rebuilds which take place during dev.

# run the production build
npm run build
npm run serve

Other Scripts

# check to see latest packages
npm run update-check

# update all to latest
npm run update

# run npm audit and add risky dependencies in resolutions
npm run preinstall