Astrofy テンプレートを自分仕様のポートフォリオに作り替える

何を作っているか

個人ポートフォリオ兼ブログ（屋号「MiyOps Tech」）です。公開先は me.miyops.tech。GitHub Pages にホストし、withastro/action で main への push 時に自動デプロイしています。

スタックは Astro 4 / TailwindCSS 3 / DaisyUI 4 / MDX、パッケージマネージャは pnpm 9。土台は Astrofy テンプレートを利用しました。

今回は、テンプレートの「借り物」状態から抜け出して自分仕様に作り替え、最初のコンテンツを投入するところまでを進めました。

Astrofy テンプレからの脱却と初回コンテンツ投入として、以下を実施しました。

テンプレの残骸を除去

Header / Footer に残っていたテンプレ作者名「Manuel Ernesto」を「MiyOps Tech」に置換。
robots.txt のサイトマップ URL を astrofy-template.netlify.app から me.miyops.tech に修正。package.json の名前も更新。

日本語化・不要要素の削除

コンテンツの入れ替え

サイドバーに X・メールのリンクを追加。
Demo 投稿3本を削除し、初回記事「このサイトについて」を作成。
projects ページを実プロジェクト（BMICalc）1件に置換。
CV を実際の職務経歴（インフラ / DevOps / SRE 中心）で再構成。ホームの肩書きを「インフラ / DevOps エンジニア」に変更し、CV と整合させた。

今回の技術的な山場は、日本語タイトルの記事を追加した途端にビルドが失敗したことでした。

問題: 日本語タイトルの記事を追加したら pnpm build が失敗。エラーは getStaticPaths() returned an invalid path param: slug。
原因: src/config.ts の GENERATE_SLUG_FROM_TITLE=true により、URL スラッグをタイトルから生成する設定になっていた。生成処理（src/lib/createSlug.ts）が /[^\w-]/g で英数字以外を除去するため、日本語だけのタイトルはスラッグが空になり、ルーティングが壊れていた。
解決: GENERATE_SLUG_FROM_TITLE=false にして、スラッグを記事ファイル名由来に変更。これで、記事ファイル名は英数字ケバブケース（例: k8s-tips.md → /blog/k8s-tips）、タイトルは日本語のまま、という運用ができるようになった。

この記事自体も、ファイル名は英数字・タイトルは日本語という形で書いています。

タイトルとスラッグの扱いを整理したついでに、記事運用そのものも仕組み化しました。

.claude/skills/blog-post: 命名・frontmatter ルールと、全記事を機械チェックする check-posts.mjs。
.claude/skills/write-post: 記事タイプ（検証ログ / 技術解説 / 開発記録 / トラブルシュート / 学びメモ）ごとのテンプレを使い分ける入口スキル。新しい型はテンプレ追加のみで拡張できる。
.claude/agents/blog-writer: ラフ素材から記事下書きを自律起草するエージェント（この記事もこれで起草した）。