Notion Blog でローカル開発環境を構築する【Notion Blog 徹底解説 #7】

// 🙎‍♂️ Yuji Tsuburaya📆 July 11, 2020🔖 Notion Blog

こんにちは、毎日のように Notion Blog で記事を書いている @___35d です。いつもブログを読んで頂きありがとうございます🙌

今日は Notion Blog でローカル開発環境の構築方法について書いていきたいと思います。Notion Blog の構造や、スタイルを変更したりするのにローカル開発環境の構築は必要不可欠です。

Fork したリポジトリを Clone して手元に持ってくる

Notion Blog を開設すると、自分の GitHub リポジトリに Notion Blog のリポジトリの Fork したものが追加されていると思います。(GitHub 以外の BitBucket 等を使用していても大まかな流れは同じです)これを以下のコマンドで Clone して自分の手元に持ってきます。

$ git clone git@github.com:XXX/YYY.git

XXX/YYY のところは、GitHub 上で URL 確認することができます。SSH 経由の場合は事前にキーの登録が必要です。(HTTPS でも構いません)

GitHub 上から Clone する
GitHub 上から Clone する

手元に Notion Blog のディレクトリができていれば Clone 完了です。

パッケージのインストールをする

ターミナル上で、手元の Notion Blog のディレクトリに移動して、インストールコマンドを実行します。yarn もしくは npm どちらかお好みの方をお使いください。

## 移動 $ cd [ディレクトリ名] ## パッケージのインストール $ yarn install # もしくは npm install

node_modules というディレクトリができていれば成功です。

環境変数のセットをする

ローカル開発環境でも本番環境(というか、ご自身の Notion のデータ)を Fetch しに行くようになっているので、Notion との接続の設定をします。

ID と Token の取得方法は、こちらのブログで説明しているので、参考にしてみてください。

Notion Blog でブログを開設する【Notion Blog 徹底解説 #1】

以下のコマンドで環境変数をセットします。[YOUR-NOTION-TOKEN][YOUR-BLOG-INDEX-ID] のところにはそれぞれご自身の値をセットしてください。

$ export NOTION_TOKEN=[YOUR-NOTION-TOKEN] $ export BLOG_INDEX_ID=[YOUR-BLOG-INDEX-ID]

🚀 起動する

ここまで来れば準備は完了です。以下のコマンドで起動します。

$ yarn dev

localhost:3000 でアプリケーションが起動すれば成功です。

Notion Blog を localhost:3000 で起動したようす
Notion Blog を localhost:3000 で起動したようす

コードを書き換えると、リアルタイムでスタイルが反映されます。スタイルをお好きにいじってみてください!書き換えたら、GitHub に push すると、自動で公開されているブログの方にもスタイルが反映されます(Vercel の Webhook で検知してくれる)

まとめ

以下の手順でローカル開発環境を構築することができます!1 と 2 は初回だけで大丈夫です。

  1. Clone する
  2. パッケージをインストール
  3. 環境変数のセット
  4. 起動

ぜひみなさんもカスタマイズしてみてください〜🙌

シェアしてくれたら喜びます 👨‍🎤

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

詳しいプロフィールはこちら

広告