Bitbucket Pagesとは｜Programming Lab

概要

Bitbucket Pages（Bitbucket Cloudの静的サイト機能）は、リポジトリの内容を Webサーバーのドキュメントルートとして配信して、簡単に公開できる仕組みです。:contentReference[oaicite:8]{index=8}

公開URL

https://<workspaceID>.bitbucket.io/

用途

ドキュメント / デモ / ポートフォリオ

対応

HTML / CSS / JS / 画像など

非対応

PHP / DB / サーバーサイド処理

補足：このページ（Programming Lab側）はPHPで組んでもOKですが、 Bitbucket Pagesに載せるサイト本体は静的にしてください。

最短手順（5分）

Bitbucket Cloudで新規リポジトリ作成。
リポジトリ名を <workspaceID>.bitbucket.io にする。:contentReference[oaicite:9]{index=9}
ローカルにcloneして、ルート直下に index.html（小文字）を作る。:contentReference[oaicite:10]{index=10}
commitしてpush。
https://<workspaceID>.bitbucket.io にアクセス。

CLI例

git clone https://bitbucket.org/<workspaceID>/<workspaceID>.bitbucket.io.git
cd <workspaceID>.bitbucket.io

# ルートに index.html（小文字）
printf '<!doctype html>\n<html><head><meta charset="utf-8"><title>Hello</title></head><body>Hi</body></html>\n' > index.html

git add .
git commit -m "Add index.html"
git push

注意：Index.html みたいに大文字を混ぜると別ファイル扱いになります。:contentReference[oaicite:11]{index=11}

推奨構成（今回の要件）

Bitbucket Pagesに置く側（静的サイト）のフォルダ構成例です。

<workspaceID>.bitbucket.io/
├─ index.html
├─ assets/
│  ├─ css/
│  │  └─ styles.css
│  └─ js/
│     └─ main.js
└─ images/
   └─ og.png（任意）

index.html（Bitbucket Pagesに置く静的サイト）

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bitbucket Pages Demo</title>
  <meta name="description" content="Bitbucket Pagesで配信する静的サイトのデモ">
  <link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body>
  <header class="site-hero">
    <div class="site-hero__inner">
      <div class="pill">bitbucket.io</div>
      <h1>Bitbucket Pages Demo</h1>
      <p>このサイトは Bitbucket Cloud の静的ホスティングで公開されています。</p>
      <div class="actions">
        <a class="btn" href="#features">特徴</a>
        <a class="btn btn--ghost" href="#files">ファイル構成</a>
      </div>
    </div>
  </header>

  <main class="container">
    <section class="panel" id="features">
      <h2>特徴</h2>
      <ul>
        <li>HTML/CSS/JS/画像などの静的配信に最適</li>
        <li>URLは https://&lt;workspaceID&gt;.bitbucket.io/</li>
        <li>PHPなどサーバー側の実行は不可（静的のみ）</li>
      </ul>
    </section>

    <section class="panel" id="files">
      <h2>ファイル構成</h2>
<pre class="tree"><code>
<workspaceID>.bitbucket.io/
  index.html
  assets/
    css/styles.css
    js/main.js
</code></pre>
    </section>

    <section class="panel">
      <h2>動作チェック</h2>
      <p>下のボタンを押すと、JSでメッセージを表示します。</p>
      <button class="btn" id="helloBtn" type="button">Hello</button>
      <p class="msg" id="msg" aria-live="polite"></p>
    </section>
  </main>

  <footer class="footer">
    <small>&copy; <span id="year"></span> Bitbucket Pages Demo</small>
  </footer>

  <script src="./assets/js/main.js"></script>
</body>
</html>

同一サイト内に「複数の小サイト」を置きたい場合は /subdir/ を切ってそれぞれに index.html を置く運用も可能です。:contentReference[oaicite:12]{index=12}

制限と注意

1ワークスペース＝1サイト（<workspaceID>.bitbucket.io は一個だけ）:contentReference[oaicite:13]{index=13}
HTTPS必須 / Cookie発行不可 などの制約あり:contentReference[oaicite:14]{index=14}
PHPは動かない（Bitbucket Pagesは静的配信）:contentReference[oaicite:15]{index=15}
カスタムドメイン不可という回答がAtlassian Communityで案内されています（記事によって表記が揺れるので公式/コミュニティ情報で判断）。:contentReference[oaicite:16]{index=16}

GitHub Pagesとざっくり比較

項目	Bitbucket Pages（Cloud）	GitHub Pages
URL	`<workspaceID>.bitbucket.io`	`<user>.github.io`
サイト数	原則 1 workspace につき 1つ:contentReference[oaicite:17]{index=17}	複数運用しやすい
対象	チーム/企業向け運用と相性良い	OSS/公開プロジェクトに強い
サーバー実行	不可（静的のみ）:contentReference[oaicite:18]{index=18}	不可（静的のみ）

FAQ

Bitbucket Pagesが表示されない（404/Repository not found）

リポジトリ名が <workspaceID>.bitbucket.io になっているか（綴り/小文字）:contentReference[oaicite:19]{index=19}
ルートに index.html（小文字）があるか:contentReference[oaicite:20]{index=20}
pushが完了しているか

「PHPで作ったサイト」をそのまま置ける？

置けません。Bitbucket Pagesは静的配信なので、PHPはサーバー側で実行されません。:contentReference[oaicite:21]{index=21}
代替は「静的化（HTML書き出し）」や、別ホスティング（VPS/Fly.io/Render等）です。

複数サイトを作りたい

原則「1 workspace 1 site」なので、同じサイト内で /subdir/ を切ってミニサイトを増やすのが現実的です。:contentReference[oaicite:22]{index=22}