hahwul · hahwul · Jul 30, 2026
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,20 @@
+---
+name: Deploy website
+on:
+  push:
+    branches: [main]
+    paths: [website/**]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: hahwul/hwaro@main
+        with:
+          build_dir: website
+          token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/website/.gitignore b/website/.gitignore
@@ -0,0 +1 @@
+public/
diff --git a/website/AGENTS.md b/website/AGENTS.md
@@ -0,0 +1,76 @@
+# AGENTS.md - AI Agent Instructions for Hwaro Site
+
+This document provides instructions for AI agents working on this Hwaro-generated website.
+
+## Project Overview
+
+This is a static website built with [Hwaro](https://github.com/hahwul/hwaro), a fast and lightweight static site generator written in Crystal.
+
+## Essential Commands
+
+| Command | Description |
+|---------|-------------|
+| `hwaro build` | Build the site to `public/` directory |
+| `hwaro serve` | Start development server with live reload |
+| `hwaro new <path>` | Create new content from archetype |
+| `hwaro deploy` | Deploy the site (requires configuration) |
+| `hwaro build --drafts` | Include draft content |
+| `hwaro serve -p 8080` | Serve on custom port (default: 3000) |
+| `hwaro build --base-url "https://example.com"` | Set base URL for production |
+
+## Directory Structure
+
+```
+.
+├── config.toml          # Site configuration
+├── content/             # Markdown content files
+│   ├── index.md         # Homepage (single file, no underscore)
+│   ├── about.md         # Standalone page
+│   └── <section>/       # Section directory (posts/, guide/, chapter-1/, …)
+│       ├── _index.md    # Section landing page (underscore-prefixed)
+│       └── *.md         # Pages within the section
+├── templates/           # Jinja2 templates (Crinja)
+│   ├── header.html      # Shared <head> + <body> open
+│   ├── footer.html      # Shared <body>/<html> close
+│   ├── page.html        # Page template
+│   ├── section.html     # Section listing template
+│   ├── 404.html         # Not-found page
+│   ├── partials/        # Reusable fragments (nav, search, sidebar)
+│   └── shortcodes/      # Shortcode templates
+├── static/              # Static assets (copied as-is)
+└── archetypes/          # Content templates for `hwaro new`
+```
+
+## Notes for AI Agents
+
+1. **Front matter** can be TOML (`+++`), YAML (`---`), or JSON (`{...}` at file start). Pick one per file and keep delimiters matched.
+2. **Rendered content** is `{{ content }}` in templates (already-safe HTML — no extra `| safe` needed).
+3. **Custom metadata** is `page.extra.field`, not `page.params.field`.
+4. **Always preview** with `hwaro serve` before committing.
+5. **Validate front matter syntax** (TOML, YAML, or JSON) and `config.toml` after edits.
+6. **Use `{{ base_url }}` prefix** for URLs in templates.
+7. **Escape user content** with `{{ value | e }}` (or `| escape`) in templates.
+
+## Full Reference
+
+For detailed documentation on content, templates, configuration, and more:
+
+- [Hwaro Documentation](https://hwaro.hahwul.com)
+- [Configuration Guide](https://hwaro.hahwul.com/start/config/)
+- [Full LLM Reference](https://hwaro.hahwul.com/llms-full.txt) — comprehensive reference optimized for AI agents
+
+To generate the full embedded AGENTS.md locally, run:
+```
+hwaro tool agents-md --local --write
+```
+
+## Site-Specific Instructions
+
+This site is a trilingual (en at root, /ko/, /ja/) comic field guide to DevSecOps, deployed to https://devsecops.hahwul.com (CNAME lives in `static/CNAME`).
+
+- Every content page exists three times: `foo.md`, `foo.ko.md`, `foo.ja.md`. Keep the shortcode structure of the three files identical; only translate prose, dialogue, and front matter strings. UI strings live in `i18n/{en,ko,ja}.toml`.
+- The comic system is shortcode-driven: `strip` (panel column/row), `panel` (args: tint="sec"|"warm", halftone, center), `bubble` (args: who, dir, kind, name), `scene` (args: name, pose, alt, size, bg="board"|"window"|"gears"|"radar" for a muted backdrop), `caps` and `resources` (wrap markdown lists), `team`/`member`, `loop_diagram`, `episode_rail`, `finale`.
+- Characters are inline SVG partials in `templates/partials/svg/` (char-dev, char-sec, char-ops, char-bug + trio/loop/icon). Rules: strokes `var(--ink)`, fills only from `--c-*`/`--paper` tokens plus the shading tokens (`--c-*-sh`, `--c-*-hi`, `--shade`, `--ground`), no `<text>` elements ever (all dialogue must stay translatable HTML), poses are Jinja branches. Every character gets a ground shadow, one `-sh` shading pass, and one `-hi` sheen so they never read as flat pasted shapes.
+- Chapter pages use `template = "chapter"` with `[extra] phase/episode/hook/has_tools`. The loop order lives in `data/chapters.yml`; the tool list in `data/tools.yml` (with `description_ko`/`description_ja`).
+- Design constraints: no em-dashes anywhere in visible copy (any language), one accent (mint teal) + one support hue (apricot), light/dark via `light-dark()` tokens in `static/css/site.css`, motion gated behind `html.js` + `prefers-reduced-motion: no-preference`, no `window.addEventListener("scroll")`.
+- Tools content mirrors `../tools/README.md`; when tools are added to the repo table, add them to `data/tools.yml` too.
diff --git a/website/archetypes/default.md b/website/archetypes/default.md
@@ -0,0 +1,7 @@
++++
+title = "{{ title }}"
+date = "{{ date }}"
+draft = {{ draft }}
+description = "{{ description }}"
+tags = {{ tags }}
++++
diff --git a/website/config.toml b/website/config.toml
@@ -0,0 +1,53 @@
+title = "DevSecOps"
+description = "A comic field guide to DevSecOps. Learn the six phases of the loop in illustrated episodes, then pick your tools."
+base_url = "https://devsecops.hahwul.com"
+default_language = "en"
+
+[languages.en]
+language_name = "English"
+weight = 1
+
+[languages.ko]
+language_name = "한국어"
+weight = 2
+generate_feed = false
+
+[languages.ja]
+language_name = "日本語"
+weight = 3
+generate_feed = false
+
+[plugins]
+processors = ["markdown"]
+
+[content.files]
+allow_extensions = ["jpg", "jpeg", "png", "gif", "svg", "webp"]
+
+[highlight]
+enabled = true
+mode = "server"
+theme = "github"
+use_cdn = true
+copy = true
+
+[sitemap]
+enabled = true
+
+[feeds]
+enabled = false
+
+[search]
+enabled = false
+
+[og]
+type = "website"
+twitter_card = "summary_large_image"
+default_image = "/images/og.png"
+
+[markdown]
+emoji = false
+task_lists = false
+definition_lists = false
+footnotes = false
+mermaid = false
+math = false
diff --git a/website/content/about.ja.md b/website/content/about.ja.md
@@ -0,0 +1,22 @@
++++
+title = "概要"
+description = "このマンガフィールドガイドとは何か、どこから来たのか、どう貢献できるのか。"
++++
+
+{% panel(halftone=true, center=true) %}
+{{ scene(name="trio", alt="並んで立つDev、Sec、Ops") }}
+{% endpanel %}
+
+このサイトは**DevSecOps**のためのマンガフィールドガイドです。DevSecOpsは、セキュリティを最後に付け足すのではなく、ソフトウェア開発ライフサイクルのすべてのフェーズに組み込む文化であり実践です。6つのイラストエピソードが設計から運用までループを一緒に歩き、それぞれに概念、ハンズオンの例、厳選した読み物、そして合わせて使えるツールを詰め込みました。
+
+## どこから来たのか
+
+ここにあるすべては、2020年に始まったオープンなロードマップ兼ツールコレクション[hahwul/DevSecOps](https://github.com/hahwul/DevSecOps)から育ちました。ロードマップもリソースリストも30個のツールアーセナルもコミュニティがリポジトリで管理しており、このサイトはそれらを物語として語り直しています。
+
+## コントリビューション
+
+壊れたリンク、抜けているツール、もっと良い説明を見つけたら、[IssueかPull Requestをどうぞ](https://github.com/hahwul/DevSecOps/blob/main/CONTRIBUTING.md)。ツールの追加はまずリポジトリに入り、そこから[ツール](/ja/tools/)ページへ流れてきます。
+
+## コロフォン
+
+Crystal製の静的サイトジェネレータ[Hwaro](https://github.com/hahwul/hwaro)で作りました。キャラクターは手描きのSVG、フォントはあなたのシステムのもの、そしてサイト全体がライトモードとダークモードの両方で動きます。元のリポジトリと同じくMITライセンスです。
diff --git a/website/content/about.ko.md b/website/content/about.ko.md
@@ -0,0 +1,22 @@
++++
+title = "소개"
+description = "이 만화 필드 가이드가 무엇인지, 어디에서 왔는지, 어떻게 기여할 수 있는지."
++++
+
+{% panel(halftone=true, center=true) %}
+{{ scene(name="trio", alt="나란히 서 있는 Dev, Sec, Ops") }}
+{% endpanel %}
+
+이 사이트는 **DevSecOps**를 위한 만화 필드 가이드예요. DevSecOps는 보안을 마지막에 덧붙이는 대신 소프트웨어 개발 라이프사이클의 모든 단계에 심는 문화이자 실천입니다. 여섯 개의 일러스트 에피소드가 설계부터 운영까지 루프를 함께 걸으며, 각 에피소드마다 개념, 실습 예제, 엄선된 읽을거리, 어울리는 도구를 담았어요.
+
+## 어디에서 왔나요
+
+이곳의 모든 내용은 2020년에 시작된 오픈 로드맵이자 도구 모음인 [hahwul/DevSecOps](https://github.com/hahwul/DevSecOps)에서 자랐어요. 로드맵과 리소스 목록, 30개 도구 아스널은 커뮤니티가 저장소에서 관리하고, 이 사이트는 그것을 이야기로 다시 들려줍니다.
+
+## 기여하기
+
+깨진 링크, 빠진 도구, 더 나은 설명을 찾으셨나요? [이슈나 풀 리퀘스트를 열어 주세요](https://github.com/hahwul/DevSecOps/blob/main/CONTRIBUTING.md). 도구 추가는 저장소에 먼저 반영되고, 그다음 [도구](/ko/tools/) 페이지로 흘러옵니다.
+
+## 콜로폰
+
+Crystal로 작성된 정적 사이트 생성기 [Hwaro](https://github.com/hahwul/hwaro)로 만들었어요. 캐릭터는 손으로 그린 SVG이고, 글꼴은 여러분 시스템의 것이며, 사이트 전체가 라이트와 다크 모드에서 동작합니다. 원본 저장소처럼 MIT 라이선스예요.
diff --git a/website/content/about.md b/website/content/about.md
@@ -0,0 +1,22 @@
++++
+title = "About"
+description = "What this comic field guide is, where it comes from, and how to contribute."
++++
+
+{% panel(halftone=true, center=true) %}
+{{ scene(name="trio", alt="Dev, Sec, and Ops standing together") }}
+{% endpanel %}
+
+This site is a comic field guide to **DevSecOps**: the practice of building security into every phase of the software development lifecycle instead of bolting it on at the end. Six illustrated episodes walk the loop from Design to Operate, each with the concepts, one hands-on example, curated reading, and the tools to match.
+
+## Where it comes from
+
+Everything here grows out of [hahwul/DevSecOps](https://github.com/hahwul/DevSecOps), an open roadmap and tool collection started in 2020. The roadmap, the resource lists, and the 30-tool arsenal are maintained there by the community; this site retells them as a story.
+
+## Contributing
+
+Found a broken link, a missing tool, or a better explanation? [Open an issue or a pull request](https://github.com/hahwul/DevSecOps/blob/main/CONTRIBUTING.md). Tool additions land in the repository first and flow to the [Tools](/tools/) page from there.
+
+## Colophon
+
+Built with [Hwaro](https://github.com/hahwul/hwaro), a static site generator written in Crystal. The characters are hand-drawn SVG, the fonts are your system's own, and the whole site works in light and dark. MIT licensed, like the repository it comes from.
diff --git a/website/content/build/_index.ja.md b/website/content/build/_index.ja.md
@@ -0,0 +1,87 @@
++++
+title = "ビルド"
+description = "プッシュのたびにSAST、SCA、シークレットスキャン。小言はパイプラインに任せよう。"
+template = "chapter"
+weight = 3
+
+[extra]
+phase = "build"
+episode = 3
+hook = "小言はパイプラインに任せよう。"
+has_tools = true
++++
+
+{% strip(row=true) %}
+
+{% panel() %}
+{{ scene(name="char-ops", pose="gear", bg="gears", alt="パイプラインを調整するOps") }}
+
+{% bubble(who="ops", name="Ops") %}プッシュして。2分後にパイプラインが真実を教えてくれる。{% endbubble %}
+{% endpanel %}
+
+{% panel(tint="warm") %}
+{{ scene(name="char-bug", pose="caught", alt="シークレットスキャナーに捕まったバグ") }}
+
+{% bubble(who="bug", dir="right", name="バグ") %}シークレットスキャナー?!僕のAPIキーコレクションのこと、誰が教えたの?{% endbubble %}
+{% endpanel %}
+
+{% endstrip %}
+
+## このフェーズで起こること
+
+すべてのプッシュは、バグを自動で捕まえるチャンスです。**SAST**はソースから脆弱なパターンを読み取り、**SCA**は依存関係を既知のCVEと突き合わせ、**シークレットスキャン**はコミットしてはいけなかったトークンを狩ります。テスト実行に**IAST**エージェントを載せて、内側からの視界を得るチームもあります。
+
+ビルドシステム自体も攻撃対象面です。CIジョブが乗っ取られれば、あなたの代わりに署名も公開もデプロイもできてしまう。パイプラインは実質的に本番環境。本番と同じように固めましょう。
+
+{% caps() %}
+- SAST
+- SCA
+- シークレット管理
+- IAST
+{% endcaps %}
+
+## 実践では
+
+すべてのプッシュとプルリクエストで走る、最小限のセキュリティジョブです。
+
+{% raw %}
+```yaml
+name: security
+on: [push, pull_request]
+
+jobs:
+  scan:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Scan for leaked secrets
+        uses: gitleaks/gitleaks-action@v2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Static analysis
+        run: |
+          pip install semgrep
+          semgrep ci --config auto
+```
+{% endraw %}
+
+まずはデフォルトで始めて、ルールをコードベースに合わせて調整していきましょう。うるさいスキャナーは無視され、静かで正確なスキャナーはチームの一員になります。
+
+{% alert(type="warning", title="ビルドを落とそう") %}警告を出すだけの検出結果は、みんながスクロールで読み飛ばす検出結果です。クリティカルはビルドを落とすようにしましょう。{% endalert %}
+
+## さらに読む
+
+{% resources() %}
+- [SonarQubeでソースコードをSASTスキャン](https://medium.com/nycdev/scan-your-source-code-for-vulnerabilities-using-static-application-security-testing-sast-with-5f8ee1fdf9aa)
+- [GitHubのサードパーティコードスキャンツール](https://github.blog/2020-10-05-announcing-third-party-code-scanning-tools-static-analysis-and-developer-security-training/)
+- [OWASP DSOVSが定義するSASTレベル](https://github.com/OWASP/www-project-devsecops-verification-standard/blob/main/document/CODE-004-Static-Application-Security-Testing-SAST.md)
+- [GitHub Actionsのセキュリティ強化ガイド](https://docs.github.com/en/actions/security-guides/security-hardening-for-github-actions)
+- [GitHub Actionsセキュリティベストプラクティス (Salesforce)](https://engineering.salesforce.com/github-actions-security-best-practices-b8f9df5c75f5)
+- [GitHub Actionsセキュリティチートシート (GitGuardian)](https://blog.gitguardian.com/github-actions-security-cheat-sheet/)
+- [Securing Jenkins](https://www.jenkins.io/doc/book/security/)
+- [SANSによるJenkins CIシステムのセキュリティ](https://www.sans.org/white-papers/36872/)
+{% endresources %}