I Also Fell Down the Rabbit Hole: Building a Fully Automated Astro Blog Pipeline with VSCode, GitLab, Amplify and CloudFront.

I’ll be honest: I’m new to this whole blogging thing, but if there’s one universal truth about tech blogs, it’s that the first post is always about the stack behind it. So here’s mine. Don’t worry, I’ll spare you a 20-page deep dive. If I didn’t, this post would quickly devolve into a copy-and-paste marathon from half a dozen documentation pages, and nobody wants that.

What I use

• VScode
• Astro js + tailwind css
• GitLab
• AWS Amplify
• AWS CloudFront

VSCode is my preferred IDE. it’s simple to use, free, and has a massive library of add-ons. Since this is my first Astro project, I’m especially grateful for the extension that provides proper syntax and semantic highlighting.

I ended up choosing Astro after comparing it to static site generators I’ve used in the past, like Jekyll, Hugo, and Ghost. Astro is the shiny new kid on the block and brings some interesting features right out of the box, including static, hybrid, and server-side page rendering. If that piques your curiosity, I encourage you to check out their documentation or spin up an install yourself.

VSCode and Git work hand in hand. After setting up a private repository for this project, pushing changes is as simple as running a few commands in the terminal. I haven’t felt the need for extra extensions like GitLab Workflow but who knows, maybe future me will appreciate the convenience. I chose GitLab because I’m already familiar with self-hosted instances, so it felt like the natural fit for this project.

Enter AWS Amplify. Honestly, Amazon could hardly have made deploying apps any easier. Amplify can trigger a pull from your Git repository using a simple webhook whenever a branch is merged or a new commit gets pushed. Add a bit of YAML, and you’ve got a fully automated build process. From there, it’s almost absurdly straightforward: write a new post or tweak a file, push it, and let the magic cloud machinery handle the rest.

Lastly, with just a few extra clicks, a domain already managed in Route 53 can be automatically configured to front the Amplify app through AWS CloudFront. If you’re using a third-party DNS provider, you’ll probably have to add the required records manually. As a nice bonus, CloudFront also generates and configures an SSL certificate during the setup process.

Conclusion

This is the high-level overview without diving too deep into the specifics. Those details are all well documented in their respective corners of the internet. Building this site from almost scratch and automating its deployment turned out to be a genuinely fun exercise, and a great way to explore a new stack end to end.