GitLab pagesの作り方

#gitlab 1 #gitlab pages 1

GitLab pagesの作り方を簡単に説明します．

最初の設定

  1. https://gitlab.com にアカウントを作成し，ログインします．
    • 以下ではアカウント名を uuuuu と表記します (私の場合は tamura70)．
  2. 必要があれば表示を日本語に設定します．
    • 右上の自分のアイコンをクリックし，"Preferences"を選択
    • "Localization" / "Language" で "Japanese" を選択
    • "Save changes" ボタンをクリック
    • Webページをreloadすると，日本語表記になる

以下では，日本語表記を前提に説明します．

プロジェクトとグループとは

GitLabではgit repositoryのことを「プロジェクト」と呼んでいます．

各ユーザはいくつでもプロジェクトを作成できます． ただし容量の合計が10Gバイト以下に制限されています．

たとえば ppppp と qqqqq という2つのプロジェクトを作成した場合， それぞれのプロジェクトのURLは以下のようになります．

プロジェクトの公開・非公開はそれぞれ設定できます．

また，複数メンバーからなるグループを自由に作成できます．

グループ名が gggggg なら，そのグループのURLは https://gitlab.com/ggggg となります．

また，グループ内に pppppp というプロジェクトを作成した場合， そのプロジェクトのURLは https://gitlab.com/ggggg/ppppp となります．

GitLab pagesプロジェクトの作成

では，一番単純なGitLab pagesのプロジェクトを作成します．

  1. https://gitlab.com/uuuuu を開きます．
    • 右上の自分のアイコンをクリックし，一番上の自分の名前をクリックすれば https://gitlab.com/uuuuu が開きます．
  2. 上メニューの「プロジェクト」をクリックし， 「Create from template」を選択
  3. "Pages/Plain HTML" の右側の「テンプレートを使用」ボタンをクリック
  4. 「プロジェクト名」を入力
    • 以下ではプロジェクト名を ppppp として説明します．
  5. 「プロジェクトを作成」ボタンをクリック

以上で https://gitlab.com/uuuuu/ppppp のプロジェクトが作成されます．

Webページを公開するために，初回のみ以下を行います．

  1. 左メニューの「CI/CD」を選択
  2. 「パイプライン実行」ボタンをクリック
  3. 「パイプラインを実行」のボタンをクリック

実行が終わり「成功」が表示されていれば，数分後に以下のURLでWebページが公開されます．

このURLは左メニューの「設定」／「Pages」でも確認できます．

なお，この手順は初回のみ必要で， 次回以降はプロジェクト中のファイルが更新されるたびに自動で実行されます．

GitLab pagesの編集

ファイルの編集はMicrosoft Visual Studio Codeなどのエディタを利用して行うことが普通ですが， GitLabのGUIを通して簡単な編集を行うこともできます．

  1. 左メニューの「リポジトリ」／「ファイル」を開く
  2. public フォルダ中の index.html を開く
  3. 「編集」ボタンをクリック
  4. ファイルの編集を行う
  5. 「Commit changes」ボタンをクリック

通常，数分以内でWebページが更新されます．

SSGの利用

最近はHTMLファイルを直接編集するのではなく， JekyllやHugoなどのSSG (Static Site Generator)を利用することが増えています．

新規プロジェクトのテンプレートには，それらに対応したものも含まれています． それらを利用すれば簡単に先進的なWebサイトを構築できます．