Hugo + Cloudflare Pages で予約投稿する
投稿日:
カテゴリ:Web 制作
このブログは、Hugo + GitHub + Cloudflare Pages で運用している。静的サイトの持ち味である動作の軽さが気に入っているが、ブログのような予約投稿機能はない。
幸い、Cloudflare Pages には Deploy Hooks(デプロイフック)という外部からビルドを起動する仕組みがある。
さらに、姉妹サービスの Cloudflare Workers には、Cron Triggers(クロントリガー)という定期実行機能がある。
本記事では、これらを用いた予約投稿の方法について説明する。
この記事の目次
Pages:デプロイフックの作成
Cloudflare ダッシュボードの Workers & Pages ページに移動し、対象の Pages プロジェクトを選択する。
「設定」>「ビルド」に移動し、「デプロイフック」の右側の+ボタンをクリック。
デプロイフックの設定画面が開くので、任意のデプロイフック名とビルドするブランチを入力し、保存する。
表示された URL をコピーしておく。

Workers:シークレットの定義
Workers & Pages ページに戻り、右上の「アプリケーションを作成する」>「Hello World を開始する」を選択。任意の Worker name を入力し、デプロイする。
作成した Worker のページから「設定」>「変数とシークレット」に移動し、「追加」をクリックすると、変数とシークレットの設定画面が開く。
タイプ「シークレット」、任意の変数名、先ほどコピーしたデプロイフックの URL を値に入力し、デプロイする。

Workers:トリガーイベントの定義
「変数とシークレット」と同じページに有る「トリガー イベント」に移動し、「追加」>「Cron トリガー」を選択。
実行間隔を指定できる「スケジュール」と、それに加え実行時刻も指定できる「Cron 式」の2種類の指定方法がある。今回は時刻を指定したいので Cron 式のほうを選択。
毎日 23 時に実行する場合、Cron 式は以下のように設定する。
0 14 * * *

Cloudflare Workers の Cron は UTC(協定世界時)基準のため、日本時間(JST)に合わせて9時間引いている。
Workers:コードの追加
ページ右の「コードを編集する」ボタンをクリックし、エディタに以下のコードを貼り付ける(変数名が DAILY_DEPLOY の場合)。
export default {
async scheduled(event, env, ctx) {
await fetch(env.DAILY_DEPLOY, {
method: "POST",
});
},
};
右クリック>「Paste」で貼り付けようとすると、クリップボードの読み取り権限のエラーが出ることがある。その際は、Windows では Ctrl+V、Mac では Command+V で貼り付ける。
無事コードの貼り付けができたら、デプロイする。
Hugo:Front Matter の設定
Workers 側の準備が準備ができたら、次は Hugo の投稿の Front Matter を調整する。
予約投稿を機能させるためには、date を公開したい未来の日付に設定した上で、draft を false に書き換えておく必要がある。
実際に、Cron 式で指定した日本時間の23時を待ってみたところ、以下の画像のように大きく遅延することなく Cron イベントが実行され、Pages のビルドが開始された。

あとがき
Hugo + GitHub + Cloudflare Pages で運用しているブログで予約投稿を実現するために、Cloudflare Workers の Cron Triggers を用いた方法を紹介した。
当初は定期実行に GitHub Actions を使用していたが、設定時刻から1時間以上も遅れることがあった。次に検討した Google Apps Script も、トリガーの時刻設定は「午後 10 時~午後 11 時」など幅があり、正確な時間に起動させるには不向きだった。
どうしたものかと悩んでいたところ、Workers にも定期実行機能があることを知った。Cloudflare アカウント持ってるしちょうどいいやと思ってやってみたらうまくいった。やったね。