herohoroブログ

easy-notion-blogを開設する流れ_これでもかと丁寧に解説



🔄   2023-01-13

開発1日目でやったこと:

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

までを実装しました。

▼ 必要なものをインストールする
1.Node.jpをインストールする

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

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

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

node -v
npm -v
image block
😮‍💨
nodeとnpmってやつが無事にインストールされてるみたい(一安心)

2.yarnをインストールする

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

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インストール

permission deniedエラーに記述について 2023/01/12
🙇‍♀️
キノハル先生(@KinoharuK11585)とのやりとりで発覚 当時、私はエラーに泣かされネットで探してやっとたどり着いたコマンドでしたが… なぜこういった書き方なのか…までは未だに理解できておりません。 急に自信が無くなってきたので、 「もしエラーで困ったらこんなコマンドもあるよ」程度で留めていただければ幸いです。。。

必要なアカウントを取得する
image block

image block

image block

▼ 実際にnotionでブログを開設する際に必要なプログラムkitを使って公開する

GitHubのアカウントをローカルPCに設定する

💁‍♀️
※ 別途Gitの初期設定が必要です。 git config --global user.name "GitHubのアカウントusername" git config --global user.email "GitHubに登録したメールアドレス"

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

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

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

初期設定の追記について 2023/01/13
🙇‍♀️
キノハル先生(@KinoharuK11585)とのやりとりでアドバイスいただきました。 当時、私はGitHubをすでにインストールしていたのでこの設定は済んでいる状態から easy-notion-blogの開設作業をしていて、全く気づいていませんでした。 すみません。。。

GitHubのeasy-notion-blogをcloneする

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

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

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

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

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

image block

*********

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

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

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

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

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

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

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

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

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

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

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

image block
2022/05/28 commit時点のクイックスタート

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

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

クイックスタートに追記:
  • クイックスタート2:ページを作成

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

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

image block

  • クイックスタート3:DBを追加
image block

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

image block

  • クイックスタート4:データベースへ移動

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

image block
☝🏻
Table database - inlineのデータベースは「Untitled」のままいじらずでいい。 初期化スクリプトを実行した時にカラム名や「My 1st post」という行が自動で追加されるよ

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

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

Name👉Titleプロパティ

Tags👉Multi-selectプロパティ

👌
Are you OK ????

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

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

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

image block

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

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

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

⚠️
Table database - inlineを含むpageではなくTable database - inline そのもののリンクを取得する

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

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

image block

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

公式APIへアクセスする

「New integration」から新規作成

image block

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

image block

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

image block

  • クイックスタート8:

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

image block
2022/09/07に仕様変更になったconnections。差し替え済___09/20

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

  • クイックスタート9:初期化スクリプト実行

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

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

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


📎
SSHでの設定についてはprogate「 Gitの環境構築をしよう」(無料)の記事がとても分かりやすいです。
image block
easy-notion-blogコミュニティメンバーのチャベスさんが教えてくれたよ\(^o^)/

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


  • クイックスタート10

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

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

⚠️
シングルクォーテーションで括って記述していきます
image block
資料が古いことからクイックスタートNo.は-1になってますが内容は同じです
Internal integration Tokenはsecret_**** といった文字列を指しています。

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

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

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

改行せずに打ち込んでくださいね

  • クイックスタート11:vercelにログイン

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

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

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

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

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

  • クイックスタート13:環境変数を設定する

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

image block

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

image block

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

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

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

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

記事を追加しよう

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

image block

記事を追加する際の注意点

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

原因は時差です。

解決方法は3つ

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

カスタマイズする場合

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

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

DATABASE_ID=
NOTION_API_SECRET=
NEXT_PUBLIC_URL=
NEXT_PUBLIC_GA_TRACKING_ID=
.env.local
初期化スクリプトの時のように「”」でくくらない状態で文字列を記入してください
😋
NEXT_PUBLIC_URLはソーシャルボタンを設定する場合に必要です。 NEXT_PUBLIC_GA_TRACKING_IDはGoogleアナリティクスを設置する場合に必要です。
image block

この設定後、

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

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

いじったら

必ず保存して

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

GitHubに同期させ

Vercelにアップロード。

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

追加された本家のcommitを取り込む

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

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

📎
取り込む工程に関する記事はこちら「GitHubで更新されたeasy_notion_blogの機能を取り入れよう

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


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

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

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

image block

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

(頻繁に出現しますwww)

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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