🍵 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 customize 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

Deploy

npm run build && npx firebase deploy --only hosting

ejboettcher / gemcityML