Teatime Starter

The Teatime Starter is a low-code website starter project that combines the Eleventy static site generator, Tailwind CSS, and Alpine.js, and is set up to deploy to Netlify with one click. It is a free, open-source GitHub repository documented in a Medium guide that walks through building and hosting a website in a single day.

What is the Teatime Starter?

The Teatime Starter is a static website template that uses Eleventy (11ty) as its site generator, Tailwind CSS for styling, and Alpine.js for interactivity. It takes Markdown content and Nunjucks templates as input, and outputs a complete static site with a custom 404 page, dynamic sitemap.xml and robots.txt, and SEO meta tags. The project is maintained by alanmosely on GitHub and can be launched on Netlify in under a minute through its Deploy to Netlify button.

Key Features

• One-click Netlify deploy — The repository includes a Deploy to Netlify button that spins up a live site immediately when you are logged into a Netlify account.
• Tailwind CSS and vanilla CSS — The starter comes with Tailwind configured and optimized, while also demonstrating plain CSS for comparison.
• Alpine.js with CSS animations — Alpine.js is included for basic interactivity and animation, alongside vanilla JavaScript examples.
• Eleventy plugins and shortcodes — The 11ty configuration includes plugins, filters, and shortcodes ready to use.
• Markdown with custom attributes — Content is authored in Markdown, with support for custom attributes via the markdown-it library.
• SEO essentials — Front Matter drives HTML meta tags; Google Analytics and Facebook Pixel snippets are wired in; a dynamic sitemap and robots.txt are generated.
• Performance tooling — postcss, cssnano, and html-minifier compress CSS and HTML; the Eleventy Image Plugin handles image optimization.
• Centralized configuration — Edit env.js and site.json inside src/_data to set your domain, site name, social URLs, and Facebook Pixel.

Who is it for?

• Developers who want a fast start — Instead of configuring Eleventy, Tailwind, and Alpine from scratch, they can clone and run a working setup.
• Low-code builders — The Medium guide emphasizes building a website without writing extensive code, appealing to those who prefer configuration over programming.
• Content writers — Anyone who wants to publish Markdown-based content on a static site that is SEO-optimized and deployable to Netlify.

What can you do with the Teatime Starter?

• Launch a personal blog — Write posts in Markdown, customize the site data files, and deploy to Netlify for a fast static blog.
• Create a business or portfolio site — Use Tailwind to style sections and Alpine for interactive components like mobile menus.
• Learn the JAMstack workflow — The project intentionally mixes vanilla CSS/JS with Tailwind/Alpine and documents the build process, making it a practical learning resource.

How does the Teatime Starter work?

After cloning the repository and running npm install, you can start a local server with npm run start and preview the site at http://localhost:8080. Configuration lives in env.js and site.json under src/_data; content is added as Markdown files. Deploying to Netlify is a click of the deploy button, which connects the repo and builds automatically.

FAQ

Is the Teatime Starter free?

Yes, the project is open source on GitHub under no stated license restriction visible in the README, and the Medium guide describes the process as building and hosting a website for free.

What static site generator does the Teatime Starter use?

It uses Eleventy (11ty) as the site generator, with Nunjucks as the templating engine and Markdown for content. The README lists Eleventy plugins, filters, and shortcodes among its included ingredients.

Do I need a Netlify account to use this starter?

The one-click Deploy to Netlify button requires you to be logged in to Netlify. If you don't have an account, you can still clone the repo and run the site locally with Node.js.