gitlab-pages

GitLab Pagesの使い方｜無料でホームページを作成

GitLabで無料でページを公開する方法を紹介します。

HTMLやCSSで静的コンテンツを作成し、独自ドメインを設定して公開するところまで、全て無料で出来ます。
公開するためのサーバーの準備なども必要ありません。

ページを公開したい時に、サーバーの準備などが必要なく、どれだけ簡単に公開できるかという点は非常に重要だと思います。

そもそもGitLabとは

GitLab（ギットラボ）とは、Gitリポジトリ管理ソフトウェアです。
Gitリポジトリ管理では、GitHubが一番有名でしょうか。

なんだか、同じような名前で同じようなスペルで、どっちがどっちだか分からなくなりそうです。笑

GitLabはプライベートリポジトリが無料

これは大きいですね。

GitHubではプライベートリポジトリで非公開にしたい場合は有料になります。
ポートフォリオとしてソースを公開するなら良いのですが、個人ではなく企業で使う場合とか、開発途中のものは非公開にしたいので、無料でできるのは大変助かります。

自前のサーバーが利用可能

セキュリティや情報管理の観点から、自前でサーバーを用意して、GitLabの環境を作ることが可能です。

サーバーを用意して一から環境を作るというのは手間が掛かりますが、セキュリティもしっかり考えられるというのは、構築の選択肢が広がるので良いと思います。

自前でサーバーにGitLabを構築するのが面倒という場合には、GitLabのサーバー上で利用できる「GitLab.com」というサービスもあります。

https://gitlab.com/

今回の記事も、「GitLab.com」を使用して書いています。

GitLab Pages とは

GitLab 上にウェブサイトを公開できるサービスで、以下のような特徴があります。

  • 無料で利用できる
  • httpsに対応している
  • 静的なサイトを作成できる
  • 独自ドメインを設定できる

作成する手順

静的コンテンツを作成し、master にプッシュする

GitLab.comのページで、リポジトリを作成し、クローンします。

各種、静的コンテンツ（html、css、javascript）を作成します。

設定用の「.gitlab-ci.yml」を作成

以下の内容で作成します。

pages:
  stage: deploy
  script:
  - mkdir .public
  - cp -r * .public
  - mv .public public
  artifacts:
  paths:
  - public
  only:
  - master

master にプッシュすると自動的にデプロイする、という設定です。

public というパスは GitLab Pages の内部のものなので、public ディレクトリを作成する必要はありません。
ファイルが作成できたら、作成したコンテンツを含めて、masterにプッシュします。

デプロイ確認

プッシュを行うと、自動的にデプロイが開始されます。

デプロイの確認は、GitLab.comのページで、CI / CD ⇒ Pipelines から確認できます。 gitlab-pipelines

master にプッシュすると、画面に [running] の行が追加されます。

しばらく待つとデプロイが完了し、Status が [passed] になります。
デプロイしたページの URL は Settings ⇒ Pages で確認できます。

https://[ユーザー名].gitlab.io/[プロジェクト名] がページの URL となります。

ページ表示で404エラーが発生した場合

初めてのデプロイでは、実際に公開されるまで15分ほど時間が掛かるようです。

実際にデプロイ完了後、すぐにページを表示してみたところ、404エラーが発生しました。
15分ほど経過後は、404エラーも解消して正常にページが表示できました。

独自ドメインの設定

独自ドメインを設定することも可能です。

以下の記事に書いています。

Cloudflareを使用してGitLab Pagesで独自ドメインを設定する
2019.07.04
Cloudflareを使用してGitLab Pagesで独自ドメインを設定する
GitLab Pagesで独自ドメインを設定していきます。 前回の記事でGitLab Pagesを使用して、ページを公開するところまでいきました。 ページを公開した状態では、URLが「https://xxxxxx....

 
↓ベルトトルトは、こういうお悩み系の記事書いてますので、ご覧ください。
https://boost-on.net/author/bertolt

以下、参考まで。
公式ドキュメント（英語） https://docs.gitlab.com/ee/user/project/pages/
チュートリアル https://about.gitlab.com/2016/04/07/gitlab-pages-setup/

 

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。