Gitを使って、HPを更新してみよう

2024 / 12 / 31

研究室HPの更新方法を紹介

はじめに

高橋・狩川研究室のホームページのソースコードはGitHubで管理されています。

自分のパソコンでソースコードを更新して、GitHubに反映する方法を説明します。
また、高橋狩川研究室のホームページ更新ではGitKrakenの利用を推奨しています。
このブログではGitKrakenを利用した方法を説明しますが、他の方法でGithubへ反映する方法を利用しても大丈夫です。

GitKrakenのインストール見出し「GitKrakenのインストール」

  1. GitKraken公式サイトにアクセスします。
  2. ダウンロードページから、自分のOS(Windows、Mac、Linux)に合ったインストーラーをダウンロードします。
  3. インストールウィザードに従ってインストールを完了させます。
  • インストール中にアカウント登録を求められる場合があります。GoogleアカウントやGitHubアカウントを使って登録すると簡単です。

GitHubアカウントの作成見出し「GitHubアカウントの作成」

もしGitHubアカウントを持っていない場合は、以下の手順で作成してください。

  1. GitHub公式サイトにアクセスします。
  2. 「Sign up」ボタンをクリックし、必要な情報(メールアドレス、パスワードなど)を入力してアカウントを作成します。

大元のリポジトリをフォーク見出し「大元のリポジトリをフォーク」

ホームページ管理係が管理している大元となるリポジトリを自分のGithubにフォーク(コピーを作成)します。

  1. 大元のリポジトリをブラウザで開きます。(URL等はホームページ管理係に確認してください)
  2. 画面右上部にあるForkをクリックします。
    Github Fork
  3. Create先のOwnerとして自分のアカウントを選択してください。
  4. Create forkをクリックし、自分のリポジトリにtk-lab-pageが追加されたことを確認してください。

リポジトリのクローン見出し「リポジトリのクローン」

GitKrakenを使って研究室のホームページのソースコードを取得(クローン)します。

  1. GitKrakenを起動します。
  2. 左側のメニューから「Clone a Repo」を選択します。
    Clone a Repo
  3. 「Where to clone to」 に自分のパソコン内の保存したい場所を入力してください。
  4. 「Repository URL」に、先ほど作成した自分のGitHubリポジトリURLを入力します。
  • 例: https://github.com/username/tk-lab-page.git
    Inpput Repo's info
  1. Create the repo! をクリック。
  • 左下にローディングが表示されるので、終わるまで待ちます。
    Now loading
  1. クローンが完了したら、Open Nowをクリックします。Git KrakenにGRAPHが表示されたら完了です。
    Open Now
    Git Kraken Graph

GPGキーの設定見出し「GPGキーの設定」

GitHubでは、セキュリティを向上させるためにGPGキーを利用することが推奨されています。ホームページ管理係でもGPGキーの登録を推奨しています。
本ブログではGitKrakenを利用してGPGキーを生成する方法を紹介します。自分でGPGキーを生成する場合にはGitHubのGPGキーガイドに従って、GPGキーを生成し、GitKrakenにGPGキーを追加してください。

GPGキーの生成見出し「GPGキーの生成」

  1. GitKrakenの右上の歯車マークから設定(Preferences)を開き、左のリストから Comit Signing を選択します。
  2. 「GPG Format」はOPENPGPを選択し、「GPG Program」にはgpgと表示されていることを確認してください。表示されない場合には入力してください。
  3. 「Signing Key」はすでにGPGキーを生成している場合に選択する部分です。今回は新たに生成するため、Noneのまま進めます。
  4. Generate をクリックすると新たなGPGキーが生成されます。生成されると「Signing Key」に自動的に生成されたキーが選択されます。
    Generate GPG Key

GithubへGPGキーの登録見出し「GithubへGPGキーの登録」

  1. 自身のパソコンのコマンドラインを立ち上げてください。MacOSであれば標準でTerminalが用意されています。
  2. 次のテキストを入力してください。
gpg --list-secret-keys --keyid-format=long

エンターキーを押すと次のような表示が出ることを確認してください。

$ gpg --list-secret-keys --keyid-format=long
/Users/hubot/.gnupg/pubring.kbx
------------------------------------
sec rsa4096/3AA5C34371567BD2 2025-01-09 [SC] [expires: 2027-01-09]
uid [ultimate] Futty93 <yamada.taro.b8@dc.tohoku.ac.jp>
ssb rsa4096/4BB6D45482678BE3 2025-01-09 [SEA] [expires: 2027-01-09]

作成したGPGキーのリストが表示されるため、複数のGPGキーが存在する場合には、GitKrakenで生成したものを選択し、GPGキーIDをコピーします。
この例ではGPGキーIDは3AA5C34371567BD2です。
3. 次のテキストを入力してください。ただし3AA5C34371567BD2は自分のものに変更してください。

