Energy, urban gardening and water share one editorial architecture and navigation system.
3 toolsbrowser-local execution
Diagnostics and calculators run directly in the browser without a dedicated backend.
Astrostatic architecture
Static HTML, optimised assets, technical SEO and responsive Hostinger delivery.
Summary
Mi Casa Autosuficiente brings practical resources on energy, urban gardening and water into a fast, maintainable Astro architecture. The site combines guides, comparisons, RSS and three first-party tools that run directly in the browser.
Objective
Build a fast, maintainable editorial foundation that makes useful content and practical tools easy to reach without adding technical friction.
Context
Organise a broad self-sufficiency editorial archive so guides, comparisons and tools remain easy to find through clear, fast navigation across mobile and desktop.
Implementation
The site structures energy, urban gardening and water into connected editorial hubs, adds RSS, article and guide sharing controls and three browser-local tools, and uses Astro to generate static HTML with optimised assets, SEO metadata and reusable components.
Objectives
Organise energy, urban gardening and water under one editorial architecture.
Connect guides, comparisons, RSS and three first-party tools within the same navigation.
Keep a responsive experience with clear hierarchy, visible focus and consistent components.
Prioritise static HTML, optimised assets and technical SEO in every release.
Current status
Three topic areas connected through one editorial navigation system.
Three interactive tools running directly in the browser.
Articles and guides can be shared through Web Share, WhatsApp, LinkedIn, Facebook or link copy, without social SDKs.
Static Astro architecture with optimised assets and integrated SEO metadata.
Responsive Hostinger publishing with route checks and HTTPS smoke verification.
Work delivered
01
Editorial system
Energy, urban-garden and water hubs, related resources, comparisons, RSS, sharing controls and shared navigation keep the content connected.
02
First-party tools
A starting-point diagnostic plus energy and rainfall calculators run in the browser without a dedicated backend.
03
Performance and accessibility
Static HTML, optimised assets, responsive layouts, visible focus and content hierarchy designed for clear reading and navigation.
04
Astro architecture
Reusable components, canonical metadata, sitemap, JSON-LD and static Hostinger delivery with HTTPS verification.
Technical details
Technical details
Process
01Editorial architecture
02Astro system
03Browser-local tools
04QA and publishing
Stack
Frontend
AstroTypeScriptHTMLCSSJavaScript
Integrations
Editorial resourcesThree browser-local toolsArticle and guide sharingRSSCanonical, sitemap and JSON-LDAsset optimisationResponsive navigation
Infrastructure
HostingerStatic Astro in productionAutomated exportPost-publish HTTPS smoke
