1. Install NodeJS
https://nodejs.org/en/download
2. Install Git
3. Set Up a New Website Project Folder
mkdir test-website
cd test-website
4. Create a package.json file
npm init -y
5. Install Eleventy (11ty) Static Site Generator
npm install @11ty/eleventy6. Verify Eleventy Runs
npx @11ty/eleventy7. Install Tailwind and Tailwind CLI
npm install tailwindcss @tailwindcss/cli
Tailwind CSS will compile Tailwind CSS classes to CSS and Tailwind CLI will allow us to run Tailwind CSS from the command line.
https://tailwindcss.com/docs/installation/tailwind-cli
8. Create a Tailwind Config File
Create a file called tailwind.config.js in the project root and put the following started config. The “content” key tells Tailwind CSS which files to process.
export default {
theme: {
extend: {
colors: {
'primary': '#ff49db',
},
fontFamily: {
'sans': ['Helvetica', 'Arial', 'sans-serif'],
},
},
},
plugins: [],
content: ["./src/**/*.{njk,md,html}", "./src/**/*.svg",]
}9. Tailwind CSS Input and Output Files
Tailwind CSS will also process input files and output the results where we want. There are 2 Tailwind inputs:
- a CSS input file
- Tailwind CSS classes in HTML
Let’s put the Tailwind CSS input file at /src/css/tailwind-input.css and let’s have Tailwind CSS put the output file at /dist/src/tailwind-output.css.
10. Eleventy Input and Output Folders and Files
By default, Eleventy will build source files that are in the “src” folder and output them to a “_site” folder. If you want the output to go to a different folder, create an Eleventy config file and specify the output folder name there. By default, Eleventy will not copy static assets like CSS, JS and images to the output folder. Create an Eleventy config file (.eleventy.js) in the project root and add the following code to
- tell Eleventy to copy certain files to the output folder (note that we are telling Eleventy to not copy the source Tailwind CSS input file)
- tell Eleventy to put the output in a folder called “dist”
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src", {
//debug: true,
filter: [
"404.html",
"**/*.css",
"!**/*tailwind-input.css",
"**/*.js",
"**/*.json",
"!**/*.11ty.js",
"!**/*.11tydata.js",
]
});
// Copy img folder
eleventyConfig.addPassthroughCopy("src/img");
eleventyConfig.setServerPassthroughCopyBehavior("copy");
// tell 11ty which files to process and which files to copy while maintaining directory structure
// eleventyConfig.setTemplateFormats(["md","html","njk"]);
return {
dir: {
input: "src",
output: "dist",
// ⚠️ These values are both relative to your input directory.
includes: "_includes",
layouts: "_layouts",
}
}
};11. Install npm-run-all
In order to have Eleventy build static pages AND process Tailwind CSS, we need to run both Eleventy and Tailwind CSS in parallel. To do that, install npm-run-all.
npm install npm-run-all --save-dev12. Update Scripts
To run Eleventy and Tailwind CSS concurrently, let’s add some scripts. Open package.json and add the following scripts.
"start": "npm-run-all -p dev:*",
"build": "run-s build:*",
"dev:11ty": "eleventy --serve",
"dev:css": "tailwindcss -i src/css/tailwind-input.css -o dist/css/tailwind-output.css --watch --postcss",
"build:11ty": "eleventy",
"build:css": "tailwindcss -i src/css/tailwind-input.css -o dist/css/tailwind-output.css --postcss"The tailwindcss line has a reference to the input Tailwind CSS file (src/css/tailwind.css) and where the output CSS would go (dist/css/tailwind.css).
Your package.json file should look like this.
13. Create a “src” folder
The src folder will contain your source website files. Your folder structure should look like this now.
14. Create some files
Here’s an example folder structure for your website files.
The source files are all in the “src” folder. The “img” folder is where images can go and the “js” folder is where JavaScript files can go.
Tailwind CSS
In the “css” folder, there is a tailwind-input.css file. To start, just add this line to it.
@import "tailwindcss";
Non-Tailwind CSS (Optional)
The “css” folder can optionally contain non-Tailwind CSS files.
- The CSS files in a “partials” folder group CSS by component, e.g. button.css, header.csss, etc.
- The global.css file can contain CSS that applies to all pages on the site.
- The index.css file can contain CSS that applies to just one or a few pages, e.g. the home page.
In this example, there is only one page – the home page (index.html) in the document root.
15. Write Code
Here is example code for the home page. Note the way the local CSS and JS files are referenced.
Tailwind CSS will compile the input Tailwind CSS file (/src/css/tailwind-input.css) and the Tailwind CSS classes in the HTML (e.g. on lines 18 and 19 of index.html) and output it at /dist/css/tailwind-output.css. That’s why on line 12 there is a reference to the path to the Tailwind output file.
16. Run Eleventy (and Tailwind CSS)
npm start
You will see a “dist” folder get created along with the css/tailwind-output.css file.
Eleventy will launch a local web server at http://localhost:8080/. Go to that URL to view the site and verify the site looks as correct.
17. Add Git
Put the project folder in version control by running
git init
Then, create a .gitignore file in the project root and enter the names of folders you want to exclude from version control, like these folders:
node_modules
dist
.cache
Add and commit all files to version control
git add *
git commit -m "first commit"18. Set Up SSH Keys to Publish to GitHub
If you are on Windows, use Git Bash, which by default is located at C:\Program Files\Git\git-bash.exe.
19. Push Files to GitHub
- create a new repo in GitHub (mine is called eleventy-tailwind)
- push your files to GitHub
git remote add origin git@github.com:javanigus/eleventy-tailwind.git
git branch -M main
git push -u origin main20. Publish to GitHub Pages
To publish your static site to GitHub Pages, install gh-pages.
npm install gh-pages –save-dev
Update package.json to include
"deploy": "gh-pages -d dist"
Deploy by running
npm run deploy
Your site will be live at https://<username>.github.io/<repository>/.
Optional
Add PostCSS, Autoprefixer, and other PostCSS plugins to further optimize your build output.
