hugoでOGP画像をビルド時に生成

head.html

<!-- OGP Img Check -->
{{ $OGPPATH := partial "ogimg.html" . }}

<meta name="twitter:image" content="{{ $OGPPATH }}">
<meta property="og:image" content="{{ $OGPPATH }}">

hugo-build.sh

#!/bin/sh

for FILE in ./content/posts/*/*/*.md
do
  DIRNAME=$(echo $FILE | rev | cut -d "/" -f 2 | rev)
  DATE=$(echo $FILE | rev | cut -d "/" -f 3 | rev)
  ./bin/tcardgen \
    -f ./font \
    -o ./static/ogp/$DATE-$DIRNAME.png \
    -t ./ogp.png \
    -c ./tcardgen.yml \
    $FILE
done

TZ='Asia/Tokyo' hugo --gc --minify

oging.html

<!-- OGP Img Check -->
{{ $OGPPATH := "" }}
{{ $OGPDEF := print $.Site.BaseURL "img/defogp.png" }}
{{ if .IsPage }}
  {{ $FILEPATH := .File.Path }} <!-- posts/20220101/hogehoge/index.md -->
  {{ $FILEDIR := path.Dir $FILEPATH }} <!-- posts/20220101/hogehoge -->
  {{ $FILEBASEDIR := path.Base $FILEDIR }} <!-- hogehoge -->
  {{ $FILEDIR2 := path.Dir $FILEDIR }} <!-- posts/20220101 -->
  {{ $DATE := path.Base $FILEDIR2 }} <!-- 20220101 -->

  {{ $OGPFILE := print "static/ogp/" $DATE "-" $FILEBASEDIR ".png" }}
  {{ $OGPFILE2 := print $.Site.BaseURL "ogp/" $DATE "-" $FILEBASEDIR ".png" }}

  {{ if (fileExists $OGPFILE) }}
    {{ $OGPPATH = $OGPFILE2 }}
  {{ else }}
    {{ $OGPPATH = $OGPDEF }}
  {{ end }}
{{ else }}
  {{ $OGPPATH = $OGPDEF }}
{{ end }}

{{ return $OGPPATH }}