Eleventy Starter Template

Site Demo: https://eleventy-starter-template.netlify.app

This Eleventy starter template is build with the following:

• Eleventy - Static site generator and templating
• Tailwindcss - A utility-first CSS framework
• PurgeCss - A tool to remove unused CSS
• PostCSS - For transforming CSS with Javascript
• HTMLMinifier - Javascript-based HTML minifier
• Cssnano - CSS optimisation
• Netlify - Serverless platform to deploy websites and apps

Requirements

• NodeJS
• Npm
• Netlify (optional)

Getting started

Clone the project to your local environment

git clone https://github.com/enrichdev-en/eleventy-starter-tailwindcss.git my-site

Install dependencies (development)

cd my-site
npm install

Development (Local)

To run the template locally in development mode:

npm run dev

See your site at: http://localhost:8080

_temp directory will be rendered with your development files.

Production

To build production files:

npm run prod

_site directory will contain all the optimised files.

Deployment

You can choose any methods to deploy this template.

A simple way is to deploy via Netlify with just one click. A repo will be created in your GitHub, any subsequent changes pushed to the repo will be automatically uploaded.

Basic build settings on Netlify:

Build Command: npm run build

Publish Directory: _site

Structure and Customisation

Content, assets, templates and layouts are stored in the src directory.

These can be customised to your needs.

.
└── src
    ├── _includes
    │   ├── layout.njk          # Templates
    │   ├── post-layout.njk
    │   └── partials            # Template partials
    │       ├── _footer.html
    │       ├── _head.njk
    │       └── _header.html
    ├── assets
    ├── css
    │   └── tailwind.css        # Tailwind directive injection
    ├── posts
    │   ├── blog-1              # Individual post
    │   ├── blog-2
    │   ...
    │   └── posts.json          # posts directory data file
    ├── index.html              # Main pages
    ├── about.html              
    ├── blog.html
    ├── collections.html
    └── contact.html

Configuration files:

• eleventy.js
• postcss.config.js
• tailwind.config.js
• _data/projEnv.js

Other libraries

• AOS - Animate on scroll library (CDN)
• rimraf - The UNIX command rm -rf for node
• npm-run-all - A CLI tool to run multiple npm-scripts in parallel or sequential

Made by Eric @ Enrichdev