Actionsを使ってWordPressの記事を静的サイトにデプロイする仕組みを作ってみました。2019で以下のセッションを聞いたことと、スポンサーブースで「マネージドクラウド」や「静的サイトへの変換」のソリューションが印象に残ったことです。2019これらの事項を見聞きして、「コンテンツの更新を簡単にできる管理画面のメリットを活かしつつ、WordPressのメンテナンスコストを抑える」方法を考えた結果、今回の改修に至りました。UsusamaについてUsusamaについては以下を参照。Ususama改めてざっくり説明すると「中小規模の静的サイト用にあれこれを準備するフレームワーク」というところです。主な機能として以下が挙げられます。標準で新着情報管理の仕組みをサポート特に今回関わってくるのは最後の新着情報の管理方法。bin/config/config.ymlのparam.news.newscountで指定した件数を1ページ当たりの件数として、news/下に生成という形になっています。Actionをキックすることで自動ビルド・デプロイを行う仕組みとしました。大まかな流れを以下に記します。Actionsのワークフローを外部からキックできるrepository_dispatchイベントです。簡略化のためWordPressに対して以下の条件を設けました。UsusamaUsusamaをローカルにクローンして、以下の2つの設定を行います。https://wpsite.example.com/wp-json/wp/v2/posts)をbin/config/config.ymlに記述bin/config/plugins.ymlのWordPress連携のフラグをtrueにするなお、.github/workflows/build_deploy.ymlの内容は以下の通りです。[repository_dispatch]を記述しておくこと。repository_dispatchでも良かったかもしれません。このコードをGithubの公開リポジトリにプッシュします。Github次にGithubの設定。Actionsを有効にし、次にシークレットの設定。「Settings」→「Secrets」と進み、上述のワークフローで使用する4つのキーを設定します(該当サーバのFTP情報)。tokensの設定をします。tokensの設定Githubログイン状態で、右上のアカウントアイコンからメニューを開き、「Settings」を選択。settings」を選択。tokens」を選択。新規でトークンを発行してみたいと思います。tokensの設定トークンの権限を設定します。今回必要なのはrepoの権限なので、そこにチェックを入れて、下の方のボタンで保存。新しくトークンが発行されたので、これを控えておきます。次はWordPressに移りたいと思います。WordPress今回は実験のため、デモのWordPressを建てて適当なコンテンツ(最近のWeb、IT関係のニュースまとめ)を流し込んでおきました。デモでWordPressサイトを構築デモのWordPressサイトのトップ画面はこのような感じ。WPに自前プラグインをインストールこのWordPressに自作のプラグインをzipをアップロードする形でインストールし、有効化します。名前は利用するのがUsusamaなので仏教関係で、火をイメージさせ、かつ一説に「飲み込む」の単語から名前が付けられたのではないかとも言われている迦楼羅から「迦楼羅焔」。プラグインにGithubアカウント、リポジトリ名、アクセストークンを設定プラグインを有効化するとサイドバーにメニュー(「迦楼羅焔設定」)が表示されるので、そこを選択。tokensを入力し、保存します。これでWordPress側の準備も完了です。以上の設定や改修を終えて、WordPressで記事を更新します。Actionsのワークフローが実行されます。jobで完了しました。Actionsを使ってWordPressの記事を静的サイトにデプロイ」という目標は達成できました。課題として以下の点が挙げられます。WordPress周りですね。上ではWordPressのプラグイン(「迦楼羅焔」)をさらっと流してしまいましたが、やっていることは以下の通り。Actionsのrepository_dispatchイベントをキック中身としては「JSONデータをPOSTする」だけですが、file_get_contents関数で上手く行かなかったのでHTTPクライアントライブラリのGuzzleを使いました。guzzleという英単語も「暴飲する、がつがつ食べる」といった意味のようなので、偶然ですが「食べる、飲み込む」関係のそれっぽい単語でまとまることになりました。そもそもUsusama自体Gulpを使っていることから「飲む」イメージでネーミングしていますし。Guzzleこの記事を書いた人アルム=バンドフロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。RasPiで遊んだり、趣味で開発したり。