プログラミング知識ゼロの13歳が、AIと一緒にブログを1から作った話

GitHubって何?から始まった中学1年生が、Claude Code(AI)と一緒にAstro + Cloudflare Pagesでブログを完全無料で構築した全記録。

プログラミング知識ゼロの13歳が、AIと一緒にブログを1から作った話

きっかけは、お母さんだった

うちのお母さんは建築・CAD系の仕事をしていて、最近「AIで仕事を自動化する」っていうテーマでブログを始めようとしてた。

それを横で見てたら、自分もやりたくなった。

最初は「はてなブログでいいかな」って思ってたんだけど、お母さんと一緒にClaude Code(AI)と話してるうちに「え、自分で1から作れるの?」ってなって。

だったら1から作りたい。 その方がかっこいいし、勉強になるし。

使った技術(全部無料!)

  • Astro --- 静的サイトジェネレーター(ブログ向き)
  • Cloudflare Pages --- ホスティング(無料で世界に公開できる)
  • Sveltia CMS --- 記事をブラウザから書ける管理画面
  • GitHub --- コードを保存する場所

全部合わせて 0円。中学生の財布にも優しい。

GitHubって何?からのスタート

正直に言います。最初、GitHubが何か全然わかってなかった。

「プログラマーが使うSNSみたいなもの」って説明されて、「あー、コードのInstagramね」って理解した(たぶん違う)。

アカウントを作って、リポジトリっていうフォルダみたいなものを作って。ここまではなんとかなった。

Node.jsで最初のピンチ

次にNode.jsっていうのをインストールしないといけなかったんだけど、ターミナルに打ち込んだら:

node --version
command not found: node

は???

めちゃくちゃ焦った。でもAIが「まだインストールしてないだけだよ」って教えてくれて、Node.jsの公式サイトからダウンロードしてインストールした。

これだけ。なんだ、簡単じゃんって思った(さっきの焦りは何だったのか)。

Astroプロジェクト作成 --- ロケット発射!

いよいよAstroのプロジェクトを作る。ターミナルに打ち込む:

npm create astro@latest

なんか宇宙っぽい画面が出てきて、ロケットが発射されたみたいな演出があった。テンション上がった。

テンプレートを選んで、いくつか質問に答えるだけで、数秒で土台が完成。

AIがデザインを全部やってくれた

ここからがすごかった。Claude Codeに「中学生が投資とかAIについて書くブログ」って伝えたら、デザインを全部作ってくれた。

  • ヘッダーのデザイン
  • 記事一覧のレイアウト
  • カテゴリーページ
  • レスポンシブ対応(スマホでも見やすい)

自分がやったのは「もうちょっと色変えて」とか「カテゴリー増やして」とか言うだけ。プログラミングの知識ゼロでもブログができていく。これがAIの力かと思った。

カテゴリーは5つ

自分の興味に合わせて5つのカテゴリーを作った:

  1. AI活用 --- ChatGPTとかClaudeとか、実際に使ってみた話
  2. 投資 --- 13歳なりに勉強してること
  3. ゲーム --- ただの攻略じゃなくて、考察も入れたい
  4. 料理 --- うどんとかチュロス、食べるのが好き
  5. ガジェット --- 気になるデバイスとか

学んだこと

今日1日で学んだことをまとめると:

  • ターミナルは怖くない(最初はビビるけど)
  • AIに聞けば大体なんとかなる
  • 無料でもちゃんとしたサイトが作れる
  • 「わからない」は恥ずかしくない、スタート地点

プログラミングの知識がゼロでも、AIと一緒なら本当にブログが作れた。これは嘘じゃない。

次にやること

次の記事では、Cloudflare Pagesを使ってこのブログを世界に公開する手順をまとめる予定。完全無料で、自分のサイトを全世界に公開する方法を、同じ初心者目線で書く。

あと、Sveltia CMSを設定して、ターミナルを使わなくてもスマホのブラウザから記事が書けるようにする。

13歳、プログラミング知識ゼロ、でもAIがあれば何でもできる気がしてる。

これからこのブログで、AI・投資・ゲーム・料理・ガジェットについて書いていくので、よかったら読んでください!


invest-at-13

← ブログ一覧に戻る