Introduction to Astro

I rewrote this site using Astro and here's what I thought.


Matthew Cobbing

Nebulous region in the constellation Cygnus

What’s Astro?

Astro is a tool for building static websites. It allows you to write sites using a variety of Javascript frameworks by shipping zero Javascript to the browser.

It acts like a static site generator but allows you to use interactive components if needed.

The Rewrite

My original aim was to add a blog section to this site. The site previously only had a projects section and I had added articles to medium.

The site used to be made with Next.js and got its content from Contentful CMS using GraphQL. I decided it was going to be too much effort to add blogging to the site using this architecture. I felt the site was overengineered given its simplicity and chose to rewrite it to use static content from the repository in order to reduce complexity.

I could have continued to use Next.js but it had been a while since I last updated the site and I wanted to start fresh so I chose to use an alternative framework.

After looking at the numerous static site generators, I decided to use Hugo. It promised to be easy to setup and get running using Markdown files and an existing template. It was extremely easy. In about an hour, I had created the site from scratch, deployed , and it looked pretty good 👍.

Almost immediately after building the site with Hugo, I noticed that customising the site beyond the template was actually quite difficult. The template had a small bug in a footer, and that meant I needed to fork the whole thing and set up an alternative git module in order to fix it. Using the template also felt more like creating a Tumblr profile and not updating my own site.

I wasn’t really happy with my new site, and wanted something that was still simple to use but also allowed me to fully customise how the site looked. That’s when I found Astro.

I had seen a video about Astro but didn’t realise it was so suited to what I wanted to do.

After looking at the docs, I decided to try it out and found the ‘Build your first Astro Blog’ tutorial on their site. The tutorial was very easy to follow, and I ended up rewriting most of the site after going through it.


The components are very similar of ReactJS, so they were easy to understand. The typescript support is ok, but I would like an error if I tried to deconstruct a field that wasn’t in that component’s Props.

interface Props {
  url?: string;
  title: string;
  description: string;
  image: {
    url: string;
    alt: string;
  pubDate?: string;

const { url, title, image, description, pubDate } = Astro.props;

  <a class="secondary" href={url}>
      <small class="description">{description}</small>
      <img src={image.url} alt={image.alt} />
      {pubDate && <small class="footer">{pubDate.slice(0, 10)}</small>}

It was very easy to copy the markdown files from the Hugo site and use them. Using a layout with markdown files is really easy with the addition of a single line.

layout: ../../layouts/Article.astro

Importing the contents of the markdown files into other components was also simple by using the glob function. I would have liked some kind of error if I tried to use a markdown file that didn’t comply with the Typescript interface instead of failing to render the page.

const articles = await Astro.glob<Article>("../pages/articles/*.md");

Due to the simplicity of the site, I haven’t been able to use any more advanced features yet and have only used Astro components. Going forward, I want to keep adding to my site, so I may need some interactive components. I want to use Svelte somewhere when I have a chance.

Overall, I really liked using Astro 🌟. It was extremely intuitive to use, and I have full control over my site’s layout.