Hugo Lin

June 6, 2026

Building this journal

A hybrid guide — why this site exists, what it is built with, and how to recreate it step by step.

Read in 中文

This journal is a quiet place for longer thoughts — typography-first, bilingual, and deliberately split between two moods: a brutalist bento home and an editorial reading experience for posts.

The home grid is loud with structure; the articles are calm with words. That contrast is intentional. This guide walks through both the why and the how.

Stack at a glance

Click each card to read what it does in this project:

File-based routing under app/[locale]/, static generation for posts, and server components for the bento home grid.

Project shape

Expand folders to explore the layout:

globals.css — design tokens
*.mdx — articles + postMeta
bento/ — home grid
mdx/ — interactive article blocks
lib/posts.ts — post registry
messages/ — UI translations (en, zh)
i18n/ — locale routing

Step-by-step build

Start with create-next-app using the App Router and TypeScript. Add Tailwind v4 via @tailwindcss/postcss and define semantic color tokens in globals.css — paper, ink, accent for posts, and bento-bg, bento-ink for the home grid.

Try it yourself

Here is the shape of a new post:

content/posts/my-post.mdx
export const postMeta = {
title: "My first note",
date: "2026-06-06",
description: "A short summary for listings and SEO.",
tags: ["journal"],
};

Your MDX content starts here.

Register it in the post registry:

lib/posts.ts
import MyPost, { postMeta as metaMyPost } from "@/content/posts/my-post.mdx";

const ENTRIES: PostEntry[] = [
{
  slug: "my-post",
  locales: { en: { meta: metaMyPost, MDXContent: MyPost } },
},
// ...existing entries
];

Then run the dev server:

Terminal
npm run dev

Visit /en/notes/my-post to see it live.

Tags and discovery

Tags are optional strings on each post's postMeta. They power three things: filter pills on the notes index, clickable tags on article headers, and the rotating tag carousel on the home bento grid.

Try the filter below — it uses real posts from this site:

Try filtering by tag

What is next

Wander the full notes index, read Hello, world for the site's tone, or fork the repo and make the grid your own.

The best journals are built in small steps — one post, one tag, one quiet page at a time.