はじめに

こんにちは！求人ボックスでエンジニアをしている大山です。

2023年の1月に開設された求人ボックスの記事メディア求人ボックスジャーナルを、HugoとGitLabでどのように運用しているのかについてご紹介します。

Hugoとは

静的サイトジェネレーターの一種で、Markdownファイルを元に、あらかじめ定義したフォーマットに従って静的なサイトを生成するツールです。Hugoのコマンドを実行すると、ページの表示に必要なHTMLファイルや画像、CSSなどが出力されます。しばしばHugoと比較されるツールとしてCMSの一種であるWordPressがあります。WordPressでは、アップロードした記事のデータはDBに保存されていて、ユーザーのリクエストごとにDBから対象の記事データが取得され、動的にHTMLがレンダリングされます。HugoとWordPressはどちらも記事メディアやブログサイトを作るために使用されるツールですが、役割が異なっています。詳しくは公式ドキュメントをお読みください。

静的サイトジェネレーターを採用するメリット

記事メディアを作るにあたって、静的サイトジェネレーターを採用するメリットを2つ挙げます。

セキュリティとメンテナンスコスト

記事の内容をDBに保存してユーザーのリクエストごとにHTMLを動的に生成するタイプのCMSは、脆弱性を放置しないために、プラグインや開発言語のアップデートが欠かせません。しかし、静的サイトジェネレーターは単に静的なサイトを生成してくれるツールなので、頻繁にアップデートが必要になることは考えにくいです。また、管理画面の乗っ取りを企む悪意のあるリクエストに怯える必要はなくなります。

表示速度

静的なサイトなので、サーバーサイドで動的にHTMLをレンダリングするサイトと比較して表示が速いです。

求人ボックスジャーナルで記事が公開される流れ

記事が入稿されてから公開されるまでの一連の流れについて簡単にご紹介します。

求人ボックスジャーナルでは、記事の管理はGitLabで行なわれており、記事の入稿や公開はGit-Flowに従っています。具体的には、developブランチから分岐させたfeatureブランチに執筆したMarkdownファイルをコミットしてdevelopにマージします。リリースのタイミングになると、developブランチからreleaseブランチを分岐させ、masterブランチにマージします。

masterブランチにマージされると、それをトリガーにHugoのビルド処理が実行されるようにパイプラインを定義しています。GitLabでは、リポジトリに.gitlab-ci.ymlというファイルを作成することでパイプラインの定義ができます。パイプラインの定義のイメージは以下通りです。

stages:
  - build

build-hugo:
  rules:
    - if: '$CI_COMMIT_BRANCH == "master"'
  stage: build
  image:
    name: {Hugoが使用できるイメージ}
    entrypoint: [""]
  script:
    - hugo

環境別にパラメータを変えてビルドしたい場合は、

stages:
  - build

# 開発環境用
build-hugo-dev:
  rules:
    - if: '$CI_COMMIT_BRANCH == "develop"'
  stage: build
  image:
    name: {Hugoが使用できるイメージ}
    entrypoint: [""]
  script:
    - hugo -F --config config.dev.yml

# 本番環境用
build-hugo-prod:
  rules:
    - if: '$CI_COMMIT_BRANCH == "master"'
  stage: build
  image:
    name: {Hugoが使用できるイメージ}
    entrypoint: [""]
  script:
    - hugo --config config.prod.yml

このように書き分けることもできます。developブランチにマージされた場合は開発環境用のビルド処理が実行され、masterブランチにマージされた場合は本番環境用のビルド処理が実行されるように書き分けています。また、hugo -F --config config.dev.ymlについて解説すると、-Fは公開日がまだ先の記事を含めるオプションで、--configは指定したYAMLファイルのパラメータでビルドするオプションです。このように環境によって柔軟な設定が可能です。

Hugoのビルド処理によってファイルが生成されたら、あとはそのファイルをWebサーバーの公開ディレクトリに配置すると公開完了になります。求人ボックスジャーナルではJenkinsのジョブでWebサーバーにファイルを転送しています。

HugoとGitLabを組み合わせることのメリット・デメリット

まずメリットとして以下のようなことが挙げられます。

GitLabを使用すると記事の校閲、承認をGitLab上で行なうことができるため、記事管理画面を自前で作る必要がありません。公開されているテンプレートを使用する場合はテンプレートを自前で作る必要すらありません。
プレビュー時にエラーが出てしまうといったトラブルが生じた際には、Gitでデータの共有ができるため、エラーの再現がしやすくチーム内でのサポートが充実します。

また、デメリットとして以下のようなことが挙げられます。