Edited at

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

More than 1 year has 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個つながっているので注意です。