Bitbucketのホームページ機能 その2

Bitbucketには「http://ユーザー名.bitbucket.org/」というアドレスでユーザーのホームページを公開できるホームページ(ウェブサイト)機能があります。前回から引き続いて、ホームページ機能の使い方の手順を紹介したいと思います。

※Bitbucketのアカウント作成がまだの場合は前回の記事も参考になればと思います。

※追記※
公開されるホームページのアドレスが「http://ユーザー名.bitbucket.org/」から「https://ユーザー名.bitbucket.io/」に変更されました。この記事は古いアドレスのままになっていますので、適宜読み替えていただければと思います。

ホームページ(ウェブサイト)の公開手順

リポジトリの作成

ホームページ機能を使うには、まず「ユーザー名.bitbucket.org」というリポジトリを作成する必要があります。

1. Bitbucket.orgにアクセスして、ログインします。

ホームページの公開手順 その1

ホームページの公開手順 その2

2. Dashboardページが表示されますので、「リポジトリの作成」をクリックします。

ホームページの公開手順 その3

3. Repository nameに「ユーザー名.bitbucket.org」と入力して「リポジトリの作成」ボタンをクリックします。

ホームページの公開手順 その4

※「ユーザー名」は登録したユーザー名に読み替えてください。

これでリポジトリが作成できました。

Git

続いてファイルをアップロードしたいところですが、その操作はGitを使って行います。Gitをインストールしていない場合は「Git for Windows」をインストールしてください。(使い慣れたソフトウェアがある場合はそちらで問題ありません。)

Git – Downloads
https://git-scm.com/downloads

git-scm.com

Git 2.8.1 Setup

初期設定と最初のページのアップロード

ここではGit for Windowsでの操作を解説しますが、他のソフトウェアを使う場合も操作は同様ですので、適宜読み替えてください。

1. まず、エクスプローラーで適当な場所に新規フォルダーを作成してください。作成できたら、右クリックしてGit bashを起動します。

ホームページの公開手順 その5

ホームページの公開手順 その6

2. Git bashが起動できたら、次のようにコマンドを入力します。

以下は、Gitの初期設定、公開するファイル(index.html)の作成、アップロードまでを行うコマンドになります。

$ git init
Initialized empty Git repository in /path/to/dir/.git/
$ git remote add origin https://ユーザー名@bitbucket.org/ユーザー名/ユーザー名.bitbucket.org.git
$ echo "Hello, Bitbucket!" > index.html
$ git add index.html
$ git commit -m "Initial commit"
[master (root-commit) 0c2bc01] Initial commit
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
$ git push -u origin master
Password for 'https://ユーザー名@bitbucket.org': ********
Counting objects: 3, done.
Writing objects: 100% (3/3), 232 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://ユーザー名@bitbucket.org/ユーザー名/ユーザー名.bitbucket.org.git
 * [new branch]      master -> master
Branch master set up to track remote branch master from origin.

※ 「ユーザー名」は登録したユーザー名、「********」は登録したパスワードに読み替えてください。

4. 適当なブラウザから「http://ユーザー名.bitbucket.org/」にアクセスしてみてください。「Hello, Bitbucket!」と表示されたら、作業は無事完了です。

ホームページの公開手順 その7

ホームページの更新

実際のホームページはメモ帳やお気に入りのエディターで作る人もいると思いますし、別のツールを使って作成する人もいると思います。どちらの場合でも、アップロードしたいファイル一式を上の手順で作成したフォルダーにコピーして、gitで以下のようなコマンドを実行します。

$ git add -A
$ git commit -m "comment"
$ git push

※”comment”の部分は更新内容を表すコメントに置き変えてください。

これで必要なファイル一式がアップロードされます。

.gitignore(任意)

フォルダーにコピーしたファイルの中にアップロードしたくないファイルが含まれている場合は、「.gitignore」ファイルを作成することでアップロードから除外することができます。

初期設定と最初のページのアップロードで作成したフォルダー直下に「.gitignore」というドットから始まるファイルを作成して、次のように除外したいファイルを記入してください。

