ツナワタリマイライフ

日常ネタから技術ネタ、音楽ネタまで何でも書きます。

gitlab.comのgitlab-ciとmkdocsでmarkdown + pagesでの静的サイト作成がドチャクソ便利

はじめに

gitlab.comのgitlab-ciとmkdocsでmarkdown + pagesでの静的サイト作成がドチャクソ便利

です。

さて、GitLabではgitlab-ci機能を内包しており、.gitlab-ci.ymlというファイルをリポジトリのルートに置くだけでCIを実現できます。

about.gitlab.com

GitLabが実現しようとしている世界はこちらを参照してください。

blog.chaspy.me

自前でgitlabを運用するのであればrunnerの設定が必要ですが、gitlab.comではshared runnerが使えるのでその準備も不要です。

本当に5分で実現できるので、markdownをgitlab pagesとしてデプロイしてみましょう。

使用するビルドツールを選択する

GitLab pages exampleというグループから好みのツールを選択し、行った先の指示に従いましょう。

gitlab.com

今回はmkdocsを利用します。

gitlab.com

Forkする

Forkしましょう。

Fork後は、関連付けを解除しておきましょう。

Setting -> Advanced Settings -> Remove fork relationship

f:id:take_she12:20180418101506p:plain

プロジェクト名を変更する

任意のプロジェクト名に変更しましょう。

今回はmkdocs-sampleとしてみました。

f:id:take_she12:20180418101759p:plain

urlとtitleを変更する

mkdocs.ymlを変更します。

gitlab.com

1番最初はgroup名か自分のuser名を指定します。

コミット後、CIが実行され、passするとページが公開されています!

f:id:take_she12:20180418102144p:plain

http://chaspy.gitlab.io/mkdocs-sample にアクセスしてみましょう。

chaspy.gitlab.io

markdownを編集する

docs以下にmarkdownファイルがあるので、こちらを編集しましょう。

urlを追加するcommitをしてみました。

gitlab.com

CIがまわりきれば更新されます。

注意

shared runnerは共有リソースなので、込み合っていたり、gitlab.comがbusyだとpendingとなることがあります。昨夜1時頃実施したんですが、CIがまわったのは朝8時ごろでした。そういうこともあるので、pendingになった場合は一晩寝かしてみてください。

どうやって実現しているのか

そもそもgitlab pagesはどうすれば利用できるのか?公式ドキュメントを見てみる。

docs.gitlab.com

今回やった手順しか書いてないですね。

.gitlab-ci.ymlを眺めてみる。

image: python:alpine

before_script:
  - pip install mkdocs
  # Add your custom theme if not inside a theme_dir
  # (https://github.com/mkdocs/mkdocs/wiki/MkDocs-Themes)
  # - pip install mkdocs-material

pages:
  script:
  - mkdocs build
  - mv site public
  artifacts:
    paths:
    - public
  only:
  - master

mkdocs buildを実行すると、docs以下のディレクトリをbuildし、siteというディレクトリでhtmlが生成される。

www.mkdocs.org

siteというディレクトリをpublicにrenameし、artifactsとして登録してやる。

gitlab pagesではpublicディレクトリのみを対象とするようです。根拠はここ。

docs.gitlab.com

pagesというjob名であること、publicというディレクトリであること、artifactsとして登録すること、この3つがあれがgitlab pagesとして公開されるようですね。

docs.gitlab.com

おわりに

gitlab-ciや、buildツールであるmkdocsの知識がなくても、GitLab Pagesと組み合わせて静的サイトとして簡単に公開できます。ちょっとしたポータルページをささっと作ることができるのは本当にすごい。

gitlab-ci含め、最近のGitLabができることはこの本を参考に。

GitLab実践ガイド (impress top gear)

GitLab実践ガイド (impress top gear)

blog.chaspy.me