授業のプロジェクトは、ZIP をダウンロードして、正しいフォルダを探して、依存関係を入れて、どのファイルを開けばよいか推測しないと見られない状態では、まだ提出しやすい形とは言えません。
多くの学生プロジェクトでは、まず必要なのは「開けるリンク」です。
すべての課題に本格的なクラウド構成が必要なわけではありません。大学、専門学校、ブートキャンプ、ハッカソンのプロジェクトには、静的ファイルだけで公開できるものが多くあります。HTML、CSS、JavaScript、Vite、React、Vue、Astro、小さなブラウザゲーム、UI 練習、ランディングページ、ダッシュボード、ポートフォリオ用の実験などです。最終的なファイルをブラウザだけで実行できるなら、静的サイトとして公開できる可能性が高いです。
学生プロジェクトのホスティングで解決したいこと
目的は、単にファイルをどこかに置くことではありません。提出先やレビュー相手が、迷わず確認できる状態にすることです。
| 必要なこと | 実際に意味すること |
|---|---|
| すぐ開ける | 評価者は ZIP ではなく URL をクリックするだけでよい。 |
| アセットが揃っている | CSS、画像、フォント、JavaScript、JSON、生成されたフォルダが公開 URL から読み込まれる。 |
| 自分のPC以外で確認できる | スマホや別ブラウザでも動作する。 |
| 提出内容が伝わる | ホームページに、何を見ればよいかが書かれている。 |
| ポートフォリオに再利用できる | 同じリンクを履歴書、ポートフォリオ、GitHub README、インターン応募に使える。 |
| 壊れた更新から戻せる | 公開リンクを変えずに、修正版のアップロードやロールバックができる。 |
「自分の環境では動く」だけでは足りません。他の人の環境で開けることが大事です。
どんなプロジェクトが向いているか
静的ホスティングに向いているのは、最終成果物がブラウザで直接読み込めるファイルになっているプロジェクトです。
| プロジェクト | 公開するもの | 注意点 |
|---|---|---|
| HTML/CSS 課題 | index.html を含むフォルダ | 画像、フォント、CSS フォルダも含める。 |
| JavaScript 練習 | HTML、JS、CSS、アセットを含むフォルダ | 電卓、ゲーム、クイズ、Todo、グラフ、UI 練習に向く。 |
| Vite プロジェクト | npm run build 後の dist | 公開リンク用なら src ではなく build 出力を使う。 |
| React プロジェクト | build 出力フォルダ | 公開 URL ではコンパイル済みの静的ファイルを配信する。 |
| Vue プロジェクト | build 後の dist | 公開後にルートとアセットパスを確認する。 |
| 静的ポートフォリオ | ポートフォリオのフォルダまたは build 出力 | スクリーンショットだけでなく説明も置く。 |
| ハッカソンの frontend | 静的 build 出力 | API や backend が必要なら別にホストする。 |
静的ホスティングは PHP、Java、Python、Ruby、データベースサーバー、バックグラウンドジョブ、認証サーバーを実行しません。frontend は静的に公開できますが、backend やデータベースは別の場所で動かす必要があります。
GitHub Pages から始める人が多い理由
授業で GitHub を使っている場合、GitHub Pages は自然な選択肢です。GitHub の日本語ドキュメントでも、自分自身、organization、プロジェクトに関する Web サイトを GitHub のリポジトリから直接ホストできると説明されています。コードがすでにリポジトリで整理されているプロジェクトなら、よく合います。
ただし、提出までの最短ルートが常に repository-first とは限りません。
- テンプレート、AI 生成物、デザインツールの出力フォルダから始まっている。
- リポジトリを整える前に、まず提出用リンクが必要。
- 最初のデモでは、コミット履歴より動く画面が重要。
- 最終的な公開フォルダは build 後に作られ、source フォルダとは別物。
- チームメンバーが repository の所有者でなくても公開したい。
Cloudflare Pages も、事前に build したアセットやローカルPCからのアップロードを Direct Upload として案内しています。学生プロジェクトでは、まず公開リンクを作り、必要になったら後から運用を整える流れが合うことも多いです。
課題提出向けの基本フロー
信頼できるリンクを作るために、必要最小限の手順で進めます。
- ローカルでプロジェクトを完成させる。
- 実際に公開するフォルダを特定する。
- フォルダ全体または ZIP をアップロードする。
- 生成された HTTPS リンクをプライベートウィンドウで開く。
- スマホや別ブラウザで確認する。
- 課題提出フォームにリンクを貼る。
- 見せられる内容なら、後でポートフォリオにも使う。
一番間違えやすいのは 2 です。違うフォルダをアップロードすると、ほぼ確実にどこかが壊れます。
| Stack | 通常公開するもの | 通常避けるもの |
|---|---|---|
| HTML/CSS/JS | index.html を含むフォルダ | アセットなしの index.html だけ |
| Vite | dist | src, node_modules |
| React static build | build または framework 出力 | build 前の source フォルダ |
| Vue | dist | source だけの project root |
| Astro | dist | build 前の content/source フォルダ |
| Next static export | out | Node プロセスが必要なアプリ |
迷ったら、index.html とコンパイル済みアセットが入っているフォルダを探します。アップロード前に、静的プレビューで一度開くと安全です。
ホームページに書くべきこと
プロジェクトリンクを開いた人が、何を見ればよいか迷わないようにします。
冒頭に短い説明を置きます。
| 項目 | 例 |
|---|---|
| プロジェクト名 | Weather Dashboard |
| 授業・イベント | Frontend final project, 2026 |
| 技術スタック | HTML, CSS, JavaScript, OpenWeather API |
| 見てほしい点 | 都市検索、単位切り替え、レスポンシブ表示 |
| 既知の制限 | デモ用 API key に制限あり。アカウント機能なし。 |
これは余計な説明ではありません。評価者が正しい動作を確認しやすくなり、後で採用担当者が見たときにもプロジェクトの意図が伝わります。
提出前によくある失敗
壊れたリンクの多くは、単純な原因で起きます。
| 症状 | よくある原因 | 対処 |
|---|---|---|
| ホームページが 404 | 公開 root に index.html がない | index.html を直接含むフォルダをアップロードする。 |
| CSS が読み込まれない | ローカルパスや絶対パスを使っている | 相対パスに直し、CSS フォルダも含める。 |
| 画像がローカルでは出るが online では出ない | 画像フォルダ不足、または大文字小文字の違い | すべてのアセットを含め、Logo.png と logo.png を確認する。 |
| ボタンが動かない | JavaScript ファイルが見つかっていない | 公開 URL で devtools を開き、失敗した request を見る。 |
| React/Vue の route が 404 | 静的 routing の準備がない | 必要に応じて hash routing や fallback を使う。 |
| API call が失敗する | backend 未公開、CORS、または localhost が残っている | localhost を実際の API URL に変え、backend は別にホストする。 |
一番早い確認は、ローカルファイルを一度も見ていない端末で公開リンクを開くことです。
Backend があるプロジェクトの場合
すべての課題が静的とは限りません。Express、Flask、Django、Spring Boot、PHP、Firebase、Supabase、データベース、ログイン機能を使うものもあります。
その場合は、層を分けて考えます。
| 層 | 置き場所 |
|---|---|
| 静的 frontend | DeployPages または別の static host |
| API server | backend host、serverless platform、授業指定の環境 |
| Database | managed database または授業用環境 |
| Secret | backend の環境変数。公開 frontend ファイルには置かない。 |
.env、private key、database credential、授業で配られた secret を、公開される静的サイトに含めないでください。frontend のファイルはブラウザから読めます。
ポートフォリオで使えるリンクにする
授業課題は、見せ方を整えれば実績になります。
授業外で共有する前に、次を追加します。
- 何を作ったか、どんな問題を解いたかの短い説明。
- 自分が担当した範囲。
- 必要な場合だけスクリーンショット。
- 見せられる状態なら source code へのリンク。
- デモデータ、無効化した機能、API 制限の説明。
- 本格的に見せるなら、後で custom domain。
課題を完成済み SaaS のように見せる必要はありません。具体的で正直な説明のほうが、ずっと信頼されます。
DeployPages が使える場面
DeployPages は、まず動く HTTPS リンクが必要なときに向いています。
ブラウザから、静的フォルダ、ZIP、HTML プロジェクト、frontend build 出力、AI 生成ページ、PDF、小さなゲーム、履歴書ページ、ポートフォリオ実験を公開できます。プロジェクトが重要になったら、同じ流れで custom domains、analytics、password protection、rollback、CLI deploys に進めます。
学生プロジェクトなら、まず student hosting から始めてください。HTML ファイルや小さなフォルダなら HTML deployment guide がより直接的です。履歴書やポートフォリオ用途なら resume hosting と portfolio hosting も参考になります。
提出前チェックリスト
Moodle、Canvas、Google Classroom、メール、フォームに URL を貼る前に確認します。
index.htmlまたは静的 entry point が公開 root にある。- CSS、JavaScript、画像、フォント、JSON、生成済みアセットが含まれている。
- リンクがプライベートウィンドウで開く。
- リンクがスマホで開く。
- ホームページにプロジェクト、授業、技術スタック、確認ポイントが書かれている。
- secret、token、private data、個人文書が公開ファイルに含まれていない。
- backend 依存がある場合は、別ホストであることを説明している。
- 提出する URL は公開 URL であり、ローカルパスや dashboard URL ではない。
この短い確認だけで、締切直前に時間を失う問題をかなり減らせます。