Github Actionsで画像を生成し、Github Pagesに埋め込む #GitHubActions

これまで、とあるサイトを運営していて、サイトに埋め込む画像を生成するためだけにサーバを立ててましたが、Github Actionsを使えばサーバ不要で画像生成でき、そのままGithub Pagesで公開することもできます。

以前から挑戦してて、やりたいことまで到達できませんでしたが、久しぶりにやってみたら、するっと動きました。

まず、最初にGithub Pagesを有効にします。リポジトリのSettingsからPagesメニューを開き、Sourceを「Github Actions」に設定すると、幾つかワークフローが出てきます。

ここで、Jekyllの「configure」というボタンを押すと、workflow配下に下記のようなファイルが作られ、コミットできる状態となります。

jekyll-gh-pages.yml

# Sample workflow for building and deploying a Jekyll site to GitHub Pages
name: Deploy Jekyll with GitHub Pages dependencies preinstalled

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # 後で、ここに処理を追記する

      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Build with Jekyll
        uses: actions/jekyll-build-pages@v1
        with:
          source: ./
          destination: ./_site
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

yamlなので読めばなんとなくわかるかと思いますが、buildとdeployという２つのjobで構成されていて、build側でJekyll-build-pagesというactionを回してartifactにアップロード、deployでdeploy-pagesというactionを回すというworkflowです。

このファイルを何も編集せず、そのままコミットするとworkflowが動き始めます。Githubの画面上の「Actions」から処理状況を確認でき、Github PagesのURLが表示され、デプロイできていることが確認できます。

これだけでも便利ですが、ちょっと突っ込んだことをやってみましょう。

eleganttは開始日と終了日とタイトルを指定するとガントチャートの画像を生成してくれるPythonライブラリです。これを使ってガントチャートを自動生成して、Github Pagesに載せてみます。

まず、ガントチャートを自動生成するPythonスクリプトを書きます。

test.py

import elegantt

chartsize = (720,320)
bgcolor = (255,255,255)

gchart = elegantt.EleGantt( chartsize, bgcolor, today="2024-04-29")
#gchart.set_font("xxxx.ttf") #日本語を表示するときはフォントファイルを指定
gchart.draw_calendar()
gchart.draw_campain("2024-04-15","2024-05-01","Hello")
gchart.draw_campain("2024-05-01","2024-05-03","Hello")
gchart.draw_campain("2024-05-03","2019-05-10","Hello")
gchart.save("test.png")

test.pngという画像を生成するので、markdown側でも、その画像を表示するよう書き加えておきます。

index.md

![ganttchart](test.png)

そして、ライブラリをGithub Actions環境に読み込ませるためrequirements.txtも書いておきます。

requirements.txt

elegantt

最後に、さきほどのjekyll-gh-pages.ymlの「後で、ここに処理を追記する」という箇所に、下記のようにPythonと依存関係をセットアップし、python test.pyというコマンドを実行します。

jekyll-gh-pages.yml

      - name: Setup Python
        uses: actions/setup-python@v4
        with:
          python-version: "3.9"
      - name: Install dependencies
        run: pip install -r requirements.txt
      # - name: Install fonts
      #  run: wget https://... 適当なところから日本語フォントを入手
      - name: run test.py
        run: python test.py

なお、日本語を表示する場合はGithub Actionsの環境へ日本語フォントを配置する必要があります。フォントによってはGithub上に置くと利用規約などを違反する恐れがありますので、よく利用規約を読み、自己責任でお願いします。

修正したファイルをgit pushすることでworkflowが回り、Github Pages上へも生成した画像がアップされます。ガントチャートに限らず、画像を生成するライブラリは色々あると思いますので、応用できると思います。