This website is 100% hand-crafted, natural, and organic. Let's take a look at what tech I'm using here, and how all of this stuff works together. Some of the items mentioned below are also outlined in my

.

For those impatient, here's the

.

I'll talk about the MetaCard above in more detail a bit later.

TypeScript / React

Let's start with the most basic thing. I'm using TypeScript and React for pretty much everything you see here. Even though I don’t use many of its more advanced features, sometimes it’s really handy to be able to type things, even for such a small project as this.

export interface BlogPost extends SanityDocument {
  slug: { current: string };
  title: string;
  summary: Block[];
  publishedAt: string;
  coverImage: SanityImageAssetDocument;
  body: Block[];
  summaryRaw: string;
  bodyRaw: string;
  estimatedReadingTime: number;
  location?: {
    lat: number;
    lng: number;
  };
  categories: {
    title: string;
    description: Block[] | string;
    slug: { current: string };
  }[];
  references?: Omit<BlogPost, 'references'>[];
  comments: BlogComments[];
}

I really, really enjoy TypeScript. When I first encountered a strictly-typed language during my short stint at Microsoft, I had to adapt very quicklyScript. When I first encountered strictly-typed language during my short stint at Microsoft, I had adapt to really quickly . C# was a revelation, and I’ve been a fan of TypeScript ever since.

As for React, it’s comfort and familiarity, I guess. Oh, and it’s the default for my first list item here:

Next.js

This entire site is powered by Next.js. As of the time of this writing, I’m running the latest version of Next.js 12.

There are few things worth mentioning.

• All blog, hike, category, and pages are statically-generated
• Stats component at the bottom of the home page uses SWR while being initially statically generated as well (with SWR as fallback)
• Blog page uses “Read more” button to load more posts (as opposed to Infinite Scroll I used in the past) to give visitors better controls over how much data they download
• Images are lazy-loaded when they appear on screen; they use blur placeholders until loaded
• All pages are revalidated every 2 minutes in case there’s an updated version available (especially important for blog posts with comments)
• It’s a PWA that registers a service worker and allows the site to be installed as an application
• Other features supported by Next.js are login, comments, hiking map, uptime & services status, search, and newsletter subscriptions.
• Next.js powers all serverless functions, including retrieving stats, posting comments, and more.

While Next.js is at the heart of this site, it’s brain is Sanity.io CMS.

Sanity.io

Tailwind CSS

Vercel

Auth0

Algolia

Mapbox

Cloudinary

In the past, I used Cloudinary to store generated OpenGraph images. As of right now, I’m not using it anymore: images are generated right within Sanity.

Supabase

In the past, I used Supabase to store comments. As of right now, it’s no longer the case: comments are stored and managed right in Sanity.

Fathom

Mailgun

Buttondown