個人でAIメディアを作る全体像 技術スタックと立ち上げの流れ
Astro + Vercel + Supabase + Claude Codeの組み合わせで、個人開発者が月数千円以下のコストでAIメディアサイトを作れる。技術選定の理由から公開までの流れを、このサイト自体の構築経験をもとに解説する。
8件の記事
Astro + Vercel + Supabase + Claude Codeの組み合わせで、個人開発者が月数千円以下のコストでAIメディアサイトを作れる。技術選定の理由から公開までの流れを、このサイト自体の構築経験をもとに解説する。
Astroは静的サイトジェネレーターの中でメディア・ブログ向けに最適化されており、Markdownで記事を管理しながら表示速度とSEOを両立できる。ゼロから記事が公開できる状態になるまでの手順を解説する。
Astroでは、メタタグ・OGP・Article JSON-LD・FAQPage構造化データ・sitemap・llms.txtを一度実装すれば、記事を追加するだけで自動適用される仕組みを作れる。実装コードと設計の考え方を解説する。
JAMstackは静的サイト(Markup)にAPIとJavaScriptを組み合わせて動的機能を実現するアーキテクチャだ。Astro + Vercel + SupabaseのスタックでJAMstack的な設計をどう実現するかを解説する。
llms.txtは、ChatGPTやClaudeなどのAIがサイト内容を効率よく読めるよう情報を整理したテキストファイルだ。robots.txtのAI版ともいえる。設置方法と書き方、SEOとの違いを解説する。
ノーコードツール(Webflow・Bubble・Notion)とフルコード(Astro・Next.js)には向き不向きがある。個人開発者が機能・スピード・コスト・拡張性から使い分けを判断するための基準を解説する。
個人開発のメディアサイトに管理ダッシュボードを追加する。アクセスランキング・問い合わせ一覧・環境フラグ管理の3機能をSupabase + Astroで実装する設計と実際のコードを解説する。
静的サイトにページビューカウンターを実装するには、Supabaseのデータベースとクライアントサイドのリクエストを組み合わせる。Astro + Supabaseで実際に動くカウンターを作る手順を解説する。