せっかく作ったWebアプリやサンプルプロジェクト、「動かして満足」で終わっていませんか？ GitHub Pagesを使えば、誰でもカンタンに自分のWebサイトを公開できます。 今回は、Bunでビルドした静的サイトをGitHub Pagesで公開する方法を、できるだけわかりやすく紹介します。
目次
1. GitHub Pagesって何？
ざっくり言うと、GitHubのリポジトリをそのままWebサーバーにできる無料の公開サービスです。
- URLが自動で発行される（
https://ユーザー名.github.io/プロジェクト名/） - 静的ファイル（HTML, CSS, JSなど）をホスティング可能
- 独自ドメインも設定できる
💡無料かつノーサーバーで運用できるのが大きなメリット！
2. Bunで静的サイトをビルドする
Bunで静的ファイルを生成する方法はいくつかありますが、今回は簡単なHTMLとJSの組み合わせで準備します。
プロジェクト構成：
my-site/
├── index.html
├── style.css
├── script.jsindex.html：
<!DOCTYPE html>
<html>
<head><title>Bun Site</title></head>
<body>
<h1>Hello from Bun!</h1>
<script src="script.js"></script>
</body>
</html>script.js：
console.log("サイトが読み込まれました！");3. GitHubにリポジトリを作成＆push
- GitHubで新しいリポジトリを作成（例：
my-bun-site） - ローカルのプロジェクトをGitで管理してpushします：
git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/あなたのユーザー名/my-bun-site.git
git push -u origin main4. GitHub Pagesの設定を有効にする
- リポジトリの[Settings] → [Pages]へ移動
- Branchを
main、フォルダは/(root)を選択 - 保存すると、公開URLが表示されます！
🔔 数分かかることもあるので、反映されるまで少し待ってみましょう
5. うまく表示されないときのチェックポイント
| 状況 | 原因と対策 |
|---|---|
| 404エラーになる | index.html の場所が / 直下にあるか確認 |
| CSSやJSが読み込まれない | 相対パスの記述が正しいかチェック |
| ページが真っ白 | console.logで読み込みチェックしてみる |
まとめ
Bunで作った静的サイトは、GitHub Pagesを使えば誰でも気軽に世界へ公開できます。 しかも完全無料。 今回のような手順を一度体験しておくと、今後のポートフォリオや勉強にも役立つこと間違いなしです！
コメント