April 2024
Since I first heard of Astro, probably a couple of years ago now, I wanted to try it out. It’s fast, easy to use, and ships minimal JavaScript to the browser. A recent urge to revamp my portfolio gave me the opportunity to do so.
One of the main reasons I chose Astro is because it’s fast. Waiting for a slow page to load is something I HATE, so being quick to load is non-negotiable for me. When I first read up on Astro, it was one of the first web frameworks doing a zero JS default. It can also do Server Side Rendering (SSR), which makes most websites run faster as the HTML is pre-rendered on the server.
Astro uses a component-based architecture, meaning you can build your site using reusable chunks of code. After using Svelte, there’s no way I can go back to web dev without components. They make your code much easier to maintain and add to.
Another cool thing about Astro is that it supports probably every popular frontend framework, like React, Vue, and Svelte. You can even use them all together in the same project, choosing which one you want for a certain component or page. This means it’s easy to integrate into existing projects or allows you to try out different frameworks without much commitment.
Astro has some great tutorials and overall is just really easy to use and get started with. I even recommended it to a friend with zero programming experience. I started this portfolio with their blog tutorial, it’s a nice starting point which walks you through creating a realistic blog site.
One of the first parts of their blog tutorial, before you’ve even written any code, is to deploy the site. I loved that they got you to do this so early, as it meant I had an actual website on the web which anyone can access and was updated each time I added something. It gets you started with deploying using Netlify, which was really simple to set up. Once I registered it to the Github Repo, all it took was 2 buttons to commit and sync, and then the site updates automatically when the repo updates.
Netlify was nice. It allowed me to customise the domain (tommctigue.netlify.app), so if I wanted to stay really cheap I wouldn’t need to purchase another domain. Only problem was, it was still taking 150-200ms to return my page, and the only way to change that was through paying for their higher tier (at $19/month!). So, time to look elsewhere.
I gave Vercel a shot, which was faster… but also slower. Over half the time their server was taking 2-5 seconds to load a page. I tested on multiple devices, still slow. Definitely a big problem! So, time to see what other options there are…
GitHub Pages, GitLab Pages were two potential options, but I ultimately decided on Cloudflare Pages. It has unlimited bandwidth/requests in their free tier, and a lot of nice options for optimising page speed. It was just as simple to set up as the other two, but I was getting 20-40ms response times. Perfect!
Building my portfolio with Astro was great. It’s simple, fast, and flexible, making it an excellent choice for creating a modern site. The component-based architecture and Markdown support made the development and blogging easy. If you’re thinking about building your own website of any sort, definitely give Astro a try.