Have you ever wanted to create your own website but found the process daunting? That’s exactly how I felt last week when I got the idea to add a blog to my existing (and totally static) portfolio website. For some reason, my TikTok feed is flooded with developers’ videos discussing various topics, and then I stumbled upon a video talking about Astro.new. It promised an easier way to build modern websites with a similar component approach to libraries/frameworks like React or Angular, so I decided to give it a shot.

Astro website

Getting Started with Astro.new

Setting up my project on Astro.new was surprisingly simple. I just had to follow a few steps, and voila, I was ready to start building my blog. In fact, I used one of the templates to have something ready. The setup process itself was not complicated, and the configuration was straightforward and easy. However, I faced some complexity when I decided to incorporate the blog into my portfolio page.

Migrating my old static website

One of the promises made by Astro.new is that it allows integration into existing projects, and the transformation itself is simple. So, I decided to keep my old static website but implement some new patterns to make it more “compatible” with Astro. My first step was to convert my existing static site and HTML files into a more reusable structure using components and logically separating the different sections of the site. I also had to move some files and change references, all to prepare my website to work similarly to other frontend technologies. Therefore, I had to plan ahead for building and deploying my site to a public server.

If you’re familiar with modern web development, you can imagine that this process is tedious but should be simple enough to complete in about 1-2 hours. The next step was to implement the blog and seamlessly integrate it into my new (old) website.

Creating my own Frankenstein

Creating this fusion of the old website with the template I installed with Astro wasn’t difficult at all. If you’re familiar with TypeScript and did an “acceptable” job converting the static site, then it should be simple enough to “inject” the new site into your existing project. The most problematic part may be ensuring the design follows a common language across the whole site. I’m not a design guru, but Astro.new made it easy for me to make my blog look good by implementing some of the styles I was already using on my site. Also, the implementation of slugs and blog entries using MD files made the job easier. I just had to find a way to iterate between the entries of my blog, providing a user-friendly way to navigate from one entry to the next (which was a piece of cake as Astro provides an API that exposes the entries metadata).

Initial results

The initial results of the fusion were promising. My first iteration took me around 4 hours from the idea until I was able to navigate my old site and access the blog. From there, I just had to tweak details and play the role of a quality assurance tester to validate that everything was working as expected. After another hour of troubleshooting and fixing small issues, I was able to achieve a solid version of my website, now with a brand new blog powered by Astro.new.

Fast and Furious

I don’t know about you, but waiting for a website to load drives me crazy. That’s why I was thrilled to discover that Astro.new focuses on speed. By using clever tricks like server-side rendering and static site generation, my blog loads lightning-fast, even on a slow connection. It’s a game-changer for user experience.

Build and deployment

My old website was running on Google’s Firebase, which provides an easy way to deploy static websites. It’s also a cost-effective option if you don’t want to pay for hosting and your traffic is small enough to fit within the free plan restrictions (so far, it has been working well for my portfolio site). With my new website, I wanted to continue using Firebase. So, I built the project and tried to deploy it to Firebase. Every little thing worked like a charm; I didn’t have to do anything strange during the process, just a couple of commands and the site was deployed. For reference, here are the commands I used for deployment:

npm run build
firebase deploy --only hosting

Of course, to have these commands available, you have to use the Astro.new template, which includes the “npm” commands, and successfully log into your Google account while configuring your firebase.json file.

Wrapping Up

And that’s it! This blog and the website you’re using are the results of this short but amazing learning experience. It feels good to have a website that works like any other modern web application. Obviously, it’s not the same, but the similarities are enough to make you feel familiar when developing or modifying the website. So, if you liked this article and have a similar need, I suggest you give Astro.new a try – you won’t be disappointed.

Happy coding!