log/
*.pl

※「logフォルダー」と拡張子が「.pl」のファイルを除外するサンプルになります。

ちなみに、メモ帳を使う場合、ドットから始まるファイルはファイル名を「””」で囲むと作成できます。

名前を付けて保存 - メモ帳

まとめ

駆け足気味になってしまいましたが、Bitbucketのホームページ機能の使い方紹介は以上となります。

Gitの部分で大幅に説明を省略してしまいましたが、興味が出てきたら入門書籍や入門サイトで勉強してみてください。また、コマンドラインでの操作に慣れない場合はGUIのツールもありますので、そちらもおすすめです。


BitbucketではGitの他にMercurialを使うこともできます。

Bitbucketのホームページ機能 その1

Bitbucketをご存知でしょうか?Githubと並んで有名な無料で使えるソースコード管理のウェブサービスです。

Bitbucket — The Git solution for professional teams
https://bitbucket.org/

ソースコード管理というとソフトウェア開発が真っ先に思い浮びますが、ホームページ作成でも使ってみると案外便利です。ソースコード管理についてはまたの機会に記事にしたいと思いますので、今回はBitbucketのホームページ(ウェブサイト)機能について紹介したいと思います。

ホームページ(ウェブサイト)機能

ひとことで説明すると、HTMLや画像ファイル等をホスティングできるウェブサービスになります。CGIやデータベースなどは使えませんがスタティックサイトであれば普通のレンタルサーバーと同様な機能を備えています。

そこで、今回と次回に渡ってBitbucketのアカウント作成からホームページの公開までの手順を簡単に紹介してみようと思います。

Bitbucketアカウントの作成手順

1. まずは、Bitcuketのサイトにアクセスして、「Get started for free」のボタンをクリックします。

Bitbucketアカウントの作成手順 その1

2. メールアドレスを入力して、「Continue」のボタンをクリックします。

Bitbucketアカウントの作成手順 その2

3. 名前とパスワードを入力し、「I’m not a robot」のチェックボックスをクリックします。

Bitbucketアカウントの作成手順 その3

4. CAPTCHA(キャプチャ)が表示されますので、指示に従って認証します。

Bitbucketアカウントの作成手順 その4

5. 認証に成功したら、「Continue」のボタンをクリックします。

Bitbucketアカウントの作成手順 その5

6. メールアドレスの確認として、登録したアドレスにメールが届きますので、指定されたURLにアクセスします。

Bitbucketアカウントの作成手順 その6

Bitbucketアカウントの作成手順 その7

7. ユーザー名を入力する画面になりますので、希望するユーザー名を入力して、「Continue」をクリックします。(ユーザー名は後からでも変更可能です。)

Bitbucketアカウントの作成手順 その8

以上で、アカウント作成は完了です。

Bitbucketの設定(任意)

名前の公開・非公開

Bitbucketのデフォルトの設定では、登録した名前が公開されれる設定になっています。

公開にした場合のプロフィールページ
公開にした場合のプロフィールページ

非公開にしたい場合は、次のように設定します。

1. Dashboardページ右上のアイコンをクリックして、「Bitbucket settings」をクリックします。

Bitbucketの設定 その2

2. デフォルトでは「Private Profile」のチェックがオフになっています。これをオンの状態にして、「Update profile」をクリックすると非公開の設定になります。

Bitbucketの設定 その3

非公開にした場合のプロフィールページ
非公開にした場合のプロフィールページ

日本語表示の設定

Bitbucketは基本的に英語のサイトになりますが、ベータ版として(一部)日本語表示にも対応しています。

日本語表示に変更したい場合は、「Language」を「Japanese」に設定し「Update profile」をクリックしてください。

Bitbucketの設定 その5

今回はここまでです。
次回はホームページ公開の手順を紹介したいと思います。


ツールやアプリケーションを作っている人は、Bitbucketでソースコード管理機能を使いながら、そのプロジェクトページもBitbucketで公開できたりと、とても便利です。