本記事の概要
Hugo+Blowfishテーマで個人サイトを作っていた際にDisrcordへの通知機能を使うと便利だったので方法を記載します。
環境としてはCloudflarePagesとGitHubを連携させて、Push時にデプロイがかかるような環境です。
内容としては初心者用の記事になります。
前提
Hugo+Blowfishテーマ適用済みの環境です。
なお、Windowsでの操作を想定しています。
(本記事が属するアドベントカレンダーについてもご確認ください)
また、
- CloudFlarePagesとGitHubの連携設定済み
- Discordのアカウントやサーバーは作成済み
とします。
DiscordのWebHookについて
GitHubからDiscordへの通知を行うには、Discord側でWebHookを作成する必要があります。
WebHookは「Discordサーバーの特定のチャンネルに投稿する専用のURL」を発行する機能です。
なのでURLは外部に漏れないよう、大切に扱いましょう。
WebHookURLを発行する
Discordで、WebHook機能で投稿したいチャンネルの設定を開きます。
新規にチャンネルを作る必要があれば、事前に作っておきましょう。
左側のメニューで「連携サービス」を選択し、右側にある「ウェブフックを作成」を選択します。

そうすると、WebHookが作成されます。
※見切れてしまっていますがCaptain Hookといった名前が勝手に付けられます。

クリックすることで名前などを変えられます。
(ただしGitHub用の場合は勝手にユーザー名が付けられるので、後で何に使っているWebHookか判別するためのものになる)
「ウェブフックURLをコピー」でコピーできます。

GitHub側のWebHook設定
リポジトリ上部から「Settings」を選びます。
その中にある「WebHooks」を選んだ後に「Add webhook」を選びます。

ここで、下記のように設定します。
- Payload URL: DiscordでコピーしたURLの末尾に/githubを付けたもの
- DiscordのURLをそのまま使うとうまくいかないので注意
- Content Type:「application/json」を選択
- Which events would you like to trigger this webhook?の回答
- 真ん中の「Send me everything.」を選んで全てのメッセージを受け取る
- もしくは一番下の「Let me select individual events.」を選んだ後に、受け取りたい項目だけ選択する
といった形で設定したのちに「Add webhook」を選びます。
Discordで表示を確認する
あとは、pushやデプロイ完了等のイベントが起きた際に、Discordの指定したチャンネルに通知されます。
なお、アイコンと名前は下記のように、GitHubになります。

まとめ
GitHubからDiscordへの通知機能を使うことで、イベントの確認が容易になります。
個人サイトのような開発の場合は、自分専用のDiscordサーバーを立てるのも手です。
あとは、適宜通知内容を確認して、対応するようにしましょう。
