ソースに絡まるエスカルゴ

貧弱プログラマの外部記憶装置です。

【Bitbucket】Bitbucketで静的ページを公開する方法

 htmlとjavascriptcssだけでちょっとした静的ページを作ってそれを公開したい場合があるかと思います。そのためにわざわざサーバを契約したりするのは面倒なので何か簡単に公開する方法はないかと調べていたら、BitbucketというGitのクラウドサービスのとある機能を使えばGitのリモートリポジトリにpushするだけで公開したり、更新したりできることがわかりました。

 なので今回はタイトルにある通り「Bitbucketで静的ページを公開する方法」になります。


 では、始めます。


0:注意点
 今回のBitbucketでの静的ページの公開は「公開範囲を一切設定できない」ため、プライベートにしたり特定のアカウントのみに公開ということができません。常に誰でも公開ページにアクセスできる状態になります。またプロジェクトやワークスペース、リモートリポジトリをプライベートに設定しても公開ページを右クリックしてソースを見ることなどは普通にできるので、公にしたくないようなものはこの方法を取らないようにしてください。


1:Bitbucketのアカウントを作成する
 まず最初にBitbucketのアカウントを作成する必要があります。ちなみにBitbucketは少人数であれば無料で使うことができます。

 以下の公式ページにアクセスしてアカウントを作成します。

 ページ中央にある「無料で入手する」をクリックします。
f:id:rikoubou:20210909154632p:plain

 すると以下のような画面が表示されるので、すでにあるGoogleなどのアカウントをそのまま紐づけるか、メールアドレスなどから新規で作成します。
f:id:rikoubou:20210909154718p:plain

 あとは画面の指示に従っていけば認証メールが届くので、そのメールの指示通りにしてログインできればアカウントが作成できています。

 詳しくは参考資料にも挙げている以下のページ様を参照してください。


2:Bitbucketに公開用のワークスペースを作成する
 アカウントが作成できたので、実際に静的ページを公開する準備をしていきます。静的ページを公開するにはまずは公開用のワークスペースを作成する必要があります。

 Bitbucketにログインすると以下のような画面になっていると思います。
f:id:rikoubou:20210909155553p:plain

 画面の左下の丸いアイコンをクリックして「All workspace」をクリックします。
f:id:rikoubou:20210909155940p:plain

 ワークスペースの一覧画面が表示されるので右上にある「Create workspace」をクリックします。
f:id:rikoubou:20210909160158p:plain

 ワークスペースの作成画面になるので、ワークスペース名を入力して「Create」ボタンをクリックします(ワークスペース名は公開時のURLに含まれる文字列になるため注意して命名してください)。
f:id:rikoubou:20210909160724p:plain

 ちなみにすでに使われているワークスペース名だと以下のようにエラーとなるので、頑張って使われていないワークスペース名を探して入力してください。
f:id:rikoubou:20210909160958p:plain

 正常にワークスペースが作成できると、以下のように空のワークスペースが作成されます。
f:id:rikoubou:20210909161036p:plain

 空のワークスペースが作成できたら、次はプロジェクトを作成します。


3:プロジェクトを作成する
 空のワークスペースの画面左側にあるメニューから「プロジェクト」を選択してプロジェクト画面を表示し「プロジェクト作成」をクリックします。
f:id:rikoubou:20210909161515p:plain

 各種項目を入力して「プロジェクト作成」をクリックします。
f:id:rikoubou:20210909162235p:plain

 先ほどのワークスペースにプロジェクトが作成されます。
f:id:rikoubou:20210909162421p:plain


4:リモートリポジトリを作成する
 公開するソースをpushするためのリモートリポジトリを作成していきます。

リポジトリの作成」をクリックします。
f:id:rikoubou:20210909162556p:plain

 各種情報を入力して「リポジトリの作成」をクリックします。この時のリポジトリ名には必ず「{ワークスペース名}.bitbucket.io」に設定してください。またこの時のリポジトリ名が公開時のURLになるので注意して命名してください。
f:id:rikoubou:20210909162825p:plain

 リポジトリが作成できると以下のような画面になります。
f:id:rikoubou:20210909163503p:plain

 このままでは.gitignoreとREADME.mdしかない中身のないリポジトリなので、ここに公開するソースを追加でpushします。


5:リモートリポジトリに公開するソースコードをpushする
 ここまでで公開する手順は終わっているのであとは普通に静的ページのソースコードをリモートブランチにpushするだけです。

 リポジトリ画面の右上にある「クローンの作成」をクリックします。
f:id:rikoubou:20210909164003p:plain

 gitのクローンコマンドが表示されるのでコピーしてローカルで実行し、クローンします。ちなみに右上のプルダウンからHTTPSでのクローンもできます。
f:id:rikoubou:20210909164146p:plain

 クローンできたら公開用ページとして「index.html」を新規に作成します。今回はテストなので以下のようにただ「web-test-hello」という文字列を表示させるだけにしています。

・index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>web-test-hello</title>
</head>
<body>
web-test-hello
</body>
</html>


 あとは普通のGitリポジトリを扱うのと同じようにリモートリポジトリにpushします。

 ちゃんとリモートリポジトリにpushできていることを確認します。
f:id:rikoubou:20210909164816p:plain

 これでindex.htmlが公開されている状態になりました。


6:実際に公開できているかを確認する
 4で公開URLが「{ワークスペース名}.bitbucket.io」になっていると記述しました。なのでそのURLにアクセスして確認してみます。

 今回ワークスペース名は「web-test-hello」としているのでURLは以下のようになります。

 実際にこのURLにアクセスしてみると、以下のようにindex.htmlの内容が表示されていることが確認できます。
f:id:rikoubou:20210909165321p:plain


 以上がBitbucketで静的ページを公開する方法です。

 若干手順が多いですが、基本的に一度設定してしまえばあとはGitのリモートリポジトリにpushするだけで更新ができるのでかなり楽だと思います。ちょっとしたhtmlとjavascriptで作ったようなページであればこの方法で公開するのが一番手っ取り早くてメンテもしやすいのかな、など思ったりもします。

 ただ冒頭にも書きましたが、この静的ページは基本的にフルオープンになるのでそこは注意して使うようにしてください。

 また似たような機能がGithubにもあるようですが、そっちは試してないのでいつか試してみたいですね。


おまけ
 かなり前に作ったものをこのBitbucketの静的ページとして公開しました。ソースコードも見直して書き直したりしてるので遊ぶ人は遊んでみてください。


・参考資料