🌐 pppw.github.io

This repository backs the website pppw.github.io.

It is a Jekyll-powered personal site with a custom design system, long-form writing support, configurable build-time themes, Mermaid diagrams, syntax-highlighted code blocks, and a simple content workflow for posts and images.

✨ Features

• Jekyll + GitHub Pages static site workflow
• Build-time configurable themes
• zen theme for calm, editorial long-form reading
• starcraft theme for a dark tactical sci-fi interface
• Mermaid diagram support in Markdown code fences
• Rouge syntax highlighting for fenced code blocks
• Markdown-based posts and pages
• Static asset support for post images

🎨 Theme Configuration

Theme selection is controlled in _config.yml.

Current supported themes:

• zen
• starcraft

The current default is:

theme_name: zen

If the configured theme is invalid, the site falls back to zen.

🛠 Local Development

Build the site:

bundle exec jekyll build

Run a local development server:

bundle exec jekyll serve

After starting the server, Jekyll will print the local URL, typically:

http://127.0.0.1:4000/

📝 Adding a New Post

Create a Markdown file in _posts/ using Jekyll’s standard filename format:

_posts/YYYY-MM-DD-your-post-title.md

Example:

_posts/2026-03-10-my-new-post.md

Use front matter at the top of the file:

---
layout: post
title: "My New Post"
subtitle: "Optional subtitle"
date: 2026-03-10
categories: [notes]
tags: [example]
excerpt: "Short summary for previews."
author: "PPPW"
---

Then write the article body in Markdown below it.

🖼 Adding Images to a Post

Post images should be stored under assets/images/posts/ so Jekyll publishes them as static files.

Recommended structure:

assets/images/posts/YYYY-MM-DD/image-name.png

Example:

assets/images/posts/2026-03-10/cover.png

Reference the image from your Markdown like this:

![cover]({{ '/assets/images/posts/2026-03-10/cover.png' | relative_url }})

This is important:

• Markdown preview in an editor may resolve relative file paths
• Jekyll pages need a published site path
• Using {{ ... | relative_url }} keeps the URL correct in the built site

📊 Mermaid Diagrams

Use fenced Mermaid blocks inside Markdown:

```mermaid
flowchart LR
    A[Start] --> B[Finish]
```

The site loads Mermaid in the browser and renders these blocks automatically.

💻 Syntax Highlighting

Fenced code blocks are highlighted with Rouge.

Example:

```go
func main() {
    fmt.Println("hello")
}
```

➕ Adding a New Theme

Theme files live in:

assets/css/themes/

To add a new theme:

1. Copy an existing theme file such as zen.css
2. Rename it, for example nebula.css
3. Add the new theme name to the supported-theme check in _layouts/default.html
4. Set theme_name: nebula in _config.yml
5. Rebuild the site

📁 Project Structure

_config.yml
_layouts/
_includes/
_posts/
assets/css/themes/
assets/images/posts/
assets/js/

🚀 Deployment

This repo is intended to back pppw.github.io. Once changes are committed and pushed, GitHub Pages can build and publish the site, depending on your Pages configuration.