開発１日目でやったこと：

• 必要なものをインストールする👉ココ扱います
• githubやNext.jpのサンプルをいじって雰囲気を味わってから(※ブログ開設kptより)
• 実際にnotionでブログを開設する際に必要なプログラムkitを使って公開する👉ココ扱います

までを実装しました。

Node.jsの公式サイトからダウンロードする

ダウンロードが終了したら、

ターミナルを開いてバージョンを確認してみよう＼(^o^)／

node -v
npm -v

そのままターミナルからコマンドを一行ずつ打っていく。

cd /usr/local/lib　　　** カレントディレクトリをlibへ移動
sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}　　** permission deniedエラーに対する処置
npm install -g yarn  ** yarnインストール

• GitHub：この記事が参考になります

• Vercel：この記事が参考になります

▼

今回初めてGitHubを使われる方は、

ローカルPCにGitHubのアカウントを設定しておく必要があります。

GitHubのサイトで登録したアカウントとローカルPCが同じだということを設定するものです。

GitHubのeasy-notion-blogをcloneする

プログラムkitの制作者(アルパカさん)のブログに解説があったので、

その記事を頼りによちよち進みました。😁

ターミナルからgithubを複製する

git clone [githubのHTTPS]　///[ ]は外し、下の図のようにして取得したリンクを記入////

https://github.com/otoyo/easy-notion-blog

*********

V0.10.0からクイックスタートの工程が減り、

Notionでデータベースを用意せずテンプレートを使って設定を行えるようになったので

クイックスタートの通し番号の変更がされています。

「実際にテンプレートを自分で用意して使うのにはどんなことに気をつければいいのか…」

これは今後NotionでAPIを使って何かを作る上でとても大切なことなので、

本記事ではテンプレートのなかった時期の解説のままにしています。

v0.10.0以降の方は実際のクイックスタートと見比べながら

不要な工程をスキップしていただきながら作業を進めていっていただければ幸いですm(_ _)m

******** 🔄  2022/08/01

ローカルに入れられたら、READMEのクイックスタートを淡々とこなしていく

(先にクイックスタート８を済ませてしまってますね。すんません)

クイックスタートの記述部分にある青文字はリンクが埋め込まれているので

わざわざ検索してアクセスしたり調べたりしなくてもできる(*^^*)(めっちゃ親切〜〜〜)

• クイックスタート２：ページを作成

新規作成する空のページは純粋な親ページにしなくてもOK

(私なんて結構下の下に用意してますが問題なく動きます)

• クイックスタート３：DBを追加

半角スラッシュを入れると装飾のメニューが出てくるので「Table database - inline」を選ぶ

• クイックスタート４：データベースへ移動

クイックスタート３で作ったpage内のTable database - inlineが「一階層下のデータベース」のことです。

• クイックスタート５：列がName・Tagsになっていることを確認

プロパティタイプが一致しているかも初期化スクリプトに影響します。

Name👉Titleプロパティ

Tags👉Multi-selectプロパティ

※　notion上で列をいじってしまったがゆえに初期化スクリプト実行時エラーになってしまう….👉要注意!!!

• クイックスタート６：データベースIDを取得しメモ

用意したTable database - inline自体のリンクを取得する

コピーしたリンクをどこかに貼り付け、データベースIDの部分を絞る

https://www.notion.so/⭐⭐⭐?v=❌❌❌

👆この⭐⭐⭐部分を「データベースID」として後で使用する

• クイックスタート７：NotionAPIを作成しTokenをメモ

Create an integrationとはリンクのStep1の部分

以下、動画を参考に進めてみる。

公式APIへアクセスする

↓

「New integration」から新規作成

↓

Submitに必要な項目を記入する

↓

Internal Integration Tokenを「Show」にしてコピーしておく(後で【NOTION_API_SECRET】で使用)

• クイックスタート８：

Share a database with your integrationとはリンクのStep2の部分

工程が少ないので動画を一度見れば設定に迷いはないはず＼(^o^)／

• クイックスタート９：初期化スクリプト実行

READMEではGitHub CLIである[email protected]:otoyo/easy-notion-blog.git での記述となっていますが、

私は上手くいかず、HTTPSの方で無事成功しました。

git clone https://github.com/otoyo/easy-notion-blog.git && cd easy-notion-blog

https://prog-8.com/docs/git-env

• クイックスタート１０

クイックスタート６で確認した【データベースID】

クイックスタート７で確認した【Internal Integration Token】を使います。

クイックスタート９で使用したターミナルアプリを使用し、

DATABASE_ID='自分のデータベースID' NOTION_API_SECRET='自分のInternal integration Token' ./scripts/init-database.sh

実行すると、Notionで用意した空のデータベースが列名・サンプル記事が自動追加されます。

• クイックスタート１１：vercelにログイン

• クイックスタート１２：リポジトリ(****/easy-notion-blog)を選択しインポート

選択肢にeasy-notion-blogが無い場合…

ご自身のGitHubリポジトリ一覧にeasy-notion-blogがあるか確認してみてください。

おそらく見当たらないかと思います。vercelも同じような現象になっています。

git cloneをしたeasy-notion-blogフォルダをご自身のGitHubリポジトリへ追加してみましょう(*^^*)

• クイックスタート１３：環境変数を設定する

初期化スクリプトで登録したDATABASE_IDやNOTION_API_SECRETをVercelにも登録する必要があります。

*********************追記ここまで*******

Vercelでエラーになることが度々あって何時間も格闘したけど、

結局余計なことをしてしまっていたり、何度も作っては削除しての繰り返しだったけど、

なんとか実装できてめでたしめでたしでした。

(Congratulations!の画面見て感動しました・・・(*´ω｀*))

この後、ブログの記事を投稿していくためのデータベース(IDとかAPIとか設定したあのTable database - inlineのこと)に記事を追加していけばブログ生活を送ることが出来ます＼(^o^)／

日付を当日にすると反映されないことがあります。

原因は時差です。

解決方法は３つ

• 日付を前日にする
• 午後になるまで待つ
• NotionDB上で設定する(下のツイートより)

開発環境も用意されています＼(^o^)／

.env.localというフォルダをtop階層(package.jsonなどのある階層)に設置して、環境変数を記述する必要があります⭐

DATABASE_ID=
NOTION_API_SECRET=
NEXT_PUBLIC_URL=
NEXT_PUBLIC_GA_TRACKING_ID=

この設定後、

ターミナルでyarn dev と打ち込むと開発画面のリンクが返ってくるのでリンクを踏むと表示されます＼(^o^)／

Vercelのdeploy前の段階でいろいろ試せますー。

いじったら

必ず保存して

「これで行こう！」となったら、

GitHubに同期させ

Vercelにアップロード。

このときVercelはGitHubと連携しているので自動でアップロードが処理されます。

追い抜かされることもあります。

こういった場合はご自身で取り込む必要があります。

easy-notion-blogでハッピーなブログ生活が送れますように(*´∀｀*)♫

herohoroブログではeasy-notion-blogの導入から改造・鬼改造…といった流れを記事にしています。

３部構成になっています。

Mapタグを開くと解説がありますので参考になさってくださいm(_ _)m

何かお困りなことがありましたら気軽にTwitterコミュニティを活用してくださいね＼(^o^)／

(頻繁に出現しますwww)