Hugo 製ブログの OGP 画像を GitHub Actions で自動生成する

import (
  "image"
  "strings"

  "github.com/fogleman/gg"
)

const (
  fontPath = "/usr/share/fonts/Kinto Sans/KintoSans-Bold.ttf"
)

type Config struct {
  TemplatePath string   // ベース画像のパス
  OutputPath   string   // 画像出力先のパス
  Title        []string // 記事タイトル。i番目の文字列が画像内タイトルのi行目として記入される
}

func CreateImage(config Config) (image.Image, error) {
  // px数値をpt単位に変換
  width := 1200 * 3 / 4 // 1200px
  height := 630 * 3 / 4 // 630px
  // ベース
  dc := gg.NewContext(width, height)

  // テンプレート画像をベースにのせる
  backgroundImage, err := gg.LoadImage(config.TemplatePath)
  if err != nil {
    return nil, err
  }
  dc.DrawImage(backgroundImage, 0, 0)

  // フォントサイズ50で読み込み
  if err := dc.LoadFontFace(fontPath, 50); err != nil {
    return nil, err
  }
  // フォントカラー
  dc.SetHexColor("232F3E")

  // 記事タイトルをベースにのせる
  title := strings.Join(config.Title, "\n")
  maxWidth := float64(dc.Width()) * 0.85
  dc.DrawStringWrapped(title, float64(width)/2, float64(height)/2, 0.5, 0.5, maxWidth, 1.5, gg.AlignCenter)

  return dc.Image(), nil
}

// og-image.config.json
[
  {
    "template": "og-image/base.drawio.png",
    "path": "content/posts/article2/og-image.png",
    "title": [
      "これは1行目",
      "これは2行目"
    ]
  },
  {
    "template": "og-image/base.drawio.png",
    "path": "content/posts/blog-ogp/og-image.png",
    "title": [
      "Hugo製ブログのOGP画像を",
      "GitHub Actionsで自動生成する"
    ]
  },
]

// og-image/main.go

type Config struct {
  TemplatePath string   `json:"template"`
  OutputPath   string   `json:"path"`
  Title        []string `json:"title"`
}

func CreateImage(config Config) (image.Image, error)

// jsonファイルからConfigリストを読み取る
func readConfig(path string) ([]Config, error) {
  raw, err := ioutil.ReadFile(path)
  if err != nil {
    return nil, err
  }

  var configs []Config
  if err := json.Unmarshal(raw, &configs); err != nil {
    return nil, err
  }

  return configs, nil
}

func main() {
  if len(os.Args) < 2 {
    fmt.Println("please pass the config file path as an argument")
    os.Exit(1)
  }

  configFilePath := os.Args[1]
  configs, err := readConfig(configFilePath)
  if err != nil {
    fmt.Println(err)
    os.Exit(1)
  }

  for _, config := range configs {
    // 画像生成
    img, err := CreateImage(config)
    if err != nil {
      fmt.Println(err)
      os.Exit(1)
    }

    // 画像保存
    if err := gg.SavePNG(config.OutputPath, img); err != nil {
      fmt.Println(err)
      os.Exit(1)
    }
  }
}

go run og-image/main.go og-image.config.json

<!-- layouts/partials/head-extra.html -->
<link rel="icon" type="image/vnd.microsoft.icon" href="{{ .Site.BaseURL }}favicon.ico">

{{ if .Description }}
  <meta name="description" content="{{ .Description }}">
{{ else if .IsPage }}
  <meta name="description" content="{{ .Summary | plainify }}">
{{ end }}

{{ template "_internal/opengraph.html" . }}

<!-- layouts/partials/twitter-card.html -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{{- .Title -}}" />

{{ if .Description }}
  <meta name="twitter:description" content="{{ .Description }}">
{{ else if .IsPage }}
  <meta name="twitter:description" content="{{ .Summary | plainify }}">
{{ end }}

{{ $imgurl := "" }}
{{ if .Params.images }}
  {{ $imgurl = index .Params.images 0 }}
{{ end }}
{{ if gt (len $imgurl) 0 }}
  {{ $imgurl = lower $imgurl }}
  {{ if and (not (hasPrefix $imgurl "http://")) (not (hasPrefix $imgurl "https://")) }}
    {{ $imgurl = print .Site.BaseURL $imgurl }}
  {{ end }}
  <meta name="twitter:image" content="{{ $imgurl }}" />
{{ end }}

---
title: "Hugo製ブログのOGP画像をGitHub Actionsで自動生成する"
images:
  - posts/blog-ogp/og-image.png
---

FROM golang:1.17-bullseye

RUN apt-get update \
    && apt-get install -y unzip \
    && cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime \
    && echo "Asia/Tokyo" > /etc/timezone

WORKDIR /go/src/github.com/Fukkatsuso/blog/og-image

# 最新releaseだけをダウンロードしてttfファイルを取り出す
RUN curl -s https://api.github.com/repos/ookamiinc/kinto/releases/latest \
    | grep "browser_download_url.*zip" \
    | cut -d : -f 2,3 \
    | tr -d '"' \
    | wget -qi - \
    && mkdir -p /usr/share/fonts/ \
    && unzip KintoSans.zip Kinto\ Sans/*.ttf -d /usr/share/fonts \
    && chmod 644 /usr/share/fonts/Kinto\ Sans \
    && rm KintoSans.zip

COPY go.* ./
RUN go mod download

COPY main.go ./
RUN CGO_ENABLED=0 GOOS=linux go build -mod=readonly -x -o /go/bin/og-image

ENTRYPOINT [ "/go/bin/og-image" ]

# .github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches:
      - master
    paths:
      - "**"
      - "!README.md"
      - "!.gitignore"

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout the repository
        uses: actions/checkout@v2
        with:
          submodules: true

      - name: Create OG-Image
        run: |
          docker build -t og-image og-image/
          docker run --rm \
            -v `pwd`:/go/src/github.com/Fukkatsuso/blog \
            -w /go/src/github.com/Fukkatsuso/blog \
            og-image og-image.config.json          

      # 以下、ビルドとデプロイ