DEV Community
Follow
The Build Log: Rebuilding My Blog on Astro, Cloudflare Pages & Umami
The author rebuilt their personal website using Astro, focusing on specific principles. These include maintaining SEO, owning all assets, minimizing JavaScript, and ensuring privacy and freedom from vendor lock-in. Posts are managed as Markdown files within a Git repository, with slugs preserved to match old URLs for SEO continuity. The migration process involved a script to import posts, strip unwanted content, download images locally, and optimize them.
SEO was a critical concern, addressed by implementing canonical URLs and 301 redirects for old blog paths to the main domain. This consolidated ranking signals onto a single host. A persistent bug occurred due to a lingering Gatsby service worker that served cached content. The solution was a new "kill-switch" service worker to unregister the old one and force a refresh to the live site.
Search functionality was implemented client-side using a static JSON index, avoiding the need for a backend server. A minor issue with Astro's scoped styles was resolved by adjusting CSS placement for dynamically generated elements. Mermaid diagrams are rendered explicitly client-side after an asynchronous import to ensure they load correctly. A click-to-zoom feature was added for better readability of diagrams.
Tag hygiene was addressed by consolidating single-use and duplicate tags into canonical ones, with pages having fewer than two posts marked for noindexing. Cookieless analytics were implemented using Umami, with a first-party proxy via Cloudflare Pages Functions to bypass ad blockers. Event tracking for link clicks was added to Umami.
Astro's View Transitions require scripts to be re-initialized on each navigation, as `transition:persist` does not preserve script-attached listeners. Finally, Cloudflare's Rocket Loader was identified as the cause of site breakage in Safari and was disabled.
