【備忘メモ】HUGO/GitLabでこのサイトを構築した話

【備忘メモ】HUGO/GitLabでこのサイトを構築した話

【備忘メモ】HUGO/GitLabでこのサイトを構築した話

このブログサイトは静的サイトジェネレータHUGOで作成しています.ブログサイトを更改するにあたり,どのような方法をとるか,いくつか選択がありましたが

  1. 手間をかけたくない
  2. 記事はMarkdownで書きたい
  3. GitLabと,うまいこと連携したい(弊社はソースコード管理にGitLabを利用しています)

というあたりを念頭に調査し,簡単そう・必要な情報が入手しやすそうだったので,HUGOにしました.後者については,HUGO本体のドキュメントはもちろんですが,既に多くの方々が情報を残してくれているので,この程度のブログサイトであれば,大体やりたいことは調べればすぐに見つかる印象でした.

HUGOのテーマは,オフィシャルサイトのQuick Startで紹介されているAnanke Gohugo Themeをそのまま使っています.工夫がないですが,PV数を稼ぐことを目標にするサイトでもないですし…

とはいえ,多少デフォルトからは変更している点があるので,GitLab連携関連も含め備忘メモをこの記事に残しておきます.

追加のcss

config.tomlのparamテーブルにcssファイルのパスを指定する.

[params]
  custom_css = ["assets/ananke/css/custom.css"]

テンプレートの上書き

HUGOがテンプレートファイルを探索する順序はここに記述がある.例えばlayouts/_default/single.htmlはpostsセクションの記事に反映される.

taxonomy

ユーザが定義するコンテンツのグループのこと.このサイトでは(今のところ)tagとauthorのみ利用.

最終的なURLの変更に利用.

GitLab Pages

GitLab Pagesにホスティングし,独自ドメインを設定.

masterブランチにマージされた後,hugoコマンドを実行してpublicディレクトリを公開するようにした.以下は.gitlab-ci.ymlの抜粋.

variables:
  HUGO_ENV: production

pages:
  script:
  - hugo
  - sh replace.sh
  artifacts:
    paths:
    - public
  only:
  - master

その他

  • トップページや記事一覧(/post)ページで表示される,文章の先頭部分(summary)は,文中に<!–more–>という記述を入れた場所まで.

  • 独自ドメインを設定した関係で,一部のリンクが壊れてしまう問題が生じた.また,Google Analyticsのタグを埋め込めない(古いanalytics.jsを利用するタグは可能)問題もあった.回避する方法はいくつかあるようだが,GitLabのCIでスクリプト(上記.gitlab-ci.yml中のreplace.sh)を走らせて,公開時に修正が必要な部分をまとめて書き換えるという愚直な方法とした.