🍵 The TEAtime Starter Project

This Medium story is a complete guide on how to build and host the low-code website you’ve always wanted, for free, in a day

The story covers the original 2022 stack; this repo has since been modernised to Eleventy 3, Tailwind CSS 4 and Node 24 — the concepts in the story still apply, but some configuration details differ

Demo

https://teatime-starter.netlify.app

Deploy your own

Netlify

If you have a Netlify account and are logged in, you can deploy this site in under a minute:

Firebase Hosting

The project also ships ready for Firebase Hosting: set your project id in .firebaserc, sign in once with npx firebase-tools login, then:

npm run deploy

Ingredients

• Tailwind CSS v4, including CSS-first configuration and optimisation ('vanilla' CSS is also demonstrated)
• Eleventy, including plugins, filters and shortcodes
• Alpine.js, including basic animation with CSS ('vanilla' JS is also demonstrated)
• Nunjucks templates
• Markdown, including custom attributes
• Custom 404 'Page not found' page
• AI-agent friendly: conventions and commands are documented in AGENTS.md (picked up by Codex and most coding agents, and by Claude Code via CLAUDE.md)
• Basic SEO:
  • HTML tags with Front Matter
  • Google Analytics and Facebook Pixel integration
  • Performance optimisation with postcss, Lightning CSS (built into Tailwind v4) and html-minifier-terser
  • Image optimisation with the Eleventy Image Plugin
  • Dynamic sitemap.xml and robots.txt

Project structure

├── eleventy.config.js     # Eleventy config: plugins, shortcodes, transforms
├── netlify.toml           # Netlify build settings (Node version, publish dir)
├── firebase.json          # Firebase Hosting settings
└── src/
    ├── _data/             # Global data: site.json (site metadata), env.js (URLs, tracking ids)
    ├── _includes/         # Partials: navbar, footer, head, js, page content
    │   └── css/_page.css  # Tailwind entry: @theme block with colours & hero images
    ├── _layouts/          # base.njk and page.njk layouts
    ├── css/page.11ty.js   # Compiles the CSS with PostCSS + Tailwind at build time
    ├── static/            # Copied verbatim to the site root (images, favicons)
    └── *.njk / *.md       # Pages: index, credits, 404, sitemap, robots

The build output goes to public/ (git-ignored — never edit it directly).

Getting started

Install Node.js

Use nvm or nvm-windows to install the latest LTS version of Node.js, npm and npx (Node.js 22 or newer is required): https://docs.npmjs.com/downloading-and-installing-node-js-and-npm

Clone the repository

git clone https://github.com/alanmosely/teatime-starter.git

Install the dependencies

npm i

Optionally customise the site

Configure your domain name, website name, social media links, facebook pixel and more in the env.js and site.json files in the src/_data directory

Theme colours and the hero background images are defined in the @theme block in src/_includes/css/_page.css (Tailwind CSS v4 CSS-first configuration)

Run the website locally

npm run start

Browse the local website

Open http://localhost:8080 in a browser of your choice

Scripts

Command	What it does
npm start	Serve the site locally with live reload (dev URLs)
npm run build	Clean and build with dev URLs
npm run build:prod	Build with production URLs (used by Netlify)
npm run clean	Delete the public output directory
npm run deploy	Build for production and deploy to Firebase Hosting

License

MIT