GitBucketの利用について

近年、プログラム開発者やWebデザイナの間では GitHub が公開・情報交換用のハブサイトとして利用されている。広瀬の開講する科目では GitHubと互換性の高いGitBucketを利用する。 本学での学習用に GitBucket サーバを解放しているので、 ここにアカウントを作成しプログラム作成の履歴・プロジェクト管理のために利用する。

アカウント作成

既にアカウントを作った記憶がありパスワードを忘れた場合は広瀬に連絡する。

一度つけたユーザ名は変更できず消せないのでよく考える。

https://www.yatex.org/gitbucket/ にアクセスし、 以下の手順でアカウントを作成する。

  1. 右上の「Sign in」をクリックすると出てくるログインウィンドウから 「Create new account」を選ぶ
  2. 授業で誰だか識別できる名前を英数字のみで入れる
  3. パスワード、フルネーム(ローマ字)、emailアドレスを正確に埋める。
  4. Imageにはできるだけアイコン画像を入れる(後でもよい)

パスワードは1回のみの入力なので誤入力がないよう気をつける。

リポジトリの作成

ログインすると、このサーバで開発されているものの最新ダイジェストが出る。 これがホーム画面である。右上にプラス(+)ボタンと小さなアイコン画像がある。 プラスボタンの脇の▼を押し、

New repository

を選ぶ。

Create a new repository
A repository contains all the files for your project including the revision history. 
Owner                Repository name
[yuuji/ ▼]  /   [                       ]

(*)Public
( )Private

( )Create an empty repository   (デフォルトここだが下にする)
( )Initialize this repository with an empty cmmit
(*)Initialize this repository with a README
( )Copy existing git repository

のように出る。

  1. Ownerの部分は通常個人ユーザ名か、所属するグループ (授業やプロジェクトなどで指定される)を選ぶ。 Ownerにグループを指定すると、同じグループの人が共同作業できる。
  2. Publicは公開してよいもの、Privateは他人には見せないリポジトリとなる。 操作の練習をしたい場合はPrivateリポジトリを作成するとよい。
  3. 最後の選択肢はとりあえず「……… with a README」を選ぶ。

ここでは、リポジトリ操作の練習のため、

で指定し、次に進む。

リポジトリでのファイル編集

既存ファイル編集

既存ファイルは、テキストであればファイル名をクリックし、 鉛筆ボタンで編集できる。 PencilIcon

README.md を編集してみる。 

[(Code)][ Preview ]     ←2つのボタンを切り替えて編集する

編集画面
   :
   :
   :

Commit changes

ここに修正の要点を1行で入れて下の右側Commit changesを押す


[Cancel][Commit changes]

[Commit changes]を押さないと編集は破棄される。

新規ファイル追加

新規ファイルはリポジトリのファイルを足したいディレクトリを開いている状態で 【+】ボタン(手入力の場合)か雲のアイコンを押す。
newfile

Web公開

GitBucketサーバのリポジトリにHTML文書を置くと、 特定のURLでWebページ公開できる。ここでは、master ブランチをWeb公開する設定を示す。

サインインした状態でリポジトリを開く。

  1. 左側メニューから「Settings」を選ぶ
  2. 設定入力の上に並ぶタブから「Pages」を選び master branch /docs folder を選ぶ 
    Source
 gh-pages branch
 master branch
 master branch /docs folder
 None
  3. リポジトリのトップに docs/index.html ファイルを作成する

これで docs/ ディレクトリの中に index.html を開始点とした Web 空間が作成できる。リポジトリ本体のURLと公開WebのURLの関係は以下のとおり。 

リポジトリ: https://SERVER/USER/REPO/
公開WebURL: https://SERVER/USER/REPO/pages/

このURLをREADME.mdからリンクしておくと閲覧者が見やすくなる。 README.mdに以下のようにリンクを張る。

[Webページ](../../pages/)

クローンしての操作

GitBucket の Web 画面での操作ではファイルの移動や名前変更ができない。 すべての操作をするにはリポジトリを手元のディレクトリにコピー(クローン) して操作する。

自分のリポジトリが https://www.yatex.org/gitbucket/user/repo だと仮定して、それをクローンして手元PCで編集、commit して push、 という流れの操作をダイジェスト的に説明する。

なお、以下の例では手っ取り早く「HTTPSでの接続」を示すが、 本格的に作業をする場合は「学習・研究ファイルのリポジトリ化について」を参照して 「SSH での接続」を設定したほうが断然効率的である。 以下の作業がうまく行ったらそれを試すとよい。

  1. クローン

    最初に一回だけやる。 操作を繰り返しておかしくなったらここからやり直したりもする。

    まずブラウザで自分のリポジトリを開く。上の方に

    [ HTTP▼ ] [ https://www ] [ ← ]

    のようなURLをコピーするボタン(Copy to Clipboard)がある。 一部見えている https://www... の部分をマウスでトリプルクリックして URLをコピーする。続いてターミナル画面で以下のようにコマンド起動する。

    git clone ここにコピーしたURLを貼り付ける

    貼り付けるときは マウスの真中ボタンクリック か Ctrl-Shift-V あるいは Command-v をタイプする。

    カレントディレクトリにリポジトリ名のディレクトリができる (この例ではrepo)。

  2. 普段の操作

    まず、クローンしたディレクトリに移動する。

    cd repo

    毎回忘れずに、GitBucketサーバ上にある更新を取得する。

    git pull
  3. ファイル編集とコミット

    クローンしてきたディレクトリ内のファイルを編集して保存したら commit する。編集したファイルが file-1 と file-2 だとしたら以下のようにする。

    git commit -m "どう変更したのか" file-1 file-2
  4. ファイルの追加

    ファイルを追加したら add する。

    git add 追加ファイルの名前
git commit -m "○○ファイルを追加"
  5. ファイルの移動やりネーム

    これは git コマンドでないとできない。

    git mv OldName NewName
git mv File-1 File-2 移動先ディレクトリ
git commit -m "○○を△△に変えた"
  6. サーバにpush

    最初にpullする。

    git pull

    このときにサーバ側にも更新があったときは「マージ」作業が始まり、 急に画面が以下のように変わることがある。

    Merge branch 'master' of /tmp/g/1 into master
# Please enter a commit message to explain why this merge is necessary,
# especially if it merges an updated upstream into a topic branch.
#
# Lines starting with '#' will be ignored, and an empty message aborts
# the commit.

    このときは、2箇所での更新を交ぜている。ZZ と大文字Zを2回タイプし て完了させる。

    問題がなければサーバに送る。

    git push

「マージ」に関しては、「マージと衝突」を参照すること。もしよくわからなくなって git push がどうしてもうまく行かなくなったら、手元のリポジトリディレクトリを消して クローンからやり直すとよい。

cd ..
rm -rf repo
git clone https://サーバ上のリポジトリURL……