notion API + NEXT.js + netlify でブログ立ち上げ ①

はじめに

これまで何度もブログを立ち上げては、10記事くらい書いたあたりで頓挫させてきました。
三日坊主気質なのも理由にありますが、一番の理由は記事が書きにくいことだったかなと。

例えばWordPressだと記事を書くためにわざわざシステムにログインして、ブラウザの中で書かなければならず。
環境によっては通信が重くてもっさりしたり、独特のショートカットを使用する必要があったり、よくiPadで記事を書いていましたが、スクロールしたいだけなのに変なところタップして記事が消えてしまったり...

(:3 」∠)

そんななかnotionを見つけ、（ほぼ）markdownで書けて、環境を選ばない。

しかもDB不要で、常に同期されていて、APIまであるときた。

素晴らしい

先駆者たちがnotion API を利用してブログやいろんなwebアプリを作っているのを見つけ、

自分もnotion APIを使ってブログを作ってみよう、と思ったので、制作工程を晒していこうと思います。

デプロイ先選定

今回デプロイ先はnetlifyにします。

理由:

• 将来的に広告とかマネタイズできる仕組みを入れたいな、と思ったので（nextjsだけど）vercelは除外
• github pagesは動的レンダリングのやり方が分からず...除外

netlifyでも動的レンダリングできるしAPIも作れるので問題なしでした。

（NEXTjsだとAPI routeなるもので自身でサーバーサイドAPIが立てれるとのことで、結局使用していませんが笑）

ていうかNEXTjs凄い...frontendのフレームワークってこんななのか

サンプルプログラムをnetlifyにデプロイ

サンプルプログラム

プロジェクトを作成してサンプルアプリを公式から落としてきます。

npx create-next-app blog --example "https://github.com/vercel/next-learn/tree/master/basics/typescript-final"

ビルドして立ち上げ。

cd blog && yarn build && yarn start

http://localhost:3000/ にアクセス

すでにブログ感ある...

netlifyにデプロイ

一旦このままでnetlifyにデプロイします。

netlify.tomlをproject rootに作成

[build]
  base = ""
  publish = ".next"
  command = "yarn build"
[[plugins]]
  package = "@netlify/plugin-nextjs"
[[plugins]]
  package = "netlify-plugin-cache-nextjs"

git hubにデプロイ

git push

netlifyで設定

netlify管理画面から、
Team orverview → Sites → Add new site → import an existing project
の順に遷移していき、画面に沿ってGitHubの該当リポジトリを選択

Site settings → Build&Deploy → Environment
で環境設定

• NOTION_BLOG_DATABASE
• NOTION_TOKEN
• NOTION_VERSION

Site settings → Domain Management → Custom domains
で自身のドメインを登録
時間がかかるので、しばらくした後に改めて確認。

当記事ではここまで。