Building This Site

Seeing as this is my second post, I thought I’d talk about a simpler topic: Why and How I build this site.

Why

For me, more than a job, writing code and creating software are hobbies. This site serves as a place where I can talk about software, site reliability and computers. All the things I love.

How

The site is built with Astro, a framework for writing content-driven websites.

Astro is

1. Fast
2. Easy to use
3. Familiar to me because it has syntax similar to React (jsx)

Astro supports the Island concept, which allows for the separation of components on the page that act independently, similar to React. How this differs is it operates on a level above the framework, allowing you to even mix and match different frameworks. Astro then only delivers static html for the uninteractive portions, and allows for “parallel hydration” for the interactive portions (allowing you to load different parts of the page at different times).

Most components written will be in .astro format. For instance, each “post” on the home page (one of which you probably clicked to get here) looks like this

---
import type { CollectionEntry } from "astro:content";
import Card from "./card.astro";
import Tag from "./tag.astro";

interface Props {
  post: CollectionEntry<"posts">;
}

const { post } = Astro.props;
---

<a href={`/post/${post.slug}`}>
  <Card>
    <header class="flex justify-between pb-1 flex-wrap">
      <h2 class="text-2xl font-semibold">{post.data.title}</h2>
      <span class="text-gray-400 align-middle"
        >{post.data.pubDate.toDateString()}</span
      >
    </header>
    <p>
      {post.data.description}
    </p>
    <footer class="pt-4 flex gap-1 flex-wrap">
      {post.data.tags.map((tag) => <Tag>{tag}</Tag>)}
    </footer>
  </Card>
</a>

If you are a React developer, this probably feels like home.

Astro supports static site generation by default and opt-in server side rendering.

Content can be written in markdown, mdx or use an external cms or even .html files.

On top of Astro, Tailwind is used for the styling. I designed and styled all the components and pages myself. Astro has really good support for tailwind with @astrojs/tailwind.

I try to reduce the amount of Javascript I send to the frontend. In future, as the number of posts grow, I may add searching and tagging for the posts but this website is meant to be as lightweight as possible.

The source is available on Github.