Notion Blogをカスタマイズする環境の構築 (WSL2)

概要

Notion Blog をデプロイ後，WSL2のローカル環境でカスタマイズするための環境構築を行う．
デプロイ自体の方法やNotion Blogの概要については，notionバックエンドのzeit製ヘッドレスCMS“Notion Blog”が激アツ🔥 - Qiita が参考になります．

やること

本家の GitHubのRunning Locally に記載されていることを行う．

1. Yarn のインストール

# yarnのインストール:Ubuntu
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update && sudo apt-get install yarn 

2. 必要な環境変数の追加

次に，NOTION_TOKEN と BLOG_INDEX_ID を環境変数に追加する．

PC全体に環境変数を設定したくないので，フォルダごとに設定可能な direnv を使用する．

# direnv のインストール
$ sudo apt install direnv

また，.bashrc に以下の記述を追加する．(bashの場合)

# direnv の初期設定
export EDITOR=vi
eval "$(direnv hook bash)"

notion-blog のディレクトリに移動し，.envrc を編集することで環境変数を追加する．

$ cd notion-blog
# editコマンドで.envrcを編集するエディタが起動
$ direnv edit .

# 以下を.envrc に記述
# Set required variables for notion-blog
export NOTION_TOKEN=<自分のNOTION_TOKEN>
export BLOG_INDEX_ID=<自分のBLOG_INDEX_ID>

3. 依存パッケージのインストールと開発サーバの起動

WSL2のデフォルトの Node.js は古いため，最新のものを入れ直す．

# 最新の Node.js をインストール
$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

# 最新バージョンが返ってくればOK
$ node -v
v12.18.2

最後に Yarn で依存パッケージをインストールし，開発サーバを起動する．

# package.json に記述された依存パッケージをインストール
$ cd notion-blog
$ yarn install

# 開発サーバの起動
$ yarn dev

# 本番用にビルドする場合はこっち
$ yarn build && yarn start

参考

ijjk/notion-blog: A Next.js site using new SSG support with a Notion backed blog
インストール | Yarn
direnv/installation.md at master · direnv/direnv
Ubuntuに最新のNode.jsを難なくインストールする - Qiita