カスタマイズをしていると、

なるべく開発環境で確認しながら微調整をしていきたくなります。

はい。

一週間ほどeasy-notion-blogと戯れるようになり、

Homeページだけでは事足りず、

Blogページ一覧のデザインにまで

興味が湧いてきてしまったへろほろです。

そんな時、

また天からの声が・・・・・

👆「#6 Local preview」をクリックするとgithubへ飛べます＼(^o^)／

今日は、

12月17日に追加されたPreview機能を使えるように設定していこう٩(๑´3｀๑)۶

easy-notion-blogのREADMEに説明があります。

▼「カスタマイズするには」の部分

VSCodeを開き、.env.localファイルを追加する

NOTION_API_SECRETやDATABASE_IDを記入するために

自分のブログを設定しているVercelからコピーする

表示させれた文字列上にカーソルを持っていくと「Click to copy」が表示されるのでクリックする

コピーした文字列を.env.localに貼り付ける

Local preview #6で追加されたことからローカル上でもインストールが必要になるようです。

▼ .nextフォルダを削除

ターミナルからインストールする

yarn install

ターミナルで開発環境を起動

yarn dev

▼　起動すると開発環境のリンクが返ってくる。

http://localhost:3000/

👆ここにアクセス

Blogページも見ることができたーーー＼(^o^)／(すごいー)

本文を表示させることもできるーーー＼(^o^)／

「日付の文字をもう少し大きくしたいな〜」

と思った場合、

VSCodeで修正し

👇

⌘Sで保存

👇

githubで同期

👇

Vercelが反応

👇

ブログを開いて反映を確認

👇

失敗してたらVSCodeで修正からやる

といった工程が・・・・

VSCodeで修正

👇

⌘Sで保存

👇

開発環境を起動して確認

すごく簡単になりました＼(^o^)／＼(^o^)／＼(^o^)／