Posts on Beacon Demo

Writing Math with LaTeX

Wed, 15 Jul 2026 10:00:00 +0800

Beacon supports LaTeX math. Equations are typeset at build time with KaTeX (via Hugo’s transform.ToMath), so no JavaScript is shipped to readers — the KaTeX stylesheet is only included on pages that actually contain math.

Inline math

Wrap inline expressions in $ and $. For example, the identity $e^{i\pi} + 1 = 0$ holds, and the golden ratio is $\varphi = \frac{1 + \sqrt{5}}{2} \approx 1.618$ .

Plain dollar signs are left alone, so writing about a $5 coffee or a $10 lunch is safe.

Shortcodes: Math, Music, and Sponsor

Tue, 14 Jul 2026 10:00:00 +0800

Beacon ships a few shortcodes for richer posts. Everything below renders from a short tag in the Markdown — no manual HTML.

Math (LaTeX)

Beacon typesets LaTeX with KaTeX at build time — the equations are baked into the HTML, so there is no client-side JavaScript and no flash of unstyled math.

You can write math two ways. The first is bare delimiters (needs the Goldmark passthrough extension, which this demo enables): the Pythagorean theorem $a^2 + b^2 = c^2$ sits inline, and a display block reads:

Theme Screenshots & Image Preview

Sun, 12 Jul 2026 21:00:00 +0800

Every image in a post is click-to-zoom. Click (or focus and press Enter on) any picture below to open it full-screen; press Esc or click the backdrop to close. When a post has several images, use the arrows or the ← / → keys to move between them.

The theme at a glance

Here is Beacon’s homepage in dark mode — a two-column card layout with a profile sidebar and a paginated post list.

Syntax Highlighting Showcase

Sat, 11 Jul 2026 09:00:00 +0800

This post demonstrates how Beacon highlights fenced code blocks. Every block below has a one-click copy button, and the colors adapt to light and dark mode (GitHub in light, GitHub Dark in dark).

Inline code like const x = 42; and a shell command such as hugo --gc also get the subtle code styling.

C

#include <stdio.h>

// Compute factorial recursively
long factorial(int n) {
 if (n <= 1) return 1;
 return n * factorial(n - 1);
}

int main(void) {
 for (int i = 0; i < 5; i++) {
 printf("%d! = %ld\n", i, factorial(i));
 }
 return 0;
}

Python

from dataclasses import dataclass


@dataclass
class Point:
 x: float
 y: float

 def distance_to(self, other: "Point") -> float:
 return ((self.x - other.x) ** 2 + (self.y - other.y) ** 2) ** 0.5


if __name__ == "__main__":
 pts = [Point(0, 0), Point(3, 4)]
 print(f"distance = {pts[0].distance_to(pts[1])}") # 5.0

JavaScript

// Debounce a function by `wait` milliseconds
function debounce(fn, wait = 300) {
 let timer;
 return (...args) => {
 clearTimeout(timer);
 timer = setTimeout(() => fn.apply(this, args), wait);
 };
}

const log = debounce((msg) => console.log(`[${Date.now()}] ${msg}`), 200);
["a", "b", "c"].forEach(log);

TypeScript

interface User {
 id: number;
 name: string;
 roles: readonly string[];
}

const isAdmin = (user: User): boolean =>
 user.roles.includes("admin");

const jane: User = { id: 1, name: "Jane", roles: ["admin", "editor"] };
console.log(isAdmin(jane)); // true

Go

package main

import "fmt"

func fib(n int) int {
	a, b := 0, 1
	for i := 0; i < n; i++ {
		a, b = b, a+b
	}
	return a
}

func main() {
	for i := 0; i < 10; i++ {
		fmt.Printf("%d ", fib(i))
	}
}

Rust

fn main() {
 let nums = vec![1, 2, 3, 4, 5];
 let sum: i32 = nums.iter().filter(|&&n| n % 2 == 1).sum();
 println!("sum of odds = {sum}");
}

YAML

# CI pipeline
name: build
on:
 push:
 branches: [main]
jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - name: Build
 run: hugo --gc --minify

JSON

{
 "name": "beacon",
 "version": "0.1.0",
 "features": ["dark-mode", "sidebar", "i18n"],
 "config": {
 "iconify": true,
 "sidebar": { "enabled": true, "position": "left" }
 }
}

Bash

#!/usr/bin/env bash
set -euo pipefail

