The Journey: Migrating my Website to Astro and GitHub Pages Maintaining a

personal website is always an evolving project. Recently, I decided to take a big leap: moving away from my old setup and migrating everything to Astro. Why Astro? Because it's incredibly fast, delivers almost zero JavaScript by default, and has a fantastic developer experience. But as with any migration, there were some hurdles to clear—specifically around hosting, domains, and automation. Here’s the story of how I did it. ## The Goal: Clean Domain, Modern Tech Initially, I was playing around with Cloudflare Workers/Pages, but it gave me a very long and hard-to-remember domain: astro-personal-website.yudiyuswita.workers.dev. I wanted my clean yuswitayudi.github.io domain back. However, I didn't want to lose the modern features of Astro or the ease of the Keystatic CMS I had just set up. ## Step 1: Solving the Build Logic Astro is great because it can be both a Server-Side Rendered (SSR) app and a Static Site Generator (SSG). To host on GitHub Pages for free, I had to switch to Static Mode. I updated my astro.config.mjs to remove the Cloudflare adapter and set output: 'static'. This meant that instead of a running server, Astro would now just spit out a folder of pure HTML files during the build. ## Step 2: Automation with GitHub Actions I wanted a "push once, deploy everywhere" workflow. I set up a GitHub Action to do the heavy lifting. Now, every time I push to my source repository:

1. It wakes up a virtual machine in GitHub. 2. It installs all my dependencies.
2. It builds the entire site. 4. It pushes the final files over to my yuswitayudi.github.io repository. Setting up the Deploy Keys was the trickiest part, but it allowed my two repositories to talk to each other securely without me having to manually copy files. ## Step 3: Improving the UX (Dark Mode & SEO) While I was at it, I couldn't resist adding some "pro" features. - Dark Mode: I implemented a sleek toggle using Tailwind CSS and some client-side logic to remember user preferences. - SEO: I added a robots.txt to help search engines index the site correctly. - Drafts: I added a "Draft" feature in Keystatic so I can write half-finished posts without them showing up on the live site immediately. ## The Result Now, I have the best of both worlds: 1. Modern Stack: Astro + Keystatic + Tailwind. 2. Clean Domain: Back to my heritage on GitHub Pages. 3. Zero Maintenance: I just write, save, and 2 minutes later, the site is updated. This migration wasn't just about changing a framework; it was about building a more sustainable and professional home for my thoughts on tech and operations. Stay tuned for more posts!