How to Write a Blog Post

A guide to the file format, folder structure, and styling conventions for adding new posts to this site.

Bingyi Kang · 19 Mar 2026

Overview

Each blog post is a standalone HTML file inside the posts/ folder. All styling lives in posts/post.css — new posts only need the minimal skeleton below, no copy-pasting of CSS. Update the metadata and content, then add a card to blog.html to make it appear in the listing.

Minimal skeleton: copy the snippet in section 01 below — it's about 30 lines, not 200.

01 — Folder Structure & Minimal Skeleton

The site is organized as follows:

homepage_new/
├── index.html          ← Home page
├── research.html       ← Publications
├── blog.html           ← Blog listing
└── posts/
    ├── post.css                   ← Shared styles (fonts, prose, nav, …)
    ├── how-to-write-a-post.html   ← This file (reference)
    └── your-new-post.html         ← Your new post

Name your file with lowercase words separated by hyphens, e.g. depth-anything-lessons.html. There is no build step — everything is plain HTML.

Start every new post from this skeleton — all styling comes from post.css:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Bingyi Kang">
  <title>Your Post Title — Bingyi Kang</title>

  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Remove the three KaTeX lines below if the post has no math -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js"></script>
  <script defer
    src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js"
    onload="renderMathInElement(document.body, {
      delimiters: [
        {left: '$$', right: '$$', display: true},
        {left: '$',  right: '$',  display: false}
      ]
    });">
  </script>

  <link rel="stylesheet" href="post.css">
</head>

<body>

  <!-- Navigation -->
  <nav style="border-top: 3px solid #1B2A4A;">
    <div class="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
      <span style="font-family: 'JetBrains Mono', monospace;
                   font-size: 0.72rem;
                   font-weight: 700;
                   letter-spacing: 0.15em;
                   text-transform: uppercase;
                   opacity: 0.5;">
        Bingyi Kang
      </span>
      <div class="flex gap-8">
        <a href="/">Home</a>
        <a href="/research.html">Research</a>
        <a href="/blog.html" style="font-weight: 600;">Blog</a>
      </div>
    </div>
  </nav>

  <!-- Post header -->
  <section style="padding: clamp(2rem, 6vw, 4rem) 0 2rem;">
    <div class="mx-auto" style="max-width: 56rem;">

      <h1 class="post-title">Your Post Title Here</h1>
      <p class="post-subtitle">A brief description of what this post is about.</p>

      <div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem;">
        <span class="post-author">Bingyi Kang</span>
        <span style="color: #9CA3AF;">·</span>
        <span class="post-date">DD MMM YYYY</span>
      </div>

      <div style="border-bottom: 1px solid rgba(27,42,74,0.1); margin-top: 1.5rem;"></div>

    </div>
  </section>

  <!-- Post body -->
  <section style="padding-top: 2rem; padding-bottom: 4rem;">
    <div class="mx-auto" style="max-width: 56rem;">
      <article class="prose-doc">

        <!-- Your content here -->

      </article>
    </div>
  </section>

</body>
</html>

02 — Post Header Metadata

At the top of each post, update these four fields inside the header section:

<title>Your Post Title — Bingyi Kang</title>
<!-- Post title -->
<h1 class="post-title">Your Post Title Here</h1>

<!-- One-sentence subtitle (optional) -->
<p class="post-subtitle">A brief description of what this post is about.</p>

<!-- Author and date -->
<span class="post-author">Bingyi Kang</span>
<span class="post-date">19 MAR 2026</span>

Write the date in DD MMM YYYY format. It will render in small uppercase monospace automatically.

03 — Content Formatting

All post content goes inside <article class="prose-doc">. The following elements are pre-styled.

Headings

Use h2 for major sections and h3 for sub-sections. Prefix section headings with a number and em dash to match the style of this post: 

<h2>01 — Introduction</h2>
<h2>02 — Methods</h2>
<h3>Data Collection</h3>

Paragraphs and Links

Plain paragraphs and links need no extra classes:

<p>
  This is a paragraph. Links look like
  <a href="https://example.com">this</a>.
</p>

Lists

<ul>
  <li>Unordered item one</li>
  <li>Unordered item two</li>
</ul>

<ol>
  <li>Ordered item one</li>
  <li>Ordered item two</li>
</ol>

Blockquote

This is a blockquote. Use it for a key insight, a memorable quote, or a highlighted takeaway. 
<blockquote>
  Your quote or insight here.
</blockquote>

Inline Code and Code Blocks

Use <code> for inline snippets and <pre><code> for multi-line blocks: 

<p>Call the function with <code>model.forward(x)</code>.</p>

<pre><code>import torch
x = torch.randn(1, 3, 224, 224)
out = model(x)
</code></pre>

Images

Wrap images in a figure with class post-image. Add an optional caption inside figcaption: 

<figure class="post-image">
  <img src="../images/your-image.png" alt="Description of image">
  <figcaption>Figure 1. Caption text goes here.</figcaption>
</figure>

Store images in ../images/ (the shared images folder one level up).

Section Dividers

Use a horizontal rule between major sections:

<hr class="section-divider">

04 — Adding the Post to blog.html

After writing your post, open blog.html and add a new card inside <div class="flex flex-col gap-8 max-w-2xl">: 

<div class="blog-card">
  <div class="blog-date">Mar 2026</div>
  <a href="posts/your-post-filename.html" class="blog-title block mt-1">
    Your Post Title
  </a>
  <p class="blog-desc">
    One or two sentences summarizing the post.
  </p>
</div>

Add new cards at the top of the list so the most recent post appears first.

05 — Checklist Before Publishing

  1. Update <title> in the <head>.
  2. Fill in the post title, subtitle, and date in the header section.
  3. Write content inside <article class="prose-doc">.
  4. Add images to ../images/ and reference them with the relative path.
  5. Add a card to blog.html with the correct filename link.
  6. Open both the post and the blog listing in a browser to verify links and layout.

06 — Math Equations (LaTeX)

Math is rendered using KaTeX, which is already loaded in every post. Write LaTeX directly in the HTML — no extra setup needed.

Inline Math

Wrap inline expressions in single dollar signs: $...$. For example, writing $f(x) = x^2$ renders as $f(x) = x^2$, and $\mathcal{L} = -\mathbb{E}[\log p_\theta(x)]$ renders as $\mathcal{L} = -\mathbb{E}[\log p_\theta(x)]$.

Display Math

Wrap block equations in double dollar signs: $$...$$. They render centered on their own line.

The cross-entropy loss:

$$\mathcal{L}(\theta) = -\sum_{i=1}^{N} y_i \log \hat{y}_i$$

The attention mechanism:

$$\text{Attention}(Q, K, V) = \text{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right)V$$

A conditional probability using Bayes' theorem:

$$P(A \mid B) = \frac{P(B \mid A)\, P(A)}{P(B)}$$

Usage in HTML

<!-- Inline: wrap in $...$ -->
<p>The loss function $\mathcal{L}(\theta)$ is minimized during training.</p>

<!-- Display block: wrap in $$...$$ on its own line -->
$$\mathcal{L}(\theta) = -\sum_{i=1}^{N} y_i \log \hat{y}_i$$

Note: KaTeX is faster than MathJax but covers most common LaTeX math commands. If you need a command that fails to render, check the KaTeX supported functions list.