GitLab-CI/CD Pagesでポートフォリオを作ろう

by

Kazuya Takei

at

2018/12/20

in

GitLab Meetup Tokyo #12

Who am I?

Kazuya Takei

../_images/icon-attakei.jpg
  • Pythonista

    • Errbotプラグイン/Errcron

    • Ansibleロール

    • sphinx-revealjs

  • @attakei

事前に

ここでの「ポートフォリオ」とは、

  • 金融資産の組み合わせ

  • 作品集。転じてエンジニア・クリエイターの自己紹介

GitLabの内包サービス

  • GitLab

  • GitLab CI/CD

  • GitLab Registry

  • GitLab Pages

  • いっぱい

GitLab Pages

GitLabプロジェクト向けに静的サイトを配信する機能

  • Freeプランから利用可能(=無料)

  • 最初からHTTPS対応

  • GitLab-CI/CDを使うため、融通がききやすい

../_images/gitlab-about.png

補足:似たサービス

  • GitHub Pages

  • Netlify

  • Read the docs

  • (どこかのレンタルサーバー)

  • (自分でS3とかで頑張る)

配信するまでの流れ

※一例です

  1. サイトのソースを用意する

  2. ビルド&デプロイ用の設定を .gitlab-ci.yml に書く

  3. コミットした後に、GitLab.comにプッシュする

  4. GitLab-CI/CDが正しく終了したら、配信が完了する

blockdiag ソース build HTML deploy Pages

サイトのソースを用意する

  • 素のHTML/JS/CSSでもいい

  • 静的サイトジェネレーターおすすめ

    • Sphinx

    • Jekyll

    • Hugo

    • and more

ビルド&デプロイ用の設定を書く

pages というジョブにすれば、勝手にpages対応してくれます


pages:
  image: python
  script:
    # ソースからHTMLを生成する
    - pip install sphinx
    - make html
    - mv build/html/ public/
  # このフォルダをGitLab Pagesに反映する
  artifacts:
    paths:
      - public

コミットした後に、プッシュ

ゆっくり待ちましょう

完成

https://attakei.gitlab.io/slides/portfolio-ja/

../_images/portfolio-example.png

GitLab Pages上に作る意味

GitHub Pages/Netlifyと比較して

  • 同じGitLab上の処理でデプロイ出来るため、GitLabで完結できる

  • ビルド時に、GitLab-CI/CDで出来ることはだいたい実現可能

    • 自分でDockerイメージ用意して、処理速度を上げるとか

    • 複数のビルド処理を束ねて、ビルドするとか

  • pages ブランチなどを必要としない

ポートフォリオ観点

GitLab Pages上でポートフォリオを作っている ≒

  • Git/Git系サービスを使える

  • CI/CDの知見がある

  • (使っていれば)静的サイトジェネレータの知見がある

  • (深く使っていれば)Dockerの知見がある

ご清聴ありがとうございました