Mudlej.com is my personal publishing platform: a fast static website built to host my articles, project pages, supplements, and experiments without giving up the writing features I want.

The surface is intentionally simple, but behind it is a powerful and structured publishing system. It is designed to stay fast, reliable, static, and easy to maintain.

Screenshots#

Article in Dark Mode	Article in Light Mode

What It Does#

The site has four main jobs:

• Represent me with a fast personal landing page.
• Publish articles as long-form notes, tutorials, explanations, and experiments.
• Document projects as portfolio-style case studies.
• Host supplements for supporting material that is too large for a main article or project page.

Why I Built It#

I love sharing knowledge, whether it is a small tip or a 50-hour course. I have done both, but most of that sharing has happened privately or in person. I want to take more of it public and make content that I aim to be useful, interesting, and fun.

I also wanted a site that feels simple to read but is powerful enough for technical writing without turning the site into a heavy CMS.

Main Features#

• Static, fast, and lightweight.
• Simple and easy to navigate.
• Article, series, project, and supplement pages.
• Rich Markdown support through plain Markdown syntax.
• Reader settings for theme, text size, and reading width.
• Light and dark themes built on semantic design tokens.
• RSS, sitemap generation, social previews, and typed content collections.
• A small design-system layer for consistent cards, badges, metadata, prose, and layout.

Reader Experience#

The site is built around reading. Pages are static and quick to load, while reader settings make longer content easier to adjust to personal preference.

• Light and dark mode.
• Adjustable text size across the site.
• Adjustable reading width for article, project, and supplement pages.
• Table of contents support for long pages.
• Heading anchors for sharing specific sections.
• A consistent prose layout for articles, projects, and supplements.

Rich Technical Writing#

One of the core features of Mudlej.com is its rich text capabilities. The site supports the writing features I need for technical notes: syntax-highlighted code blocks, callouts, math, Mermaid diagrams, content tabs, internal links, footnotes, tables, and image behavior.

Content Types#

Article#

Articles are the main long-form writing surface. They are used for tutorials, notes, explanations, and experiments.

Series#

Series pages organize related articles into an ordered path, so connected writing can be read as a sequence instead of isolated posts.

Project#

Project pages document software projects, tools, experiments, and case studies. They are closer to living portfolio pages than dated blog posts.

Supplement#

Supplements hold long supporting material attached to an article or project, keeping the main page focused while still making deeper references available.

Technical Shape#

Mudlej.com is built with Astro as a static site. Content lives in typed collections, and pages are generated at build time, so deployment does not require a server runtime.

The site is deployed through Cloudflare Pages and is designed to stay reliable by keeping the runtime surface small. Most work happens at build time: content validation, Markdown rendering, internal link checks, RSS generation, sitemap generation, and static page generation.

Styling#

The styling is driven by a small design-system layer: semantic color tokens, type roles, reusable cards and badges, and shared prose styles for rendered Markdown. The article, supplement, and project routes keep their own semantics while sharing the same rich content shell.

Reliability#

Reliability is an important part of the project. Mudlej.com has a test suite that checks the publishing system at multiple levels instead of relying only on manual inspection.

• Unit tests cover article, project, RSS, metadata, sitemap, theme, reader settings, and rich-content helpers.
• Markdown tests cover reading time, Mermaid, internal links, inline formatting, abbreviations, content tabs, and combined rendering.
• Generated HTML tests check pages, feeds, sitemaps, metadata, robots rules, local links, anchors, duplicate IDs, image alt text, and external link safety.
• Runtime tests verify that page-specific scripts only load when needed, such as Mermaid, content tabs, and image lightbox behavior.
• Accessibility tests check reader settings controls, focusable content tabs, and image lightbox controls.
• Snapshot canaries track the rich text preview and /styleguide output for broad structural regressions.

Codebase#

The codebase is organized around clear boundaries:

• Route files own page semantics
• Shared rich-content components own Markdown page behavior
• Content helpers prepare article/project/supplement data
• The design system provides reusable layout, card, badge, metadata, and prose styling primitives.

Status#

Active.