liqunnan.com Technical Publishing Site
A multi-route English technical publication rebuilt from standalone HTML templates into a maintainable Astro content system.
Overview
The original project consisted of five independent HTML templates with duplicated navigation, styles, metadata, and placeholder links. The goal was to preserve their dark Bento visual language while turning them into a maintainable technical publication.
Challenge
Standalone pages made global changes expensive and left several navigation destinations—News, Projects, and Prompts—without corresponding pages. Content was embedded directly in HTML, which made publishing and internal linking difficult.
Approach
The site was rebuilt around shared Astro layouts and components. Notes, news briefs, projects, and prompts use typed content collections, while tools and site-wide settings live in reusable data modules.
The original three-screen homepage structure was retained:
- AI News and Breaking Intelligence
- Technical Notes and Tools
- Projects and About
Implementation
- Shared sticky navigation, footer, metadata, theme, and design tokens
- Markdown-based Notes, News, Projects, and Prompts
- Static detail routes for Notes and Projects
- Responsive Bento layouts without a client framework
- RSS, sitemap, robots.txt, canonical URLs, and structured article metadata
- Redirect compatibility for the original
/promptroute
Result
The project now builds fourteen static pages from one coherent source structure. Content can be published by adding Markdown, and shared interface changes apply across the entire site.
Lessons Learned
Preserving a template’s recognizable composition does not require preserving duplicated implementation. Separating content, shared layout, and page-specific presentation made the site easier to extend without losing its original character.