「自分のURLが、世界につながった」─ GitHub Pagesで作品を公開した夜

2026年7月29日（火）19時、未来クライム第4期アドバンスコースの第4回を開催しました。前回はGitとGitHubを使って「コードを保存し、送り出す」ところまで進みました。今回はその続き。コミットとプッシュの操作を復習したあと、GitHub Pagesを使って自分の作品をインターネット上に公開するところまで一気に駆け抜けます。

振り返り ─ 手を動かして思い出す

まずは前回の内容のおさらいから。コミットは「セーブ」、プッシュは「アップロード」、GitHubは「インターネット上の保管庫」、そしてGitHub Pagesは「Webサイトとして公開するサービス」。4つのキーワードを確認したあと、ブラウザでGitHubを開いてリポジトリにファイルがちゃんと残っているか、VSCodeの左下に「main」と表示されているかをチェックしました。

確認が終わったら、すぐに手を動かすパートへ。

編集→コミット→プッシュ ─ 基本サイクルを身体で覚える

index.htmlの内容を少しだけ変えてみる練習に入りました。名前や職業、一言メッセージなど、好きなところを変更して保存。ファイル名の横に「M（Modified：変更あり）」のマークが出たら、ステージング→コミットメッセージ入力→コミット→プッシュ。GitHubのリポジトリページを再読み込みすると、自分が書いたコミットメッセージがファイル名の横に表示されています。

「この『編集→コミット→プッシュ→確認』のサイクルが、これからずっと使う基本の流れになります」。説明を何度聞くよりも、手を動かして繰り返すことで身体に覚えさせる。この時間がそのための練習でした。

GitHub Pages ─ 設定3クリックで世界に公開

休憩を挟んで、いよいよ今日のメインイベント。GitHubのリポジトリ画面から「Settings」タブを開き、左メニューから「Pages」を選択。「Branch」のドロップダウンを「None」から「main」に変えて「Save」をクリック。やったことはこれだけです。

1〜2分待ってページを再読み込みすると、画面上部に「Your site is live at …」というメッセージとURLが表示されました。そのURLをクリックすると、これまで自分のパソコンの中でしか見られなかった自己紹介カードが、インターネット上に公開された状態で表示されています。

「このURL、スマホでも見てみてください」。受講生がスマートフォンでアクセスすると、同じページがそこにも表示される。パソコンの中にあったものが、本当に世界のどこからでもアクセスできる状態になっていることを、自分の目で確認できた瞬間でした。

公開URLをDiscordのチャンネルに貼り付けて共有。お互いの作品を見合うことで、「自分が作ったものが人に見てもらえる」という体験が生まれました。

さらに、公開後にファイルを編集してコミット＆プッシュすると、1〜2分後にはGitHub PagesのURLに変更が反映されることも確認。「ファイルを編集→コミット→プッシュ→サイトに自動反映」という開発サイクルが、ここで完成しました。

Claude ─ 次回から始まる新しいフェーズ

GitHub Pagesでの公開が全員完了したあと、次回から導入するAIツール「Claude」についての案内を行いました。

体験会から第4回までの4回分は、すべて無料のツールだけで進めてきました。次回の第5回からは、Claudeの有料プラン（Proプラン）を使った開発に入ります。最大の理由は「Claude Code」という開発ツールが使えるようになること。これまではAIにコードを生成してもらい、それをコピー＆ペーストしていましたが、Claude Codeを使うとAIが直接ファイルを作成・編集してくれます。コピペ不要の開発体験が、次回のテーマです。

月額プランと年間プランの違い、支払い方法、解約の手順など、登録に必要な情報をまとめた教材を共有し、次回までに各自で登録を完了するよう案内しました。「わからないことがあればDiscordで聞いてください。スタッフがサポートします」。

これからの道のり

次回は2026年8月5日（水）19:00から。ここからは月1回ペースの開催に移行します。第5回ではClaude Codeの導入と、自分の業務課題を定義するワークを行います。

体験会でAIに触れ、第1〜2回でコードを書き、第3回でGitHubに送り出し、第4回で世界に公開した。ここまでが「無料で体験するPhase」の完了です。次回からは有料AIの力を借りて、「自分の仕事の困りごとを解決するツール」を作るPhaseに入ります。

コース全体の流れについては、体験会レポートをご覧ください。

未来クライムとは

なりたい自分になる。やりたい仕事を、やり続ける。そんな未来を手に入れるためには、険しい山を登るように、たくさんの学びや出会い、そして挑戦が必要です。

未来クライムは、「なりたい自分」を目指すみなさんを支えるために、出会いと学びの場を届けていきます。

第4期目を迎えた今年度の「未来クライム ～PROGRAMMING ACADEMY BIBAI～」でも、美唄市からIT人材を世に送り出していくために、生成AIやプログラミングを継続的に学べる場を提供していきます。

小さな一歩の積み重ねが、やがて大きな成長につながります。仲間とともに学び合いながら、生成AIとプログラミングの世界を、一歩ずつ一緒に進んでいきましょう！