gpg --armor --export 3AA5C34371567BD2

エンターキーを押すと次のような長い文字列が表示されます。

-----BEGIN PGP PUBLIC KEY BLOCK-----
navlauihvangnvae;vasdkjvna;kvbKKDFNK+VDSKHKGNVjvnglghva;unvNv
agvaer/gaLGVMEg/,abJEgve/gambael;zugajrgaeorgma?avaierab/sghh
Qr2948qtb+KGagnoaer
=jFro
-----END PGP PUBLIC KEY BLOCK-----

出力されたテキストを-----BEGIN PGP PUBLIC KEY BLOCK-----から-----END PGP PUBLIC KEY BLOCK-----を含んですべてコピーしてください。
4. Githubで右上の自分のアイコンをクリックしSettingsを選択します。
5. 左側のリストからSSH and GPG keysを開いてください。
6. 「GPG Keys」のNew GPG keyをクリックし、「Title」は任意のものを入力し、「Key」には先ほどコピーしたテキストをペーストし、Add GPG keyをクリックします。
7. 一覧に追加したGPGキーが表示されていれば完了です。


ブランチの作成見出し「ブランチの作成」

ホームページの変更作業を安全に行うために、新しいブランチを作成しましょう。ブランチを使うことで、作業中の変更が本体(masterブランチ)に直接影響を与えることなく進められます。

ブランチの作成手順見出し「ブランチの作成手順」

  1. masterブランチに移動する
    GitKrakenでは、左側の一覧からmasterをダブルクリックすると簡単に移動できます。
  2. 新しいブランチを作成する
    masterブランチを選択した状態で、右側のメニューをクリックし、Create branch hereを選択します。
  3. ブランチ名を設定する
  • ブランチ名はすべて小文字にし、スペースの代わりに-を使用します。
  • どのような作業を行っているのかが分かる名前にしましょう。
  • 例: feature/update-homepageadd-june-blog

select menu list
Create branch here


ソースコードの編集とコミット見出し「ソースコードの編集とコミット」

作業ブランチを作成したら、実際にソースコードを編集し、変更を記録(コミット)しましょう。

コードの編集と変更確認見出し「コードの編集と変更確認」

  1. ローカルフォルダ内で必要な変更を行う
    GitKrakenに戻ると、編集したファイルの一覧が右側に表示されます。
  2. 変更内容を確認する
    変更したファイルを選択すると、どこを編集したのかが表示されます。
  • 新しく追加した部分は緑削除した部分は赤でハイライトされます。

View Change
Select changed file

変更をステージングする見出し「変更をステージングする」

  1. 変更内容を確認し、ステージに追加する
    編集が正しいことを確認したら、Stage Fileをクリックします。
  • ステージに追加したファイルのみ、次のコミット時に記録されます。

Stage File

コミットの作成見出し「コミットの作成」

  1. コミットメッセージを入力する
  • Commit summary(コミットの概要)は必須入力です。
  • Description(詳細説明)は任意ですが、他の人が変更内容を理解しやすくなるので、できるだけ書くことをおすすめします。
  1. Commit Changesボタンを押してコミットする

Commit changes

変更をリモートにプッシュする見出し「変更をリモートにプッシュする」

  1. 変更をリモートリポジトリにプッシュする
  • コミットした変更をリモートリポジトリに反映させるため、Pushボタンをクリックします。

push

これで、作業内容の保存とリモートへの共有が完了しました。
次にプルリクエストを作成します。


プルリクエストの作成見出し「プルリクエストの作成」

ブランチでの変更を本体に統合してもらうため、プルリクエストを作成しましょう。

プルリクエストの作成手順見出し「プルリクエストの作成手順」

  1. GitHubで対象のリポジトリを開く
    ブラウザで**自分のGitHubのtk-lab-page**を開きます。画面上部に「変更がプッシュされた」旨が表示されるので、Compare & pull requestをクリックします。

  1. 送信元と送信先を確認する
  • 送信元(自分のブランチ)と送信先(管理者のmasterブランチ)が正しいことを確認します。
  1. 変更内容をチェックする
  • 画面下部に表示されている変更内容が正しいか確認します。
  • 意図しないファイルや変更が含まれていないか注意しましょう。

pull request

  1. プルリクエストを作成する
  • 必要であれば説明を追加します。
  • Create pull requestを押して完了です。

これでプルリクエストの作成が完了しました。


上記はあくまでもホームページのソースコードを変更するための初歩的な方法の1つです。
Github及びGitKrakenにはもっと便利な機能がたくさんあります。
勉強して損することはないと思いますので、ぜひ自分で調べて色々試してみてください!