English · 日本語
Claude MAX ユーザーが、AI コーディングを実際に使いながら学んだことを記録する技術ブログ。 プログラマーではない人間が、趣味の AI コーディングで実際にハマったこと・うまくいったこと・失敗したことを、Copilot → Cursor → Claude Code と渡り歩きながらそのまま書き残している。このリポジトリはそのソース — GitHub Pages へ自動デプロイされる Hugo 静的サイト。
ライブサイト → https://blog.kitepon.dev/
プログラマーでは ない 人間が、趣味で AI コーディングをしながら書いているブログのソースです。開発スタイルは「アーキテクト型」— 設計と方針は自分で決めて、実装は AI に任せてレビューする。コードを直接手で書くタイプではありません。記事は日本語で、実運用ベースの内容です。
- GitHub Copilot → Cursor → VS Code + Claude Code + MAX プラン に落ち着くまでの実体験
- メモリシステム、トークン節約、サーバー管理、自作アプリのリリースなど、実運用ベースの記事
- 実際に毎日使ってみないと出てこない、ハマりどころ・うまくいったこと・失敗の正直な記録
記事は content/post/ 以下に Markdown で置いてあり、main ブランチへの push で GitHub Actions が Hugo でビルドして GitHub Pages へ自動デプロイします。
| 項目 | 内容 |
|---|---|
| 静的サイトジェネレーター | Hugo（extended） |
| テーマ | 自前（layouts/ + assets/ に内蔵。外部テーマ不使用） |
| ホスティング | GitHub Pages |
| デプロイ | GitHub Actions（.github/workflows/deploy.yml） |
| 言語 | 日本語 |
flowchart LR
A["記事を書く<br/>content/post/<slug>/index.md"] -->|git push main| B["GitHub Actions<br/>(deploy.yml)"]
B --> C["Setup Hugo<br/>extended"]
C --> D["hugo --minify<br/>→ public/"]
D --> E["upload-pages-artifact"]
E --> F["deploy-pages"]
F --> G(["GitHub Pages<br/>blog.kitepon.dev"])
draft: false の記事だけが本番に公開されます。
Hugo extended が必要です（インストール手順）。
# クローン（テーマ submodule は不要 — テーマはこのリポジトリ内）
git clone https://github.com/kitepon-rgb/WebAICoding.git
cd WebAICoding
# 開発サーバーを起動（http://localhost:1313/）
hugo server
# 本番ビルド（出力は public/）
hugo --minify# 新しい記事の雛形を作成
hugo new content/post/your-slug/index.mdfrontmatter の例（既存記事に合わせる）:
---
title: "記事タイトル"
date: 2026-06-03
draft: false
description: "一覧やSNSカードに出る要約"
tags: ["Claude Code", "AI Coding"]
cover:
image: "cover.png"
---各記事には cover.png（1250×500）が必要です。リポジトリ内のツールで生成します（OS非依存＝どのマシンのクローンでも同じ画像になる）:
cd tools/cover
npm ci && npx playwright install chromium # 初回のみ
node generate-cover.js "タイトル1行目" "タイトル2行目" "../../content/post/your-slug/cover.png"デザイン仕様や詳細は tools/cover/README.md を参照。
draft: false の記事だけが本番に公開されます。main に push すると自動でデプロイされます。
content/ 記事（Markdown ページバンドル）と About ページ
layouts/ 自前テーマ — baseof / list / single
_default/_markup/render-image.html （本文画像を <figure> ＋キャプションで包む）
shortcodes/linkcard.html （OGP 風リンクプレビューカード）
assets/css/ スタイルシート（ビルド時に fingerprint ＝キャッシュ破棄）
static/ ファビコン・OG 画像などの静的ファイル
hugo.toml サイト設定
tools/cover/ カバー画像ジェネレータ（Playwright → 1250×500 PNG）
各記事は本文に図・スクショ・図解・表・リンクカードを配置しています。本文画像はすべて実物ソース（アプリのスクショ、ブランド調の HTML→PNG 図版、生成イラスト）由来で、モデルが手描きしたものは使わず、フル画質で配信しています。
MIT License — © 2026 kitepon-rgb