How I Built My Site With Astro & Firebase

I recently started reviewing my Notion (the place where all my app ideas go to die) and realised I haven’t actioned any of the side project ideas I’ve had in years. What’s worse, I don’t even have a website. Sacrilegious!

With that in mind, I decided to document my process of building a personal site. Hopefully this helps someone :)

Choosing the right framework

If you’ve been a web developer for the last decade, you’ll know that there’s a shit ton of frameworks out there - main players being React, Next, Vue - the list goes on. While I’ve got experience with React, I wanted a setup that required minimal effort to spin up, tweak and deploy. Enter: Astro!

It’s great for many reasons:

• SSR out of the box
• Easy to tweak
• You can plug in various integrations (React being one of them)
• Great support for headless CMSes (Sanity & Contentful were the ones I tried)
• and more…

How to store the site content

One of the great things Astro provides is support for markdown built in. That means you could write blog posts in a markdown file and have it rendered to your UI. Problem is however, this means anytime you want to publish an article, you need to raise a PR - not ideal.

This can be solved by implementing a CMS - which I did. I chose Sanity as my tool of choice. I don’t have much experience with it, but I was able to get up and running fairly quickly, so I’d highly recommend.

How to deploy the site

This was a no-brainer - Firebase. I could’ve gone with a deployment using GCP, DigitalOcean, etc. But I wanted to keep this super simple. After all, it’s a SSR site with no backend (for now). Also, Firebase has a great CLI for deployments.

Speaking of deployments, I chose to use GitHub actions to get my code live. One of the benefits of using Firebase is the concept of preview channels. If you set up your actions using the firebase CLI, you’ll be able to deploy to a preview channel when you create a PR so you can actually view your changes in the cloud. And when you merge your PR, the changes automatically get deployed to your main site. Very minimal CI/CD setup with a few clicks. Technology has come a long way.

Managing secrets

While the site has zero backend logic, it’s still worth going over how I’m managing environment variables. Locally, I’ve got a .env file which has all my variables for local development. In GitHub, I’ve set up secrets for the repo so they can be accessible via the actions. This allows my deployments to be done seamlessly and for me to have development & production environments.

Conclusion

With very little effort, you have a website up in the cloud complete with CI/CD, environment variables and a headless CMS. All you need now is actual content to serve. Good luck ;)