seb49/teatime-starter

An Eleventy starter project using Tailwind CSS and Alpine.js that deploys to Netlify

🍵 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

Demo

https://teatime-starter.netlify.app

Deploy your own

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

Ingredients

• Tailwind CSS, including 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
• Basic SEO:
  • HTML tags with Front Matter
  • Google Analytics and Facebook Pixel integration
  • Performance optimisation with postcss, cssnano and html-minifier
  • Image optimisation with the Eleventy Image Plugin
  • Dynamic sitemap.xml and robots.txt

Getting started

Install Node.js

Use nvm or nvm-windows to install the latest version of Node.js, npm and npx: 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

Run the website locally

npm run start

Browse the local website

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