Started:
Linked Sustainable Development Goals
- Goal 11 Sustainable Cities and Communities
- Goal 12 Responsible Consumption and Production
- Goal 13 Climate Action
- Goal 17 Partnerships for the Goals
About this project
This website is an ongoing project to provide a simple, accessible and useful online home for Sustainable Witchford.
The site is intended to help residents find information about local groups, events, projects, resources and ways to take part in practical sustainability activity around the village.
Why it matters
Local action is easier when information is easy to find. A shared website can help connect people who are already working on related issues, reduce duplication, and make it easier for new ideas to find support.
The website also provides a place to explain what sustainability means in a local context, including links to the United Nations Sustainable Development Goals.
Current work
Current work includes:
- maintaining accessible, plain-language pages
- listing local groups and useful contacts
- publishing events in a calendar format
- sharing logo competition information and submitted entries
- developing project and resource sections
- keeping privacy and accessibility information up to date
- testing the site for accessibility, performance and broken links
Status
This is an ongoing project. The website is expected to grow as more groups, events, resources and practical projects are added.
Technical description
The Sustainable Witchford website is a small static community website built to provide clear information about local sustainability activity in Witchford. It is intended to remain lightweight, fast, accessible and easy to maintain.
Static site generation
The site is built with 11ty, also known as Eleventy. Pages are written using a mixture of Markdown, HTML and Nunjucks templates, then compiled into static HTML files for hosting.
This approach keeps the public website simple. There is no database, user account system or server-side application code required for ordinary page views. Content such as groups, events and projects can be managed through structured data files and reusable templates.
Web Awesome
The site uses Web Awesome components for layout and selected interface elements. Web Awesome is used because it is based on native Web Components, allowing components to be used directly in HTML without adopting a larger front-end framework.
The current implementation uses Web Awesome for the page layout, buttons, cards, icons and expandable details sections. Components are imported into a local JavaScript entry point and bundled into a site-specific asset, so only the components needed by the site are loaded.
Calendar
Events are displayed using FullCalendar. The calendar is loaded only on the events page, rather than across the whole site, so that pages without calendar functionality do not download unnecessary JavaScript.
Event information is stored as structured JSON data. The same data can be used to render the interactive calendar and a standard HTML list of upcoming events.
Content and structured data
Site content is split between ordinary pages and structured data files. Pages such as About, Accessibility, Privacy and Logo Competition are written directly as content pages. Repeating content such as community groups, events and projects is stored as data and rendered through templates.
This makes the site easier to extend. New groups, events and projects can be added without redesigning the page layout each time.
Performance and caching
The public site is designed to perform well as a static website. CSS and JavaScript are bundled locally, cache-busting is handled with an asset version value, and static assets can be served with long cache lifetimes.
FullCalendar is deliberately kept out of the global site bundle so that it does not affect the performance of simpler content pages.
Accessibility and testing
Accessibility is treated as part of the build and testing process. The site includes automated checks for page structure, headings, landmarks, alternative text, link text, labelled controls and automatically detectable accessibility issues.
Browser-based tests are also used to check interactive behaviour, including mobile navigation, skip links, gallery links, group search and the events calendar. The site has also been checked with Lighthouse and axe DevTools.
Hosting
The website is hosted as a static site on Mythic Beasts hosting. The deployed site consists of generated HTML, CSS, JavaScript, images and supporting files such as the web app manifest, robots file and sitemap.
Development principles
- Keep the site static unless a dynamic feature is genuinely needed.
- Load page-specific JavaScript only on pages that need it.
- Use structured data for repeating content such as events and projects.
- Prefer plain HTML, Markdown and Web Components over heavy frameworks.
- Keep accessibility, performance and maintainability visible throughout development.