コーディングバージョン管理自動化Static Site GeneratorGitHubHexoesaNetlify

HexoブログをesaとGitHubで更新してNetlifyにデプロイする

Hexoブログ esa更新 画像1

Hexoのような静的サイトジェネレーターは、書き出されるコードが普通のWebデータ（HTMLなど）なので、WordPressのような環境依存が無い。よって、公開までの流れを柔軟にカスタマイズできる。例としては次のような手段があり、今回は4段目の方法を紹介する。

1. 手段の把握

Hexoの運用は、Hexoデータ（Hexo本体・プラグイン・テーマ）と記事データ（Markdown）から静的Webデータを書き出して、公開場所にデプロイ（展開）するという流れとなる。

前回までの方法で、開発コード全体のバージョン管理・プライベートリポジトリ利用・自動デプロイ・独自ドメイン＋https＋http/2などの機能を満たしてきた。

もう一歩欲しいのは「投稿するためのダッシュボード」。コーディング用のエディタでブログ執筆というのは、WordPressを使ってきた自分としては手に馴染まない。どのファイルに何を書いたか分かりづらいし。

そこで、Markdown執筆が快適にできるesa.ioというWebサービスから、Hexoブログを更新できるようにする。

2. 事前準備

  • Hexo：ブログをローカルに作成
  • GitHub：サインアップ・リポジトリ作成（プライベートでもOK）
  • esa.io：サインアップ（月500円/トライアル期間あり）
  • Netlify：サインアップ（無料プランでOK）

3. 事前セッティング

HexoブログをGitHubに上げてNetlify上にデプロイする設定は、前回とまったく同じ。ブログをNetlifyで公開するところまで進めておく。

4. GitHubでAccess Tokenを発行

GitHubで自分のアカウントの Settings からアクセストークンページへ移動。Genarate new token を押しリポジトリコントロールの権限を持たせトークンを発行する。

Hexoブログ esa更新 画像2

発行された文字列はesa側で使う。登録することによって、esaからGitHubにMarkdownファイルを投げ入れる（リポジトリを書き換える）ことができるようになる。

5. esaにGitHub Webhooksを設定

Hexoブログ esa更新 画像3

esaの Teams > Webhooks > Add webhooks からGitHubへのWebhooksを設定できる。以下を入力して Save すれば完了。

  • Label：【esa】管理するWebhooksの名前（なんでもいい）
  • esa root category：【esa】Markdownファイル化して飛ばしたいディレクトリ（日本語OK）
  • repo：【GitHub】誰のどのリポジトリにMarkdownファイルを転送するのか
  • branch：【GitHub】どのブランチを対象にするのか
  • output directory：【GitHub】リポジトリ内でどのディレクトリにMarkdownファイルを転送するのか
  • API Access Token：GitHubで発行したアクセストークンをここにペースト

6. esaで記事を執筆

Hexoブログ esa更新 画像4

試しにブログへ送る記事を書いてみる。WIPだとWebhooksが発動せず、esa側だけに残せるの下書き保存が可能。Ship It!するとGitHub側に転送される。

Hexoのテーマや設定を特にいじっていない場合、esaから反映されるデータは以下の通り。

  • 記事タイトル：投稿タイトルに入力しているのもの
  • カテゴリー：Webhooksの esa root category からタイトルの間に書いたスラッグを反映（日本語OK）
  • タグ：タイトルの後に # で付けたタグを反映（日本語OK）
  • 投稿日：記事を書き始めた日（WIP開始時も含む）
  • 更新日：更新してShip It!した日
  • OGP画像：投稿内最初の画像
  • ディスクリプション：投稿内最初の200文字
  • 投稿内容：テキストエリアに書いたMarkdown

7. esaの記事をShip It!してブログ更新

Hexoブログ esa更新 画像5

無事にページが公開された。投稿の追加・修正する場合はesaを更新するだけでいい。記事を削除する場合はGitHub上のMarkdownファイルを削除する。

関連記事