💬 Portfolio
Notion APIとNext.jsで無料ブログ作成
date
May 17, 2023
slug
notion-api
author
status
Public
tags
TechBlog
summary
type
Post
thumbnail
スライド
category
💬 Portfolio
updatedAt
May 20, 2023 12:58 PM
動画はこちら
![Video preview](https://i.ytimg.com/vi/Mw3V9G4mmes/hqdefault.jpg)
概要
Notionの、データベースとNotion APIという機能を使ってブログを構築していきます。
Notionとは、情報管理プラットフォームで、私も情報をまとめるのによく使っています。
そのNotionをCMS「コンテンツ管理システム」(Content Management System)として使いブログを構築します。
CMSの有名なものにはWordPressなどがありますね。
使用する言語は、Next.jsになります。
サイトを構築したら、Vercelというクラウドプラットフォームにデプロイし、誰でも見れるようにしていきます。
ブログは「morethanmin」のテンプレートを使うのであっという間に出来上がります。
Thanks Template
全て無料です。
環境
- Notion
- Next.js
- Vercel
準備
Notionのアカウント作成
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffa0e3130-c320-4b8b-8743-131b505123ec%2FUntitled.png?table=block&id=faa43683-66a8-4f16-ab41-4b1328097d6f&cache=v2)
インテグレーションの作成
- ワークスペースができたら、左側の「設定」を押します。
- 「コネクト」を押します。
- 「インテグレーションを作成または管理する」を押します
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe3f229b7-f932-4671-938e-616a08820f77%2FUntitled.png?table=block&id=39ce5095-a485-4ef3-afd5-567cb417d76f&cache=v2)
- 新しいインテグレーション
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F70a64a39-02ba-441f-92e0-cfc2d3f5c616%2FUntitled.png?table=block&id=e6cdfb24-96fe-4b91-bff3-6494c2a5c435&cache=v2)
- 好きな名前をつけて、自分のワークスペースか合っているのを確認したら送信を押してください。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffa5855d7-22b6-4e5a-83df-e9151e8b7215%2FUntitled.png?table=block&id=6bc03e41-69f7-495b-80f7-44747e6deeaf&cache=v2)
- シークレットキーが表示されますが、今回は使いません。
必要なときは後から見れるのでメモしなくて大丈夫です。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F731ad3f9-0620-4209-9ce1-9d81c7715a16%2FUntitled.png?table=block&id=7584fde9-7f7c-4f5d-b2e4-293fcc8bd363&cache=v2)
テンプレートの準備
こちらの素晴らしいテンプレートを使わせていただきました。
READMEの Getting Started の通りに作業していきます。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F4edbb031-ad3b-4bd8-9188-33a91c30edcb%2FUntitled.png?table=block&id=03f2d422-f44a-405b-9d20-5677b904b309&cache=v2)
2.Fork the repo to your Profile.
のところの”Fork”にリンクが貼ってありますので、押してもらうと
自分のリポジトリにForkする画面になります。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fd710d52c-5ab9-40fd-a81a-7339b0f8bac2%2FUntitled.png?table=block&id=6bbae7f2-6b16-49e8-bf69-c35af59f687a&cache=v2)
3.Duplicate this Notion template, and Share to Web.
の”this Notion template”のところにリンクがありますね。
これを押して、Notionデータベースを自分のNotionへ複製します。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F69b56c4c-0030-4d87-b329-d65bdbdd7c18%2FUntitled.png?table=block&id=f5d62443-5634-427d-8bc7-6acf28fc77e4&cache=v2)
複製先は、自分のワークスペースが出てくるので、追加したいところを選びましょう。
4.自分のNotionにいくと複製されたデータベースがあります。
右上の「共有」から「Webで公開」を設定。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F605c2f4f-e7b1-4b20-9d9e-b968708ee7dd%2FUntitled.png?table=block&id=647178d8-d716-4ea5-a684-79a0580fee50&cache=v2)
「Web公開用リンクをコピー」して見てみると、
となっていて、?の前の〇〇のところがデータベースのIDになります。
※32桁くらいあります。
同じページの右上の・・・を押して、
コネクトに追加しておきましょう。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F90815b30-333b-41c2-ad04-90b29f86f929%2FUntitled.png?table=block&id=499b5489-1b20-4fd6-92f7-9524965e2787&cache=v2)
※ここはインテグレーションを作成したので出てくるようになります。
開発スタート
自分のパソコンにNext.jsのデータを持ってきましょう。
私は「Code」のところでSSHのパスをコピーして、`git clone` しました。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F073a49aa-12f4-4bc1-80e6-5d865a9a1142%2FUntitled.png?table=block&id=21873064-d660-4c41-baeb-2ceac24da59c&cache=v2)
- ルートフォルダに.envを作りましょう。
.envにはNotionデータベースIDを入れます。
NOTION_PAGE_API="〇〇〇〇〇"
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3021e331-5bc3-401e-ae03-cc517666610b%2FUntitled.png?table=block&id=926115fe-137b-4398-ae8f-edeb6dbcf7da&cache=v2)
.envは.gitignoreに入っているので、Githubにアップロードされる心配はありません。
- ローカルで立ち上げてみよう。
ターミナルなどで、cdコマンドでgit cloneしてきたプロジェクトのディレクトリまで移動しましょう。
- 一応、Nodeの16以上が入っているか確認してみてください。
node -v
古いようなら新しいのを入れましょう。
- プロジェクトに必要なパッケージやモジュールをインストールする
npm install
- 開発環境を立ち上げます。
npm run dev
にブラウザでアクセスしてページが表示されればOK!
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fad53ae44-fcb7-4dd4-942c-1b5d04605541%2FUntitled.png?table=block&id=c2ebc1f3-80f0-40e7-9e14-39e87837ad42&cache=v2)
※3000ポートをすでに使っているときは3001に自動でなります。ターミナルに表示が出ます。
npm upgradeするとエラーが出るので注意。
自分用に変更していこう
主に
- site.config.js
- Notion
を設定していきます。
Vercelへのデプロイ
Vercelのアカウント登録
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fed7e074b-8723-4b5d-877b-14c24e3d7a31%2FUntitled.png?table=block&id=1cd70f0d-136a-43da-b933-d0b89c2241c1&cache=v2)
Add New → project
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe8b8facd-1254-4936-8a5b-c588e28e8062%2FUntitled.png?table=block&id=3d48b42c-615b-479b-bad6-7346dd57c432&cache=v2)
ここでVercelにデプロイしたいGitHubのリポジトリを「import」ボタンで選択する。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1f1913b4-f58e-4105-82ae-be958f5b4df0%2FUntitled.png?table=block&id=fa95c04b-e131-456e-bb8f-e0cc81e2ff4f&cache=v2)
環境変数を設定しよう!
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9b70c15f-1bd2-4384-8d2d-92bc681b6bf6%2FUntitled.png?table=block&id=b363a1ae-3326-46f1-b25d-893835ad314e&cache=v2)
.envに設定したものと同じです。
- Name:NOTION_PAGE_ID
- Value:ご自分の環境に合わせて設定(.envに記載したもの)
「Deploy」ボタンを押して、無事にビルドが完了したらOK!
※失敗したらコードが何かおかしいかも
これで選択したGitHubリポジトリとVercelが連携されているので
リポジトリにpushすると自動的にサイトに反映されます。
visitボタンでサイトを見にいけます。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe5f72dd3-c738-414e-bd35-3da590f71786%2FUntitled.png?table=block&id=417e4377-4632-486e-ac05-57c32f15ff80&cache=v2)
Vercelに独自ドメインを設定
ドメインを取ろう
お名前.comでcriceto-webを取りました。
初めてだと、comドメインが初年度、無料でした。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe51b4947-056f-444d-bc9e-66c5ae9d9ae4%2FUntitled.png?table=block&id=d458ba94-7727-403c-bdd9-087b7b37745f&cache=v2)
Vercelへ設定
設定対象のプロジェクトを選んで、
Setting → Domains → 取得したドメインの入力 → Addボタン
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Ffe4930b7-a703-4893-8d46-3b8dfa818f6c%2FUntitled.png?table=block&id=7fd76ab6-a968-4810-b259-7ead8fc9d866&cache=v2)
私はRecommendedを選びました。
- wwwサブドメインをメインのドメインとして登録します。
- wwwなしできたらwwwへリダイレクトをかけます。
この方がVercel的に、受信トラフィックの強化、信頼性、速度、セキュリティが向上するとのことです。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8f9e5fd2-ad21-42aa-a7a2-feaca085a972%2FUntitled.png?table=block&id=04ad3520-a303-40b7-86fd-1d82922dfb54&cache=v2)
Invalid Configuration(無効な設定)になりますので、足りない設定をしていきます。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa5ba8c22-1ee4-4112-b61d-c6d09a1db20d%2FUntitled.png?table=block&id=8dd936d5-3079-408b-9a76-4ffe6014c2f3&cache=v2)
今回は無料でやるため、VercelのDNSサーバーを使います。
※お名前.comのDNS申込みがこの時に月額130円でした。
タブで「or Nameserves」となっているところをクリックして、enable のボタンを押すと、
情報が出てきます。
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1cc705ca-348f-4535-bc24-e9ed48187b3a%2FUntitled.png?table=block&id=cd719b9f-1c45-478a-bb0e-8ca358e899d3&cache=v2)
お名前.comで作業していきます。
お名前.com の ネームサーバーを変更する
ネームサーバ設定 → ネームサーバー設定
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8e426527-a566-4303-b184-65caa1a453e2%2FUntitled.png?table=block&id=026b83d9-5d50-47f8-8970-63125be89a78&cache=v2)
ネームサーバーを設定する
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb27fec7f-3192-432e-9d35-bcdd9f9a2c3e%2FUntitled.png?table=block&id=d9425952-e790-4bc0-86c5-b69149d19bff&cache=v2)
Vercelの設定画面が変わりましたね。
ドメインの浸透まで少し時間かかります。(私の場合、10分~15分くらいでした)
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb98928be-9bb0-41fe-a5c6-6761b9963960%2FUntitled.png?table=block&id=aec55616-7448-4273-90c3-6a4c1c87cc8e&cache=v2)
無事にSSL化までしてくれています。
Notionに記事を投稿しよう!
複製したNotionのデータベースがあるので、追加やすでにあるものを編集してみよう。
・Notionへの変更がサイトへ反映されるまで数時間かかります
・「Status」のところは必ず何か選択しないとbuildエラーになるので気をつけよう!
・SlugはURLになります。途中で変更するとビルドするまで404エラーになります。