Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

SSL付きのgitlab page の作り方 (自分用メモ)

More than 3 years have passed since last update.

gitlab page を使うと、独自ドメイン、SSL付きのpage を簡単に作成可能

ブラウザだけで、作業ができるように書き換えました。

gitlab page で簡単に、HTMLページをアップできるので、通常のHTMLのページを gitlab に移動するときに便利です。
ドメインを割り当てることも可能ですし、SSLをつけることも可能です。
ドメイン維持費を除けば全部無料なので便利です。

gitlab のサンプルは、これです。
https://pages.gitlab.io/plain-html/

ざっくりと、やること一覧

  • gitlab にアカウントをつくる
    • project (仮にhoge ) をつくる
  • https://{ユーザ名}.gitlab.io/{プロジェクト名}   ページ公開だけならここまで
  • 独自ドメインを割り当てる(ドメインもっている前提)
    • gitlab でドメインを使えるようにする
    • ドメインでCNAME割り当てる
  • SSL割当

gitlab にアカウントをつくる

  • https://gitlab.com/users/sign_in から登録
  • ログインして、New Project から、プロジェクト(レポジトリ作成)
    • project 名hoge(仮の名前、お好きなのをつくってください。)
    • Import project from で、Repo by URL をクリックして下記をいれて、plain_html をコピー
   https://gitlab.com/pages/plain-html.git
  • http://{ユーザ名}.gitlab.io/hoge でページをみることができます。ssl なしです。

public 以下がページのデータです。ブラウザだけで、編集、アップロードできます。まずはこれでなんとかなります。

http://{ユーザ名}.gitlab.io/hoge に独自ドメイン名 hoge.ドメイン名を割り当てる

  • gitlab で、ドメイン割り当てをします。project -> settings -> pages で New Domain です。まずは、Domain だけ入れて、create new domain
  • ドメインで、CNAME で、hoge.{ドメイン名}に、{ユーザ名}.gitlab.io/ を割り当てます。(ドメインのゾーン情報が編集できることが前提です。)

hoge.ドメイン名 でSSL(let's encrypt )を取得

  • https://zerossl.com/ で作成です。online tools -> start にすすみます。
    • hoge.ドメイン名を、いれて、Accept は2つとも、チェックで、HTTP verificationチェックのままで、next
    • www まで含むのをつくりますかと聞いてくるので、No にしておき、CSRができるのを待ちます。
    • CSR ができたら、Next にすすみます。
    • private key ができますが、コピーしなくていいようです、Next にすすみます。
    • Verification 用のファイルがあるので、ダウンロードしておき、public/.well-known/acme-challenge をつくってから、アップロードします。
    • ファイルのアップロードがweb上から見れることを確認して、Next にすすみます。
    • cert(2こ連続、注意) と private keyが生成されるのでコピーします。
    • gtlab の settings->pages で、hoge.ドメイン名を選び、削除します。(しなくていいならいいのですが、)再度つくり、そのときに、cert と key をいれます。cert は、2個つながっているので注意です。
zanjibar
データが好きです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away