This project is a static website generator using 11ty (Eleventy) with Tailwind CSS integration, live reload functionality, and easy deployment to Netlify.
-
Create a new directory and initialize a Node.js project:
mkdir my-11ty-project cd my-11ty-project npm init -y -
Install 11ty, Tailwind CSS, and other necessary dependencies:
npm install @11ty/eleventy tailwindcss postcss autoprefixer cross-env npm-run-all
-
Create an 11ty configuration file (
.eleventy.js) in the root of your project:module.exports = function(eleventyConfig) { // Copy the `css` directory to the output eleventyConfig.addPassthroughCopy("css"); return { dir: { input: "src", output: "public" } }; };
-
Set up Tailwind CSS:
Create a
tailwind.config.jsfile in the root of your project:module.exports = { content: ["./src/**/*.{html,js,njk,md}"], theme: { extend: {}, }, plugins: [], }
Create a
postcss.config.jsfile:module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ] }
-
Create a main CSS file (e.g.,
src/css/styles.css):@tailwind base; @tailwind components; @tailwind utilities;
-
Update your
package.jsonwith scripts for development and build:"scripts": { "watch:eleventy": "eleventy --serve", "watch:tailwind": "tailwindcss -i src/css/styles.css -o public/css/styles.css --watch", "build:eleventy": "eleventy", "build:tailwind": "tailwindcss -i src/css/styles.css -o public/css/styles.css --minify", "start": "npm-run-all --parallel watch:*", "build": "npm-run-all build:*" }
-
Create a sample page (e.g.,
src/index.html):<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My 11ty Project</title> <link rel="stylesheet" href="/css/styles.css"> </head> <body class="bg-gray-100"> <h1 class="text-3xl font-bold text-center mt-8">Welcome to My 11ty Project</h1> </body> </html>
-
Initialize Git repository and create a
.gitignorefile:git init
Create a
.gitignorefile with the following content:node_modules public -
Install Netlify CLI:
npm install -g netlify-cli
-
To start development:
npm start
This will start the 11ty server and watch for changes in your Tailwind CSS file.
-
To build your project for production:
npm run build
- Commit your changes to Git
- Push to a GitHub repository
- Connect your GitHub repository to Netlify
- Configure Netlify to use the
npm run buildcommand and set the publish directory topublic
Alternatively, you can use the Netlify CLI for manual deployments:
netlify deploymy-11ty-project/
├── src/
│ ├── css/
│ │ └── styles.css
│ └── index.html
├── .eleventy.js
├── .gitignore
├── package.json
├── postcss.config.js
└── tailwind.config.js
Feel free to modify this README to better suit your specific project needs.