CODE:LIFE

NotionZEIT NowReact

Notion に書くだけでブログとして公開出来る notion-blog の作り方①

avatar

notion-blogがもっと進化していくことを祈って、日本のユーザを増やすべくなるべく丁寧に入門用記事を書いてみます。

第1回目ではNotionをブログエディタ兼CMS、ZEIT Nowをブログ公開用サーバとして記事を公開するまで。第2回目ではサイト名やContactページの変更方法、記事に反映するブロック数の設定などを紹介します。

手順概要

  1. GitHub のアカウントで ZEIT のユーザ登録
  2. GitHub との連携設定
  3. Notion にBlog用のページとインラインテーブルを作成
  4. 接続に必要なインデックスIDとトークンを取得
  5. notion-blog のリポジトリを ZEIT にインポート
  6. Notion に記事を書いて Publish にチェック

 

notion-blog とは

ZEIT の Next.js エンジニア JJ Kasper 氏が開発した「Notionに記事を書くだけでハイパフォーマンスな ZEIT Now 上にWebサイトとして公開できるシステム」。

Notion単体でもWebサイトとして公開できますが、オリジナルデザインの適用、独自ドメインの設定やSEO対策、広告掲載などはできません。

NotionをヘッドレスCMS(ビュー機能がない[使わない]CMS)として、ZEIT Now でSSR(サーバサイドレンダリング)することにより、ユーザが快適に閲覧できなおかつ独自性の高いWebサイト構築ができるのが notion-blog です。

  

ZEIT Now(ツァイト ナウ)とは

An image from Notion

https://zeit.co/

サーバ構築不要でサービスを展開できるプラットフォーム。いわゆるPaaSです。読み方はツァイト(ドイツ語で時間という意味らしい)。

無料で出来る範囲でとても快適なのでケチケチした倹約家の筆者にも最適。

 

簡単かつ高速なデプロイ

AWSでもGAEとは比較にならないほど簡単にデプロイ出来ることが特徴らしい。

Gitリポジトリにプッシュしたら10秒くらいで検知されてビルドが開始され、notion-blogの場合は約30秒でデプロイ完了となります。

 

HTTPS対応の独自ドメインが設定可能

通常SSL証明書の発行が必要で、そのためには追加料金が必要だったりするHTTPS対応ですが、無料でHTTPSに対応しています。かなりありがたい。

 

高性能なCND 「ZEIT Smart CDN」

独自ドメインのネームサーバをZeitに移すことで、細かい設定は一切気にせずZeitのCDNが利用でき、しかもそれは高速。ブログのパフォーマンスを最高まで引き上げてくれます。

 

転送・実行無制限のサーバ

An image from Notion

2月頃にPricingページを見たときには100GB/月の制限があった気がしますが、2020/03/29時点で確認したところ「Unlimited Websites & APIs」との記載が!

非の打ち所がないですね。有料プランも月20ドル~Pro版(3人以上のメンバー参加)やBusiness版(稼働率99.99%SLA、SSO、カスタムSSL証明書など)がありますが個人でnotion-blogを開発する分には無料版で全く問題ないです。

 

価格表(2020/03/29時点)

An image from Notion
💡
※上記価格表はGoogle日本語翻訳で翻訳してあります

 

1. ZEIT のユーザ登録

既に作成済みの場合は 2. GitHub との連携設定 から参照ください。

An image from Notion

https://zeit.co/signup にアクセスしてContinue with GitHubをクリック。

GitHubのアカウントがない場合は https://github.com/join で作成しましょう。

 

GitHubのアカウント情報を入力して Sign in をクリック

An image from Notion

 

アカウントにアクセスしていいか聞かれるので Authorize Now by ZEIT をクリック

An image from Notion

 

Welcome to ZEIT が表示されたらFULL NAMEとアバターを設定して Continue をクリック。

ここまででユーザ登録は完了です。

An image from Notion

 

2. GitHub との連携設定

ユーザ作成が完了した時点で Import Project ページに移動するので From Git Repository を選択

An image from Notion

 

Install Now for GitHub をクリックしてGitHubとの連携を行います

An image from Notion

 

Install をクリック

An image from Notion

 

Your GitHub account github.com/<ユーザ名> is already connected to <ユーザ名> on Now. と表示されていれば連携完了。ZEIT Now側の前準備はこれで完了。

An image from Notion

 

3. Notion にBlog用のページとインラインテーブルを作成

適当にページを新規作成し、例えばBlogなどのタイトルを付けます。このタイトルはあとから変えたりしても問題ありません。注意すべきはここで Empty を選ぶこと。

作成場所はWORKSPACE、PRIVATEどちらでも問題ないようです。

An image from Notion

 

次に+アイコンからTABLE - Inlineを選択して追加

An image from Notion

 

各種プロパティを以下のように設定

An image from Notion
  1. Page(Title)... 記事のタイトル
  2. Slug(Text)... 記事のURL
  3. Published(CheckBox)... チェックが入った記事だけが公開されます
  4. Date(Date)... 記事の日付として公開されます
  5. Authors(Person)... 記事の筆者名として公開されます

 

4. 接続に必要なインデックスIDとトークンを取得

Notionに接続して記事データをZEITから取得するためには2つの変数が必要です。

認証のためのトークン「NOTION TOKEN」とどのページにブログコンテンツ用のテーブルがあるか判別するためのID「BLOG INDEX ID」です。

