Eleventy (11ty), Tailwindcss and Netlify

Published on: 18 Apr 2023

When the idea first popped into my head to spin up my own blog site my initial thought was to use a CMS platform like WordPress or TYPO3 however I was also aware that those solutions were a bit overkill for my little old blog. All I need is a simple home page, a collection of blog posts and the possibility to add additional pages further down the line (about, contact, portfolio, etc.).

After a bit of Googling and chats with other fellow developers, I decided to opt for the popular modern web static site generator 11ty.

11ty allows you to quickly build fast loading lightweight websites. It doesn't come with it's own templating language but instead allows you to work with multiple well-known ones, you can see more about these here.

Again, in the interest of speed and due to not needing a bespoke design, I chose to integrate the Tailwindcss css framework. This allows devs to build a modern and responsive interface purely using css classes.

The final piece of the puzzle is deployment and hosting. Netlify integrates seamlessly with 11ty and allows for continuous integration from Github.

Okay, enough of the back story. Let's jump into the setup!

11ty

First things first is to get 11ty installed and running. The steps needed are:

1 - Create a project folder
2 - Initalise a blank project.json file
3 - Install 11ty via npm
4 - Create an index.html file
5 - Run 11ty to generate the site

11ty have a really good doc on how to complete the above steps so I won't bother re-writing their content, you can find it here.

You can also find a good set of instructions for setting up posts/collections in 11ty here.

Tailwindcss

Next up is to install Tailwindcss and configure it to work with 11ty. The steps to enable this differ slightly from the official Tailwindcss docs so I'll describe them below.

Install and initiate Tailwindcss

From your project folder, run the follow:

npm install tailwindcss
npx tailwindcss init

Configure the 11ty template paths to work with Tailwindcss

From your project folder, replace the contents of tailwind.config.js with:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./_site/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import the Tailwindcss directives

From your project folder, create the following file src/css/vendor/tailwind.css and add the contents of:

@tailwind base;
@tailwind components;
@tailwind utilities;

Configure the 11ty and Tailwindcss build scripts

From your project folder, update the package.json file with the following scripts object:

"scripts": {
  "build": "eleventy --serve & npx tailwindcss -i ./src/css/vendor/tailwind.css -o ./_site/css/styles.css --watch",
  "build:prod": "eleventy --serve & npx tailwindcss -i ./src/css/vendor/tailwind.css -o ./_site/css/styles.css --minify"
},

The above scripts allow us to run npm run build and npm run build:prod. Both commands take the contents of our tailwind.css file, which imports all of the Tailwindcss directives, and compiles it into the public _site directive. The former script passes a watch flag which is perfect for when you are in development and the latter passes a minify flag which optimises the css for production environments.

Use Tailwindcss in your HTML

Update your index.html file to load the public css file in the head:

<link rel="stylesheet" type="text/css" href="/css/styles.css" />

You should now be ready to use Tailwindcss classes in your html. An example is shown below:

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

Continuous deployments with Netlify

The final part of this trio is Netlify. Netlify is a service that automates the build and deployment of static websites. You can connect your site via a Git provider (e.g. Github, Gitlab, Bitbucket, etc.) to allow for continuous deployments and configure other settings such as custom domains and build commands.