Notion Blog でブログを開設する【Notion Blog 徹底解説 #1】

📆May 23, 2020🔖 Notion BlogNotion

🐈 「(少しマニアックな)Notion の使い方まとめ」という note マガジンでも、毎週1本 Notion の使い方に関する記事を発信をしています。 もしよければそちらも覗いてみてください。

  • 2021/04/12 書いてある情報が全体的に古くなってきてしまっていたので、note にリライトした記事をアップしました(本記事の情報は現在と異なっている可能性が高いのでご注意ください)
  • 2020/06/25 デプロイに失敗した場合について追記しました
  • 2020/06/21 環境変数のセットの方法を追記しました
  • 2020/06/20 Vercel の UI 変更に伴い、スクリーンショットの差し替えを行いました
  • 2020/06/13 エラーに関して追記しました。
  • Notion Blog の素晴らしさを日本に広めるために、今日から Notion Blog 徹底解説 というテーマで記事を書いていきたいと思います。Notion の個人プランの無料枠が拡張されたので、ドメイン代以外は無料でブログを開設することができるようになりました。

    Notion Blog を使えば、Notion 上で書いた文章がブログとして自動で公開することができます。note 、はてなブログ、WordPress、Medium などと違い、ブログツールで提供されたブラウザ上のエディタを使う必要はありません。Notion 上でブログ執筆の全てが完結します。

    Notion 上の記事一覧ページ。このブログも Notion Blog でできています
    Notion 上の記事一覧ページ。このブログも Notion Blog でできています

    また、コードもオープンソースで公開されているので、コードを編集することで自由にカスタマイズすることができます。Notion Blog のコア部分だけ使用し、デザインやその他のカスタマイズは自由自在です。独自ドメインを当てて、自分のメディアにすることなんかも可能です。

    Notion Blog はオープンソースとして公開されています
    Notion Blog はオープンソースとして公開されています

    そんな便利な Notion Blog ですが、

  • ドキュメントが英語
  • GitHub 連携が必要
  • ちゃんとカスタマイズしようとするとコードを書かなければならない
  • などといった理由で、非エンジニアの方には少し開設までのハードルが高さがあるなと、僕自身感じています。

    ということで、僕が Notion Blog の運用を通して得たノウハウを、なるべく丁寧に解説して非エンジニアの方にもぜひ使ってもらえたらなと思ってこの記事を書き始めました。基礎からカスタマイズまで、Notion Blog を使い倒してだいぶ詳しくなったので、よろしくお願いします。(何か質問等あればお気軽に @___35d までどうぞ。)

    ということで初回は Notion Blog の概要と、ブログの開設までを記事にしたいと思います。

    Notion Blog とは?

    バックエンド部分が Notion で、フロントエンド部分が Next.js という構成で作られた CMS(コンテンツマネジメントシステム) です。Notion 上で記事を書くと、Next.js が Notion 上の書いた記事を読み込みに行き、読み込んだ結果をうまくパース(解析)して、レンダリング(画面上に表示)されるという仕組みです。Next.js を開発している企業 Vercel (旧 Zeit)のエンジニア ijjk が制作しました。

    ブログを開設するだけでしたら、このあたりの仕組みは完全には理解しなくても大丈夫なので、ふわっとそういうもんなんだなとわかっていれば大丈夫だと思います。この記事では、ブログを開設することをゴールとしたいと思います。

    Notion Blog でブログを開設するまでの流れ

    流れをスクリーンショット付きでなるべく丁寧に解説していきたいと思います。

    まずは、Notion Blog のページにアクセスします。

    Notion Blog

    ページの下部に、Deploy というボタンがあるので、それをクリックします。

    Notion Blog のサンプルページ
    Notion Blog のサンプルページ

    クリックすると、Vercel (2020年4月までは Now というサービス名) というホスティングサービスのページが開かれます。ここで Continue を押すと、Notion Blog が Fork (オリジナルのソースコードが自分の手元にコピー)されます。

    Fork 元を選択する画面
    Fork 元を選択する画面

    (Vercel にログイン済の場合は、ここはスキップされますが)以下のような画面に遷移します。Continue with GitHub を選びましょう。GitHub アカウントを持っていない場合は、予め作成しておくことをオススメします。

    GitHub は自分で書いたソースコードを管理しておくツールです。プログラマのデファクトスタンダードになっているので、アカウントを持っていて損はないと思います。こちらももちろん無料です。GitHub アカウントの作成については、この記事の主旨とは大きく外れてしまうので、こちらの記事では割愛します。

    GitHub

    Vercel 上で、アカウント連携してログインする画面
    Vercel 上で、アカウント連携してログインする画面

    アカウント連携が完了すると、どのアカウントと連携するかが尋ねられます。連携した自分のアカウントを選択します。

    アカウント連携選択画面
    アカウント連携選択画面

    リポジトリ作成画面に遷移します。作りたいリポジトリ名を入力し、 Continue を押してください。特にこだわりがなければ、デフォルトの notion-blog のままでも良いと思います。(もちろん、あとからでも変更可能です)

    GitHub リポジトリ作成画面
    GitHub リポジトリ作成画面

    プロジェクトのインポート画面に遷移します。PROJECT NAME の欄はデフォルトで入っているものそのままで構いません。

    好きな自分の Notion の情報とつなげるために、NOTION TOKENBLOG INDEX ID という2つの情報が必要になります。(取得の方法は後述します)

    Environment Values を開き、一つ一つ入力していきます。

    (2020/06/21 追記)画面(GUI)から環境変数をセットすると、うまく動作しなくなってしまっていたので、CLI でセットする方法を別記事で書きました。こちらも合わせてお読みください🙏

    Vercel の環境変数を CLI でセットする

    👀

    BLOG INDEX ID は URL から取得することができます。まずは、Notion Blog の雛形にしたいページを新規で作成しましょう(僕の場合は NOTION BLOG というページを作成しました)。作成すると、URL が https://notion.so/NOTION-BLOG-XXXXXXXXXXXX のようになると思うので、この

    XXXXXXXXXXXX の 部分が、BLOG INDEX ID となります。

    BLOG INDEX ID の取得方法

    NOTION TOKEN は以下の手順で取得することができます。

  • Notion に Google Chrome 等の Web ブラウザでアクセスし、開発者コンソールを開きます。Mac で Google Chrome をお使いの方は、Command + Option + I で開くことができます。(右クリックから「検証」を選択しても同じ画面が開かれます。)デスクトップアプリ版の Notion だとできないので、注意してください。
  • 開発者コンソール内から Application タブ > Storage > Cookies > https: www.notion. so > token_v2Value に入っている値が NOTION TOKEN です。コピーして、さきほどの画面に貼り付けてください。
  • NOTION TOKEN の取得方法
    NOTION TOKEN の取得方法

    入力が完了したら、Deploy を押してください。

    (💪 補足)Vercel はソースコードを静的解析し、何のフレームワークで作られているのかを自動で読み取ります。今回は、冒頭で述べたように、Next.js 製の Notion Blog を使用しているので、自動で Next.js が選択されていると思います。


    👇 以下は、旧 Vercel の UI の場合の手順なので、読み飛ばして構いません。

    ここは何も入力せず、そのまま Continue を押してください。(こちらは、ソースコード上の、どのディレクトリをルートにするのかを尋ねられています。今回は、Notion Blog のコードをそのまま Fork しているので、変更する必要はありません。)

    ROOT DIRECTORY 選択画面
    ROOT DIRECTORY 選択画面

    もう一息です。自分の GitHub 上に作成するリポジトリ名を尋ねられます。ここも特にこだわりがなければデフォルトのままで構いません。

    最後に、Notion Blog のフレームワークとビルドコマンド(サーバーにソースコードをアップするときに、どういうコマンドを実行するのか)を尋ねられます。ここも、デフォルトのままで構いません。

    Deploy ボタンを押せば、全ての設定が完了です!

    フレームワーク選択画面
    フレームワーク選択画面

    👆 ここまで読み飛ばしで OK です。


    Deploy ボタンを押すと、Vercel のホーム画面に遷移し、自動でビルドとデプロイが走ります。スクリーンショットは、ビルドとデプロイが完了したあとのキャプチャになっていますが、3分ほど、デプロイに時間がかかります。

    デプロイが終了し、アイコンが緑マークになった後、Visit を押すと、自分の Notion との連携が完了した Notion Blog が出来上がっています。

    Vercel の Notion Blog プロジェクトページ
    Vercel の Notion Blog プロジェクトページ

    デプロイに失敗した場合には、GitHub で Notion Blog 用のリポジトリが作成されているので、適当に Readme file 等を編集して、commit / push をして、デプロイを走らせてみてください。

    どのファイルでも良いので、Commit Changes を押すとデプロイが走るかと思います。

    GitHub の画面
    GitHub の画面

    🎉 Notion Blog の開設 が完了

    Visit でアクセスすると、このようなページが開かれます。今は記事が一切ないので、何も表示されませんが、Notion 上で記事を編集すると、リアルタイムでこちらのページにも反映されます。

    URL はデフォルトだと、Vercel によって自動で割り振られるものになっているので、独自ドメインの当て方を次回以降で解説していきたいと思っています。

    Notion Blog の開設が完了。デフォルトのスタイルが当たっている状態
    Notion Blog の開設が完了。デフォルトのスタイルが当たっている状態

    Notion 側には、先程作ったページから、自動で Notion Blog の雛形となるテーブルが出来上がっています。このテーブルにページを追加していくことで、ブログの記事が公開されていきます(Published にチェックを入れたもののみ)。

    デフォルトのプロパティは以下のようになっています。

  • Page: ブログの記事タイトル
  • Slug: ブログの記事 URL
  • Published: チェックを入れたもののみ公開されるフラグ
  • Date: 記事を書いた日
  • Authors: 記事を書いた人
  • また、今回は解説しませんが、このテーブルにプロパティを追加していくことで、ブログを自由自在にカスタマイズできるようになります。

    デフォルトの Notion Blog のテーブル
    デフォルトの Notion Blog のテーブル

    冒頭で貼ったスクリーンショットは、この Notion Blog のテーブルを拡張していった状態です。

    僕の Notion 上の記事一覧ページ
    僕の Notion 上の記事一覧ページ

    ということで、今回は Notion Blog の開設方法について解説してみました。


    次回以降は、

  • URL がデフォルトだと、Vercel によって自動で割り振られるものになっているので、独自ドメインの当て方の解説
  • スタイルの調整の方法
  • タグやカテゴリ機能などの拡張方法
  • などを記事化していこうと思っています。記事リクエストも承っているので、「こんな記事書いて」や「これどうやってるの!?」等あれば @___35d までご連絡ください。質問もお気軽にどうぞ!

    ここまでお読み頂きありがとうございました!