背景

このブログは、GitHubにリポジトリを作ってHugoでサイトを生成して、Netlifyにデプロイしています。Hugoのテンプレートとして m10c というものを使っていて気に入ってるのですが、ただ日本語のフォントの指定がないのでフォント表示が微妙でした。

テンプレートのSCSSに日本語フォントを追加しようと思い、テンプレートのSCSSをカスタムしてNetlifyにデプロイしてもどうにもCSSが上書きされません。

色々調べてみると、「NetlifyでHugoのextendedバージョンが暫定対応されたので試してみた」 の記事にあるように、HugoでSCSSを扱うにはHugoのextendedバイナリというものを使う必要があり、Netlifyは今のところはそれに対応していないとのこと。

ひとまず、先程の記事にあるように自前でリポジトリ上にextendedバイナリを持ってしまってそれをNetlify上でビルドする時に使うことでも回避はできたのですが、そんな時に同僚の @lowply から救いの声が。

というわけで、これを使ってGitHub ActionsでNetlifyにデプロイしようと思い立ったというわけです。

GitHub Actionsによるデプロイ

Hugoでのビルドは先程教えてもらったActionを使うとして、Netlifyへのデプロイはどうするかと言うと、Netlifyがnetlify-cliをラップしたActionを公開しているのでそれを使います。

また、 m10c テンプレートはgitのsubmoduleとして追加しているので、 git submodule initgit submodule update して実体を取ってこないといけません。このgitコマンドの実行には こちらのAction を使いました。

ということで、こんな感じのワークフローでひとまず完成。

workflow "New workflow" {
  on = "push"
  resolves = ["Publish"]
}

action "Fetch theme" {
  uses = "srt32/git-actions@master"
  args = "git submodule init && git submodule update"
}

action "Build" {
  uses = "lowply/action-hugo@master"
  needs = ["Fetch theme"]
  runs = "hugo"
}

action "Publish" {
  uses = "netlify/actions/cli@master"
  needs = ["Build"]
  args = "deploy --dir=public --prod --message=\"Deploy from GitHub Actions\""
  secrets = ["NETLIFY_AUTH_TOKEN", "NETLIFY_SITE_ID"]
}