chebread.org

This blog is generated by a custom Static Site Generator (SSG) built from scratch with Go. It features a frontend pipeline and a fully automated deployment process using GitHub Actions.

Blog link: https://chebread.org/

Table of Contents

• Features
• Tech Stack
• How to Run
• How to Use devd
• How to Use localias
• How to Create Manual Anchor Links
• How to Use Callouts
• How to Configure Title-Sorted Categories
• How to Deploy
• License

Features

• Custom Go SSG
• Markdown-Based Content
• GitHub-Style & Custom Callouts (Alerts)
• Build-Time Syntax Highlighting
• LaTeX Support
• Image Zooming
• Manual Anchor Links for Headings
• Frontend Tooling
• Automated CI/CD Pipeline

Tech Stack

• Static Site Generator (SSG): Go
• Content: Markdown with YAML Front Matter parsed with Goldmark
• LaTeX Rendering: KaTeX + Hugo Passthrough extension
• Styling: SCSS compiled with Dart Sass
• JavaScript: TypeScript (bundled with esbuild)
• Image Zoom: medium-zoom
• Package Manager: pnpm
• Deployment: GitHub Actions

How to Run

Install Dependencies

go install github.com/cortesi/devd/cmd/devd@latest

brew install chroma

chroma --html-styles --style=github > layout/styles/chroma.css

pnpm install

Build Project

pnpm run build

Run the Development Server

pnpm run serve

Rebuild Project

pnpm run watch

This command checks for changes to layout directory files and executes pnpm run build.

How to Use devd

devd DIR_NAME # Run the server from the DIR_NAME directory

devd -l DIR_NAME # Run the server using livereload

devd -o DIR_NAME # Run the server and Open the browser

devd -ol DIR_NAME # Run the server and open a browser using livereload

killall devd # Kill devd process

How to Use localias

localias set devd.test 8000

localias remove devd.test

localias clear

localias list

localias status

localias start

localias stop

localias run

How to Create Manual Anchor Links

You can create links that jump to specific headings within a page. This is useful for building a table of contents.

Assign a Custom ID to a Heading

Append {#your-custom-id} directly after your heading text. This ID will be the target for your link.

## My Awesome Section {#section-1}

Link to the Heading

Use the standard Markdown link syntax. The URL part should be a # followed by the custom ID you created.

[Go to my awesome section](#section-1)

Example

## Table of Contents
- [Go to Section 1](#section-1)
- [Go to Section 2](#section-2)

## My Awesome Section {#section-1}
Here is the content for the first section.

## Another Awesome Section {#section-2}
Here is the content for the second section.

Note

It is recommended to use only letters, numbers, and hyphens (-) for IDs to ensure URL compatibility. Special characters (like ?, &) should be avoided. Korean characters are also supported.

How to Use Callouts

You can use GitHub-style callout (alert) blocks and custom-titled callouts in your posts.

Standard GitHub Alerts

The blog natively supports the 5 standard GitHub alert types: NOTE, TIP, IMPORTANT, WARNING, and CAUTION.

> [!NOTE]
> Useful information that users should know, even when skimming content.

> [!TIP]
> Helpful advice for doing things better or more easily.

> [!IMPORTANT]
> Key information users need to know to achieve their goal.

> [!WARNING]
> Urgent info that needs immediate user attention to avoid problems.

> [!CAUTION]
> Advises about risks or negative outcomes of certain actions.

Custom Titles & Styles

You can customize the title and choose a specific alert style using the [!style|title] syntax. The available styles are note, tip, important, warning, and caution.

> [!caution|foo]
> boo

> [!warning|foo]
> boo

> [!tip|foo]
> boo

If you do not specify a style, it defaults to the note (blue) style:

> [!foo]
> boo

How to Configure Title-Sorted Categories

By default, posts in each category are sorted chronologically by date (newest first). For tutorial or series categories (such as book chapters or lectures), you can configure them to be sorted purely by title (1-9, ㄱ-ㅎ, a-z) regardless of post dates.

Simply add the category name to content/title_sorted_categories.yml:

- Introducing Python
- CSAPP

How to Use Markdown

If you add two spaces to the end of a sentence, it becomes <br/> function.

How to Deploy

To publish a new post or deploy changes, you must push a specially formatted Git tag. The deployment is handled automatically by GitHub Actions.

Commit Your Changes

First, make sure all your new content and changes are committed to the main branch.

# Stage all changes
git add .

# Commit the changes
git commit -m "post: foo: boo"

# Push the commit to the main branch
git push origin main

Create a Deploy Tag

The deployment workflow is triggered by a tag. Create a new tag based on the current date. The format is post/YYYY-MM-DD-XX, where XX is a two-digit number for posts on the same day (e.g., 01, 02).

# Example for the first post on September 23, 2025
git tag post/2025-09-23-01

Push the Tag to Deploy

Push the newly created tag to GitHub. This is the final step that will trigger the automatic build and deployment process.

git push origin post/2025-09-23-01

You can now go to the Actions tab in your GitHub repository to watch the deployment progress. Your site will be live with the new content in a few minutes.

License

Copyright © 2025-2026 Cha Haneum

This project is licensed under the Hippocratic License 3.0 (HL-3.0). By using this software, you agree to the terms and conditions set forth in the LICENSE file. For more information about this license, please visit firstdonoharm.dev.