# Build and preview the site
cd exampleSite
hugo server --disableFastRender &
echo "Serving on http://localhost:1313"

SQL

SELECT u.name, COUNT(p.id) AS post_count
FROM users u
LEFT JOIN posts p ON p.author_id = u.id
WHERE u.active = TRUE
GROUP BY u.name
ORDER BY post_count DESC
LIMIT 10;

HTML

<figure class="card">
 <img src="/images/cover.png" alt="Cover" loading="lazy" />
 <figcaption>A responsive card component</figcaption>
</figure>

CSS

.card {
 display: grid;
 gap: 1rem;
 padding: 1.5rem;
 border-radius: var(--radius);
 background: var(--color-bg-soft);
}

Plain text (no language)

No language hint means no token colors — just the monospace code styling
and the copy button.

That’s the full tour. Any language Chroma supports will highlight the same way.

Building a Fast Static Site with Hugo

Wed, 08 Jul 2026 10:15:00 +0800

Static sites are fast by default, but it is surprisingly easy to give that speed away. Here are the habits I keep coming back to.

Keep the asset pipeline lean

Hugo Pipes can bundle, minify, and fingerprint CSS and JS without any external tooling. One concatenated, fingerprinted stylesheet beats a dozen render-blocking requests every time.

Bundle scripts into a single file
Minify and fingerprint in production only
Inline the tiny critical bits (like the theme-flash guard) directly in <head>

Measure the real thing

Build time and page weight are both worth watching:

A Minimal Dark Palette for Long Reading

Sat, 04 Jul 2026 20:00:00 +0800

A good dark theme is not just “invert the light one”. It is a set of small decisions that add up to something you can read for an hour without eye strain.

Avoid pure black

Deep charcoal (#1d1e20) is softer than #000 and lets cards sit above the background using nothing but a lighter grey. Contrast comes from layering, not from hard borders.

One accent, used sparingly

Pick a single calm accent — a soft blue works well — and reserve it for links and interactive states. Everything else stays in the greyscale.

Welcome to Beacon

Wed, 01 Jul 2026 09:00:00 +0800

Beacon is a minimal blog theme built for speed and readability. This post shows off the typography and features so you can see how your content will look.

What’s inside

Beacon pairs a two-column card layout with a modern deep-charcoal palette, crisp typography, and gentle motion — a calm, focused reading experience. It ships with:

Light / dark / auto color modes with a persisted toggle
A card-based post list homepage in a clean two-column layout
Reading time, word count, tags, and breadcrumbs
Table of contents, code-copy buttons, and share links
SEO, OpenGraph, and Twitter card metadata out of the box

Typography

Here’s a blockquote to set the tone:

My Terminal Setup for 2026

Sun, 28 Jun 2026 08:30:00 +0800

I keep my terminal setup deliberately small. Every tool here has survived years of use because it does one thing well.

The essentials

A fast shell with sensible history and completion
A fuzzy finder for files, history, and processes
ripgrep for searching code at absurd speed
fd as a friendlier find

A tiny bit of glue

A handful of aliases removes most of the daily friction:

alias gs="git status --short"
alias gl="git log --oneline -20"
alias serve="hugo server --disableFastRender"

Why keep it minimal?

New machines are painless to set up, and there is less to break. When something does go wrong, I can reason about the whole toolchain in my head.

A Markdown Showcase

Sat, 20 Jun 2026 14:30:00 +0800

This post is intentionally a bit longer so you can see the table of contents in action, along with headings, images, and more.

Introduction

Beacon renders standard Markdown with sensible defaults. Everything below is just plain Markdown.

Working with headings

Headings from h2 through h4 appear in the table of contents automatically.

A third-level heading

Nested content stays readable thanks to comfortable line-height and spacing.

A fourth-level heading

Even deeply nested sections look tidy.

Notes on Writing More

Fri, 12 Jun 2026 21:45:00 +0800

I write more when the process gets out of the way. Most of that is about removing friction rather than adding discipline.

Make starting cheap

A new post should be one command away. If capturing a thought takes more than a few seconds, the thought is gone.

Publish smaller

Not every post needs to be an essay. A short note that ships beats a long draft that never does.

Write the rough idea down
Tidy it just enough to be clear
Publish, then move on

Keep a list

Half-formed ideas live in a running list. On days when the blank page wins, I pick something off the list instead of staring at nothing.