A brand new start (for this blog)

I’m so happy to finally have my new blog in place! Let me talk you through what’s new around here.

New design: Clean ‘n Simple 🖌️

I couldn’t have done a big revamp without a fresh coat of paint. A bit of Creator’s Curse perhaps, but I never loved it. The old look always felt a bit off because it didn’t feel coherent. I didn’t set out with a specific feel in mind. It also didn’t help that Hugo (the static site generator I used before) felt dated and clunky in its templating system. It reminded me too much of Ye Olde PHP/Rails/Java views.

For the first time since my very first blog version (going back to AngularJS days), I set out with a specific feel in mind. Back then, it was bold hero images and simple typography with sparingly used pops of colour for tags and CTAs.

This time (as I hope is obvious), I went in with pure simplicity in mind. Simplicity of design leads to simplicity of reading for you, and simplicity of maintenance long-term for me. I wanted as few eye-catching features as possible - content is key. When I’m reading others’ blogs, I want a distraction-free reading experience with as minimal visual flairs as possible. It helps me absorb the content freely without resorting to a browser’s Reading Mode feature (although I do still use a reading mode occasionally, and even then: articles with less bells and whistles translate all the more accurately into another view).

New tech: Astro! 🚀

The thing I’ve been wanting to do for far too long is to move away from Hugo. I already alluded above to the old skool templating system it uses that inspires little creativity. My old blog’s UI was spread across a bunch of “partials”, or just bits of HTML. This doesn’t sound a whole lot different from modern UI library components, but they’re quite different. Hugo’s templates feel implicitly linked with their bespoke include tags. Styling also feels like an afterthought, left to the developer to decide how and where to write CSS rules without explicit ties to templates (and no, I don’t consider SCSS pre-compilation or native style tags peppered throughout partials a complete solution). Enough bitching about where I came from.

Astro is a pretty big deal for me. It’s a static site generator like Hugo, but is far more aligned to my preferred ways of working. It’s TypeScript/JavaScript at heart with a great CLI experience, development server and SSG/SSR by default. I’ve covered some of Astro’s most enticing features before, but being (markdown) content-driven and flexible to design in a way that works for me without over-engineering.

For the love of front matter

I’ve mentioned before, but the most essential feature in Astro for me is the tight integration of markdown front matter - the “metadata” you can put at the top of every markdown file. You’re free to put whatever you want in there, such as an article title, cover image and published date. Astro can type-check front matter fields via Zod (a popular JS runtime type-checking library), throwing an error immediately upon finding a bad/missing field. Markdown files are your app’s database.

I use Astro’s front matter handling to help keep my categories in check. I know for now that I only want 3-4 specific categories, so I defined these with a Zod type:

const CATEGORIES = [
  "technology",
  "review",
  "life",
  "miscellaneous",
] as const;

// Runtime Zod validator
const categoryEnum = z.enum(CATEGORIES);

// Inferred TypeScript type for use in source code
type CategoryKey = z.infer<typeof categoryEnum>;

Zod’s awesome. It’s not just a type checker, either. It lets you define default values and coercions. For example, z.coerce.date() automatically turns a string into a Date object when you access the front matter values in pages

One other nugget I had to share with Astro’s front matter config - you’re not limited to just Zod. You can make your collection schema a function that receives image that can magically resolve a string image path like "./blog-revamp-2024.png" to an actual image file:

const posts = defineCollection({
  type: "content",
  schema: ({ image }) =>
    z.object({
      cover: image(), // <- 🪄 right here

The short of all this is: if you’re authoring content with Markdown, this is absolutely the best way I’ve come across of dealing with front matter in a sane, consistent way.

New mindset: Just write ✏️

Finally, with a completely fresh blog, I’m hoping it’ll lower the barrier to me wanting to write and, crucially, publish more.

It’s actually taken me a while just to write this article, so I’m hoping this is the final barrier. I’ve got tonnes of ideas, old and new, not all technical. It’s time to start lifting some of the half-baked stuff I’ve got sitting in Notion, dust off the good’uns and get them out for people to read.

I value writing a lot, more than my intermittent blogging habits show (you should see my Confluence pages at work). I appreciate quality over quantity, but I still want to increase the volume.

I’ve also decided, for now, not to bring over comments from the old blog. Disqus actually makes it technically pretty easy, but I don’t think I need comments any more. Besides, I think cross-posting to LinkedIn the interesting ones is enough for me. Analytics will tell me the rest.

Blog off! 🏃‍♂️‍➡️

I’ll progressively add bits and pieces to the blog’s features over time. As you probably gather by now, Astro makes that a pleasant and fuss-free experience for me, so I actually look forward to that aspect. I’m also looking forward to easing back in to regular writing with a site I’m proud to post stuff to.

See ya in the next one!