alexclapperton.co.uk

This site is built with Eleventy and Netlify using the following stack:

• Nunjucks (Template language used in Eleventy)
• Contenful (Headless CMS)
• Tailwind CSS (Utility-first CSS framework)
• TypeScript
• Webpack (Module bundler)

Developing locally

Install dependencies

npm install

Run the site locally

Use the Netlify CLI to inject environment variables stored against the Netlify site — no local .env file needed!

netlify dev

Required environment variables

• CONTENTFUL_ACCESS_TOKEN
• CONTENTFUL_ENVIRONMENT
• CONTENTFUL_SPACE_ID
• FAUNADB_ADMIN_SECRET
• FAUNADB_SERVER_SECRET
• GCM_API_KEY
• VAPID_PRIVATE_KEY
• VAPID_PUBLIC_KEY

Commands

Development

• npm run webpack:dev: Compiles Tailwind CSS and Typescript in development mode and listens for changes to CSS and TypeScript files
• npm run eleventy:dev: Spins up local environment of eleventy and listens for changes to Nunjucks files and other assets
• npm run dev: Concurrently runs webpack:dev and eleventy:dev to spin up local environment
• netlify dev: Spins up local Netlify dev environment to allow the use of Netlify features. Netlify CLI is needed to run this command.

Production

• npm run webpack:prod: Compiles Tailwind CSS and Typescript ready for production
• npm run eleventy:prod: Compiles Nunjucks files ready for production
• npm run build: Command used in Netlify to run webpack:prod and eleventy:prod

Latest articles

• How to build an accessible accordion with and without JavaScript
• A brief introduction on using CSS Grid
• The digital industry: A developers perspective
• Performance and optimisation: Getting your website up to speed
• Working with Grid: The holy grail of CSS layout