herohoroブログ

開発環境で変更結果を確認できるようにしよう_Preview機能



🔄   2022-08-02

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

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

はい。

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

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

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

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

そんな時、

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

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

今日は、

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

設定手順

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

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

image block

一緒に設定していこう

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

image block

NOTION_API_SECRETDATABASE_IDを記入するために

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

image block

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

image block

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

image block

追加の設定

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

.nextフォルダを削除

image block

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

yarn install

動くか確認

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

yarn dev

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

http://localhost:3000/

👆ここにアクセス

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

image block

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

image block

Preview機能によって便利になったこと

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

と思った場合、

VSCodeで修正し

👇

⌘Sで保存

👇

githubで同期

👇

Vercelが反応

👇

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

👇

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

といった工程が・・・・

Preview機能を利用することで

VSCodeで修正

👇

⌘Sで保存

👇

開発環境を起動して確認

すごく簡単になりました\(^o^)/\(^o^)/\(^o^)/

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/