NotionをヘッドレスCMSとして、Next(13)でブログ作成し、Github Pagesに公開したときにつまづいた所

NotionをヘッドレスCMSとして、Next(13)でブログ作成し、Github Pagesに公開したときにつまづいた所

元ネタはこちらです。
これをアレンジしてブログを作りました。
Githubでも公開しています。

元ネタではHostingサービスにVercelを使用していますが、今回は以前から使ってみたかったGitHub Pagesを使いました。
GitHub PageとNext.jsで静的ページを構築を参考にしました。
この記事ではその方法などについては触れませんが、GitHub Pagesを使ったことによってつまづいた箇所が多々あったので、前置きとしてお伝えしました。

環境変数の設定が必要

GitHub Actionsの設定をすると、変更分をpushするとbuild→deployしてくれます。
今回はbuild時にエラーが発生してうまくいきませんでした。

APIResponseError: API token is invalid.
API Response Error: Invalid request URL - dvanoni/notero

どちらも環境変数を読み取れなくてエラーになっていました。
リポジトリ > Setting > Environments > Configure > github-pagesで環境変数を設定していましたが、それが原因だったようです。

環境変数ではなく、リポジトリ変数に入れたところ、buildが成功しました。
リポジトリ > Setting > Secrets and variables > ActionsのSecretsタブで「New repository secret」から追加します。

GitHub Pagesに公開した時に、readme.mdが表示される

GitHub Pagesにdeployすると、思った通りの表示にならず、readme.mdの内容が表示されてしまいました。
index.htmlが存在してもreadme.mdが優先されて表示されてしまうようです。

readme.mdを移動する

readme.mdを**.github**ディレクトリに移動したら解決します。

まとめ

環境変数の設定には注意が必要です。