Getting Started

Get up and running with the Static Site Spec in 5 minutes.

On this page

Quick Start

Create a new project following the Static Site Spec:

# Create project directory
mkdir my-site && cd my-site

# Initialize with npm
npm init -y

# Install dependencies
npm install @11ty/eleventy @hotwired/stimulus tailwindcss @tailwindcss/postcss postcss cssnano

Project Structure

Create the following directory structure:

my-site/
├── src/
│   ├── _data/
│   ├── _includes/
│   │   ├── layouts/
│   │   └── partials/
│   ├── assets/
│   │   ├── css/
│   │   ├── js/
│   │   └── images/
│   └── index.njk
├── eleventy.config.js
└── package.json

Configuration

Set up your eleventy.config.js with CSS processing via PostCSS:

import postcss from "postcss";
import tailwindcss from "@tailwindcss/postcss";

export default function (eleventyConfig) {
  // CSS processing happens in eleventy.before hook
  // See Files > Config for full example

  return {
    dir: {
      input: "src",
      output: "dist",
    },
  };
}

Run Development Server

npm run dev

Your site will be available at http://localhost:8080.

Next Steps