こんにちは！スタッフのやまさきです。
弊社では、県内の高等学校においてプログラミング授業の支援を行っています。
今回は、その中で使用している技術について紹介するブログになります。
授業では、生徒が作成した HTML・CSS・JavaScript のコードを、インターネット上で簡単に公開できる仕組みとして GitHub Pages を活用しています。
高校生がチーム開発を進めていく上で、GitHubは欠かせない知識であり、これまでも活用しています。
GitとGitHubの使い方について紹介した記事は、こちらから
ここでは、その基本的な流れをご紹介します。
なぜGitHub Pages？
- 無料で使える
- Webサーバーを準備する必要がない
- コード管理（GitHub）と公開（Pages）が一体化
- 公開用URLが自動で発行される
授業での学習成果を「すぐに外部からアクセスできる形」にできるのは、大きな魅力です。
公開手順
1. リポジトリを作成
GitHub上で新しいリポジトリを作成します。
授業では、Public（公開）リポジトリを選ぶのがおすすめです。
理由は、無料アカウントでGitHub Pagesを利用できるからです。
2. ファイルを準備
- index.html を必ずルートに配置（トップページになる）
- 必要に応じて style.css や script.js を追加
フォルダ例:
index.html
style.css
script.js3. GitHub Pages を有効化
- リポジトリの Settings → Pages を開く
- 「Branch」を main に設定
- フォルダは / (root) を選択し、保存
4. 公開URLを確認
数分後に、
https://ユーザー名.github.io/リポジトリ名/というURLでアクセスできるようになります。
今回のテストサイトは、以下のリンクからアクセスできます。
https://takayukiyamasaki.github.io/shogi-timer/
授業での工夫
- 生徒ごとにリポジトリを作成 → 成果を個別に公開
- 全員のURLをまとめた一覧ページを作ると、発表会や振り返りで便利
- 公開されたページを見合うことで、生徒同士の学び合いにもつながります
まとめ
GitHub Pagesは「作ったWebページを世界に発信できる」体験を、高校生でもすぐに実現できる便利な仕組みです。
授業や探究活動でのアウトプットを社会に届ける第一歩として、積極的に活用していきたいと思います。
コメント