それぞれ取得するためにはブラウザが必要になるためアプリ版で閲覧している場合はブラウザでログインし直してください。

 

先程作成したBlogページを開いてURLの「Blog-」以降の文字列をコピーしておきます。メモ帳Notion上に貼り付けておいてもいいですね。こちらがBLOG INDEX IDになります。

An image from Notion

 

次にトークンの取得。こちらはデベロッパーツールを使用します。

F12キーを押してデベロッパーツールを起動し、>>に隠れているApplicationをクリック

An image from Notion

 

Cookies > https://www.notion.so/ を選択し、token_v2 の Value をコピーしておきます。

※このトークンがあればNotionからデータを取得できてしまいますので外部に漏らさないように注意してください。

An image from Notion

 

5. notion-blog のリポジトリを ZEIT にインポート

https://zeit.co/import/git にアクセスします。

An image from Notion

自分のGitHubリポジトリからインポートする場合は「Import Project from GitHub」ですが、今回は第三者(ijjkさん)のリポジトリなので右下のボタン「Import a Third Party Project」をクリック。

 

URLに「https://github.com/ijjk/notion-blog/tree/master」を指定してSTART

An image from Notion

 

ここで NOTION TOKEN と BLOG INDEX ID を聞かれるので入力して Continue をクリック。

※この変数を間違えるとコマンドラインからの修正が必要になるので間違えないようにご注意ください。

An image from Notion

 

何も入力せずに Continue をクリック

An image from Notion

 

自分のGitリポジトリとして作成する名前を確認して Create and Continue をクリック。

デフォルトはnotion-blogですが、変更したい場合はここで変更しておきましょう。また、デフォルトではPrivate repositoryにチェックが入っています。公開する必要は無いですが、無料のGitHubアカウントでチームに4名以上参加させたい場合は公開する必要があります。

An image from Notion

フレームワーク構成の確認が入りますが、何も変更せずに Deploy をクリック。

An image from Notion

 

緑っぽいが表示されていればデプロイまで成功しています!

黒いボタン「Visit」をクリックしてサイトを確認してみましょう。

An image from Notion

 

このようにMy Notion Blogのトップページが表示されるはず。Blogに移動してもまだ記事を書いていないので「There are no posts yet」と出ていますね。

An image from Notion

 

うっかり環境変数の設定を間違えた場合

はい。気づいた方も居るかもしれませんが、今回トークンとインデックスIDを設定するときうっかり逆にセットしてしまい正常にデプロイできませんでした。そりゃそうだ。

こんなのがでちゃったわけですね。

An image from Notion

こうなるとGUIから環境変数を設定出来ないのでNow CLIをPCにインストールしてコマンドラインから変数を一度削除して再設定することになります。まぁ、あとあと開発するにあたって必要になってくるんですが、簡単にデプロイしてみたかったのに!っていう方には大きな壁ですね。

 

解説記事は後日書きますがざっくり手順を記しておきます。

  1. Now CLI を インストール npm i -g now yarnなら yarn global add now
  2. Now に接続 now login <email> (<email>はZEITに登録したメールアドレス)
  3. 認証メールが届くのでメール内のVerifyボタンをクリックして承認
  4. ターミナルに√ Email confirmedと表示されたら成功
  5. Now に設定されている変数を確認 now secrets ls
  6. Now に設定されている変数notion-tokenを削除 now secrets remove notion-token
  7. Now に設定されている変数blog-index-idを削除 now secrets remove blog-index-id
  8. Now に新しい変数notion-tokenを追加 now secrets add notion-token <token_v2>
  9. Now に新しい変数blog-index-idを追加 now secrets add blog-index-id <index_id>

 

6. Notion に記事を書いて Published にチェック

Webページを公開できたことを確認したらいよいよ記事を書いてみましょう。

記事タイトル「テスト投稿」、Slug「test-2020-03-29」としてみました。

※Slugは空白の場合、記事タイトルがSlugとして処理されますが日本語のタイトルだと正常に動かないので手動で英数字のものをセットしましょう。

An image from Notion

Divider(区切り線) で区切ることで記事のプレビュー部分を設定できる

この機能が最初は良く分からなくて悩みました。文頭から最初のDividerまでの最大10ブロックが記事一覧でプレビューされます。

An image from Notion

 

こんなかんじになります。

An image from Notion

大事な注意点として、このプレビュー用領域に画像などを含めるとエラーを起こしてサイト自体表示できなくなってしまうのでマジで気をつけてください。文章のみにしておくことをオススメします。

 

まとめ

さて、ここまでで ”一応” Notion で書いた記事が Webサイト として公開できる ところまで達成できましたね。

ブログ名どうやって変えるの? とか ContactがJJ Kasperのままだけど? とか トップページを記事一覧にしたいんだけど などなど色々やりたいことがあると思いますが、明日以降でちまちま方法を書いていきます。

 

また、同様に現時点では対応していない書き方や機能が色々ありますが、以前書いた記事「notion-blog の惜しいところ」にまとめておりますのでご確認ください。ブロック数制限などはすぐに修正したいところですね。

 

次回は最低限 「自分のブログ」 として公開できるようにカスタムする方法をやりましょう。

参考になったページたち

Building a Notion Blog

Notion Blog を試してみました

notionバックエンドのzeit製ヘッドレスCMS“Notion Blog”が激アツ

Notionでブログを作ろう!

Zeit Nowの具体的なTips集