Notion APIと連携したNext.js用ブログテーマ Awesomeの紹介
Awesomeという名前のNext.js用ブログテーマを作成しました。
日々の勉強をブログに書いていきたいけど、ブログを作るのが面倒くさいという方や、Notionでブログを書いている方におすすめです。
技術用途や趣味用途のブログとして使えるように、カテゴリーを増やしたり、タグをつけたりできます。
このブログはNotion APIを使ってNotionに書いた記事がブログに 自動的に 反映されるようになっています。
どんなテーマかわかりやすいように動画を用意したのでご覧ください👇
デモページ
GitHub
各種設定
このブログを公開するには、Notionの設定やCloudflareの設定、Vercelの設定が必要です。
少し面倒ですが、設定が完了すればNotionに書いた記事が自動的にブログに反映されるようになります。
Notionの設定
まずはNotionでブログを書くための準備をします。
Notionのインテグレーションを設定
Notionの設定画面からブログ用インテグレーションを設定します。
サイドバーの「Settings & Members」をクリックします。
Connectionsという項目をクリックし、「Develop or manage integration」というリンクがあるのでクリックします。
新規にインテグレーションを作成するために「New integration」をクリックします。
作成のためのフォームが表示されるので、インテグレーションの名前を入力します。例えば「Awesome Blog」と入力し保存します。
インテグレーションの項目にシークレットキーが表示されるので、コピーしておきます。
Notionのページを作成
Notion上でページを作ります。こちらから複製するのが簡単です。
テーブルには以下の項目がありますので、それぞれの項目を埋めていきます。
テーブルのidを取得
テーブルのidを取得しましょう。テーブルのURLの?v=より前の部分がテーブルのidになります。
この場合のidは73b60eecc10f4e74a4e9e8cd6a8b3a6eです。
https://www.notion.so/73b60eecc10f4e74a4e9e8cd6a8b3a6e?v=ec2d1ecf153146679b44dc21fa54dc7a
Notionのページにインテグレーションを設定
準備が整ったら、先ほど作成したインテグレーションを作成したページに紐付けます。画面右上の3点リーダーをクリックし、「Add Connection」をクリックします。
先程作成したインテグレーションを選択しましょう。
Cloudflareの設定
Notion API経由で取得する画像のURLは一時的なURLなので、一定期間以上サイトが更新されないと画像が表示されなくなります。そこで、画像を永続化するためにCloudflareを使います。
まず、Cloudflareにログイン、または会員登録をします。
次に、Cloudflareのサイドバーから「R2」をクリックします。
R2の画面で「バケットを作成する」をクリックします。
好きな名前を入力し、バケットを作成します。
バケットを作成したら、先程作成したバケットをR2の画面でクリックします。
バケットの画面に移動したら、「設定」タブをクリックします。
設定タブの中に「r2.dev サブドメイン」という項目があるのでここでアクセスを許可します。
許可するとr2.devのサブドメインが表示されるので、このサブドメインをコピーしておきます。
R2 APIトークンの発行
次に、R2 APIトークンを発行します。これはISR時にNotion API経由で取得した画像をCloudflareに保存するために必要です。
R2の画面に「R2 API トークンの管理」というボタンがあるのでクリックします。
ボタンをクリックして移動すると「APIトークンを作成する」というボタンがあるのでクリックします。
作成すると、それぞれ Secret Key と Access Key が表示されるのでコピーしておきます。
最後に、R2の画面に戻り、アカウントIDが表示されているのでコピーしておきます。
Vercel側の設定
以下のボタンをクリックしてテーマをVercelにデプロイします。
Vercel側で環境変数の設定
作成したプロジェクトで環境変数を設定しましょう。
それぞれの環境変数の設定は以下の通りです。
環境変数名 | 説明 |
---|---|
NOTION_TOKEN | インテグレーションのシークレットキー |
NOTION_DATABASE_ID | Notionのテーブルのid |
NEXT_PUBLIC_SITE_URL | サイトのURL |
CLOUD_FLARE_ACCOUNT_ID | CloudflareのアカウントID |
CLOUD_FLARE_ACCESS_KEY | Cloudflareのアクセスキー |
CLOUD_FLARE_SECRET_KEY | Cloudflareのシークレットキー |
CLOUD_FLARE_BUCKET_NAME | Cloudflareのバケット名 |
CLOUD_FLARE_BUCKET_URL | CloudflareのバケットのURL |
以下のように環境変数が設定されていればOKです👌
これで準備は完了です。
Awesomeをローカルで開発する
ローカルで開発することでAwesomeを自分好みにカスタマイズすることができます。
前提条件
以下の環境がインストールされている必要があります。
Node.js 18系以上, yarn
依存関係のインストール
$ yarn
開発
$ yarn dev
好きなブラウザーで https://localhost:3300 を開いてください
ブログの細かい設定
blog.config.ts
を編集することで簡単にブログをカスタマイズすることができます。
blog.config.ts
export default {
// サイトロゴはここで設定してください👇
siteLogo: {
url: "/images/logo.svg",
width: 201,
height: 39,
},
// サイトの名前や説明はここで設定してください👇
siteName: "AWESOME",
title: "AWESOME",
description:
"AWESOME Next.js TypeScript MDX Blog Theme",
// ブログの色の定義など👇
styles: {
containerMaxWidth: "1280px",
colors: {
primary: "#50C0A1",
primaryGradient:
"linear-gradient(to right, #06A9B7, #B0DE87)",
base: "#F2F4F3",
border: "",
bg: "#F7F7F7",
text: "#2C2C2C",
grayLighter: "#A0A0A0",
},
// ブレイクポイント👇
breakPoints: {
huge: "1440px",
large: "1170px",
medium: "768px",
small: "450px",
},
},
// 著者の説明👇
account: {
name: "Mr. AWESOME",
description:
"profile here profile here profile here profile here",
image: `/images/me.png`,
social: {
twitter:
"https://twitter.com/steelydylan",
github:
"https://github.com/steelydylan",
},
},
// トップページのヒーロー画像👇
hero: {
title: "My awesome life",
image: "/images/plane.jpeg",
description:
"AWESOME Next.js TypeScript MDX Blog Theme",
},
// ブログのナビゲーションはここで設定してください👇
navigation: [
{
name: "travel",
url: `/travel`,
},
{
name: "camp",
url: `/camp`,
},
],
// 1ページごとの記事数などの設定👇
article: {
defaultThumbnail:
"/images/thumbnail.png",
articlesPerPage: 6,
},
// ブログのカテゴリーはここで増やしてください👇
categories: [
{
// idは半角英数字でNotionのテーブルで設定したカテゴリーのidと一致させてください👇
id: "camp",
title: "Camp",
imagePath: "/images/camp.jpeg",
description:
"Look at my awesome camp life",
},
{
id: "travel",
title: "Travel",
imagePath: "/images/london.jpeg",
description:
"Look at my awesome travel life",
},
],
// ブログのタグはここで増やしてください👇
tags: [
{
id: "london",
title: "London",
},
{
id: "boston",
title: "Boston",
},
{
id: "paris",
title: "Paris",
},
{
id: "fire",
title: "Fire",
},
{
id: "sky",
title: "Sky",
},
],
};
つまずきポイント
ブログを作成する上でつまずきやすいポイントをまとめました。
blog.config.ts
にてカテゴリーのidはNotionのデータベースで設定したidと一致させてください。- Notionのテーブルの項目は全て埋めてください。空の項目があるとエラーになります。
Authored by
Godai@steelydylan
Webサービスを作るのが好きなWebエンジニア。子供が産まれたことをきっかけに独立し法人化。サービス開発が大好き。
好きな言語はTypeScript。