LoginSignup
1
1

More than 3 years have passed since last update.

Hugo で立ち上げたブログの記事をカッコよく管理する

Posted at

:bulb: まとめ

  • Hugo でブログを立ち上げたとき、ブログの記事は別リポジトリで管理するとコミットログが汚くならない
  • CI/CD を使ってブログ記事のリポジトリをクローン・ビルドするパイプラインを組んでおけば、ブログ本体のソースを触る必要がなくなる

:seedling: 背景

先日、 Hugo を使用したポートフォリオサイトを作り、その中にブログを併設しました。

Fairy Select - My Portfolio

ソースコードを管理する際に Git を使用するわけですが、そうすると、ブログ記事を追加するためだけにコミットログを積まなければならなく、コミットログが非常に汚くなってしまいます。

記事を 3 回加筆修正しただけでこんなにコミットログが積まれます:cry:

commit-log.png

そこで考えたのが...

ブログ記事だけ別リポジトリにすればいいんじゃね?

です。

:thinking: 考えた方法

「ブログ記事だけ別リポジトリに」した後を考えます。

サブモジュール化する

Git にはサブモジュールという便利な機能があって、これを使うと少なくともブログ記事のコミットログは別で管理できます。

ところが、サブモジュールに関する ある記事 を読んだところ、サブモジュールの更新があった場合に自分で更新を読み込まなければいけないようです。

結局は Update submodule: posts のようなコミットログを積まないといけないことになるので、面倒というよりはブログ記事のように更新頻度の高いコンテンツをサブモジュール化するのはあまり向いていないと感じました。

そんなこんなで採用したのが次の方法です。

ブログ記事をクローン・ビルドするパイプラインを組む

.gitlab-ci.yml を以下のように書いて CI/CD を設定しました。(実際はもっといろんな処理を書いていますが、概略はこんな感じです)

image: registry.gitlab.com/pages/hugo:latest

variables:
  GIT_SUBMODULE_STRATEGY: recursive

pages:
  script:
    - apk update && apk --no-cache add git
    - git clone ${ブログ記事の URL}
    - git clone ${ブログ記事画像の URL}
    - hugo
  artifacts:
    paths:
      - public
  only:
    - master

これで、 master ブランチに何かをプッシュするだけでパイプラインが実行され、記事の更新が可能となります!:smile:

  • パイプライン上で git clone しますので、ビルド成果物に .git が含まれないように注意しましょう。

  • GitLab においてプライベートリポジトリを HTTPS 経由でクローンする場合は、ユーザー名・パスワードの記載が必要です。二段階認証を利用している場合は、アクセストークンが必要です。これらは GitLab 上の環境変数に設定して参照するようにし、スクリプトに直接書かないようにしましょう。

GitLab における環境変数は、リポジトリのページから 「Settings → CI / CD → Variables」 と進むと設定できます。

詳しくは こちら

gitlab-environment-variables.png

:clock4: 定期実行も設定する

GitLab にはパイプラインを定期実行してくれる便利な機能があります。

せっかくなので設定してみようと思います。

リポジトリのページから 「CI / CD → Schedules → New schedule」と進み、日本時間毎朝 4 時にパイプラインを実行するように設定してみます。

schedule-a-new-pipeline.png

これで定期実行も完成です。

ちゃんと実行できるかどうか心配な場合は一覧画面から手動実行することもできます。


最後まで読んでいただきありがとうございました!:wink:

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1