What I learnt from rewriting my website with Astro
How it all began
A while ago, James Q Quick posted a video of Astro and why he loved it.
Astro is an all-in-one web framework for building fast, content-focused websites
With some more reading on the reasoning behind Astro and coincidentally, I already scheduled to redesign my website so it seemed like a good opportunity to have double benefits from a single venture i.e try out if Astro is everything it claimed to be and rebuild my ugly looking website. What’s the harm in that?
I found the astro.new website which catalogs official example projects by the Astro team and I decided to check out the Blog project on StackBlitz.
README.md of the project I found the command to start a new Astro project with the blog example as a template. I copied the below command and ran it in my terminal:
npm init astro -- --template blog
The Astro CLI kicked in with some basic questions it needed for setup and under a minute I had scaffolded a project with
95% of everything I needed to rebuild my website.
I needed Tailwind CSS as that’s my go-to styling weapon. I turned out that in Astro I only needed to run
npx astro add tailwind and Astro will handle the entire setup. Everything is looking good with my website so far.
I needed to migrate my blog posts to the new Astro project and since Astro is heavy on content and it comes built-in with support for my favorite way of authoring written content - Markdown - migration was easy as copying the already exsiting blog posts
.md files into Astro’s
src/pages/blog/ folder and that was it. Astro knows to make those
.md files pages available via
www.example.com/blog/*. This was begining to seem too good to be true(but it was too good and too true!).
I spent a little bit over and hour styling the website and blog to something I like and I deployed the Astro project - my new website - to Render as a static site. I was so impressed that everything took less than 4 hours(most of the time it was just me tinkering with styling. The astro bit was done in little over an hour). I have found a new love.
However, with Astro, the setup was so basic and intuitive, and even though there was
.astro component files, it was so similar to
HTML I had to double check the extension just to be sure I wasn’t writing in a
.html file. And did I mention it was fast with development? Yes it was, owing a lot to Astro being based on Vite for tooling. Here are a couple more things I learnt:
Astro websites are fast
Astro claimed to be fast by default and that…
It should be impossible to build a slow website in Astro.
I found this all to be true when I ran the PageSpeed test for my website. The score was unbelievable.
A great DX is forefront for me when it comes to adopting a new tech and Astro didn’t dissappoint on that front. From scaffolding a new Astro project, to authoring Astro components, to integration with VS Code, and many more, everything was just screaming: “Great DX!”
The docs were written by humans for humans
Nothing annoys me more than docs that seem as if it was written by robots for computers. The Astro docs read like a prose and I must commend the docs team for this.
I believe the success of a tech hinges a great deal on its documentation. I spent my weekend binging on the Astro docs not Netflix and that should tell you something.
BYOF - Bring Your Own Framework
You can tell, that I’m in love with Astro and I’m not one to fall in love with a tech so easily. In fact I haven’t felt this way since I discovered Vue and Sails a couple of years ago.