Set Up a Simple and Reliable Static Site Generator Using 11ty (Eleventy) + Tailwind CSS

1. Install NodeJS

https://nodejs.org/en/download

2. Install Git

https://git-scm.com/downloads

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/eleventy

6. Verify Eleventy Runs

npx @11ty/eleventy

7. 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:

  1. a CSS input file
  2. 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

  1. 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)
  2. 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-dev

12. 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

https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

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

  1. create a new repo in GitHub (mine is called eleventy-tailwind)
  2. push your files to GitHub
git remote add origin git@github.com:javanigus/eleventy-tailwind.git
git branch -M main
git push -u origin main

20. 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.