How I Create Static Websites for Tiny Archives
Use hand‑written HTML with JavaScript templates and JSON data to build lightweight static sites.
Create a demo site using the described approach to validate the workflow.
Summary
The author explains that static websites are an effective way to store and describe small digital archives, offering long‑term readability and flexibility. The approach starts with a hand‑written HTML page that lists bookmarks, then introduces JavaScript template literals to render each bookmark from a JSON metadata array. Filtering is implemented by adding keyword tags to the data model and using URL query parameters to drive the filter logic, while sorting and pagination are added to manage longer lists. Loading states and error handling are provided with simple CSS and JavaScript, and the code is tested with QUnit and Playwright.
The author encourages developers to store the site code in Git and to keep the site lightweight by avoiding heavy frameworks. The demo site demonstrates all the features, including filtering, sorting, pagination, and feedback states, and the author invites readers to explore the full code. The approach is described as a series of small, digestible snippets that can be assembled into a complete static site. By using hand‑written HTML, JSON metadata, and vanilla JavaScript, the author achieves a future‑proof, portable archive that can be updated manually or with scripts.
Key changes
- Start with a hand‑written HTML page that lists bookmarks.
- Use JavaScript template literals to render each bookmark from a JSON metadata array.
- Add filtering via keyword tags and URL query parameters.
- Implement sorting and pagination for longer lists.
- Provide loading states and error handling with CSS and JavaScript.
- Test the code with QUnit and Playwright.
- Store the site code in Git for version control.
- Keep the site lightweight by avoiding heavy frameworks.