A public, free to host website presenting the CE4CSID Working Group's practical resources and guidelines for integrating community engagement into Climate Sensitive Infectious Disease (CSID) research. Built for the Botswana Society for Human Development (BSHD) and hosted on GitHub Pages.
Live site: https://sunji-droid.github.io/ce4csid-toolkit/
This build corresponds to Option B (Toolkit Website) from the project quotation: a branded GitHub Pages website with full navigation, downloadable resources and templates, a community engagement planning checklist tool, and thirty days of post launch support.
CE4CSID research is often conducted at a high scientific level without including the communities affected by it. This toolkit makes practical, plain language guidance publicly available so that researchers can plan and run genuine community engagement from the earliest stages of a project.
The site is a static website. There is no server, no database, and no ongoing hosting cost. Everything runs on GitHub Pages.
- Researchers designing and running CSID studies
- Programme implementers turning findings into interventions or tools
- Policy makers shaping CSID related policy
- BSHD staff maintaining and updating the toolkit content over time
ce4csid-toolkit/
├── index.html Home page
├── about.html About CE4CSID and the toolkit
├── resources.html Toolkit Resources, grouped by category
├── downloads.html Flat list of every downloadable file
├── checklist.html Interactive Community Engagement Checklist
├── contact.html Contact page with form and direct details
├── 404.html Custom not found page for GitHub Pages
├── assets/
│ ├── css/
│ │ └── style.css Full design system and page styles
│ ├── js/
│ │ ├── main.js Shared behaviour: mobile nav, active link, toast
│ │ ├── checklist.js Checklist tool logic and data
│ │ └── contact.js Contact form submission handling
│ └── images/
│ ├── logo.svg Header and footer brand mark
│ └── favicon.svg Browser tab icon
├── downloads/ All downloadable resource and template files
│ ├── planning-guidance-community-entry-protocol.pdf
│ ├── planning-guidance-engaging-from-design.pdf
│ ├── framework-stakeholder-mapping.pdf
│ ├── framework-engagement-channel-selection.pdf
│ ├── case-example-flood-response.pdf
│ ├── case-example-vector-control.pdf
│ ├── template-engagement-plan.docx
│ └── template-consent-briefing-note.docx
├── README.md This file
├── CONTRIBUTING.md Plain language guide for non technical updates
├── LICENSE MIT License
└── .gitignore
The site is built with plain HTML, CSS, and JavaScript rather than a static site generator such as Jekyll. With six page templates and no need for a blog style content collection, plain HTML keeps the project simple to read, edit, and deploy without a build step, while still working natively with GitHub Pages.
No build step or installation is required. From the project folder, run any simple local server, for example:
python3 -m http.server 8000
Then open http://localhost:8000 in a browser. Alternatively, open index.html directly in a browser, though a local server is recommended so that relative paths behave the same way they will on GitHub Pages.
- Push this repository to GitHub under the account
sunji-droid, asce4csid-toolkit. - In the repository settings, open the Pages section.
- Under Build and deployment, set Source to "Deploy from a branch".
- Set Branch to
mainand folder to/ (root). - Save. GitHub will publish the site at
https://sunji-droid.github.io/ce4csid-toolkit/, usually within a minute or two. - Any future push to
mainredeploys the site automatically. No manual rebuild step is needed, since the site is plain HTML, CSS, and JavaScript.
- Add the new file to the
downloads/folder. Use a clear, lowercase, hyphenated filename that describes the resource, matching the existing naming pattern. - Open
resources.htmland find the relevant category section (Planning Guidance, Engagement Frameworks, Case Examples, or Templates). - Copy an existing
.resource-itemblock within that category and update the title, description, file type badge, file size, and thehrefon the download link to point to the new file. - Open
downloads.htmland add a matching row to the table with the same title, category, file type, and size, and the same download link. - Update the resource count shown next to the category heading in
resources.htmlif the number of items in that category has changed. - Commit and push. The new resource will appear once GitHub Pages redeploys.
For non technical staff, see CONTRIBUTING.md for the same process explained without code terminology.
All checklist content lives in one place: the STAGES array near the top of assets/js/checklist.js. Each stage has an id, title, description, and a list of items. Each item has an id, label, and desc.
To add a new action to an existing stage, add a new object to that stage's items array with a unique id. To add a new stage entirely, add a new object to the STAGES array following the same structure. The interface, progress tracking, saving, and print export all work automatically from this data, so no other file needs to change.
Item id values are used as the storage key for that item's checked state and notes, so avoid renaming or reusing an id once the toolkit is live, since this would appear to reset that item's saved progress for returning visitors.
The contact form on contact.html is wired to submit through JavaScript in assets/js/contact.js, using a service called Formspree, since GitHub Pages cannot process form submissions on its own.
- Create a free account at https://formspree.io using the BSHD contact email.
- Create a new form and copy the form endpoint it provides, in the form
https://formspree.io/f/xxxxxxxx. - Open
assets/js/contact.jsand replace the placeholder value ofFORM_ENDPOINTnear the top of the file with that real endpoint. - Commit and push. The form will now deliver submissions to the connected email address.
Until this step is completed, the form will show a message explaining that it is not yet connected, rather than failing silently.
Any other form handling service that accepts a standard POST request with form data and returns a success response can be used in place of Formspree, by updating the same FORM_ENDPOINT value and confirming the response handling in contact.js matches that service's response format.
The toolkit content currently hosted in downloads/ was generated as clearly labelled placeholder material for the initial launch of the website, since final toolkit content had not yet been supplied by BSHD at the time of this build. Every placeholder file states this clearly on its first page.
To replace a placeholder with final content, keep the same filename so that existing links on resources.html and downloads.html continue to work, or follow the update process in Section 6 above if the filename changes.
- Every page has a descriptive title and meta description
- A skip to content link is present on every page
- Headings follow a logical order on each page
- The mobile navigation menu is fully keyboard operable
- Colour choices meet accessible contrast levels for body text and buttons
- A favicon is included site wide
This build includes thirty days of post launch support from the date of deployment, covering:
- Minor content updates, such as new resources, edited text, or new checklist items
- Small bug fixes, such as broken links or layout issues on specific devices
- Minor styling adjustments requested by BSHD
Built by Kabo Merapelo Onamile, Digital Health Developer, for the Botswana Society for Human Development (BSHD) and the CE4CSID Working Group.