📖

【Notion】Notion Blogでブログ開設〜10分でできるもん〜(デプロイ〜ローカル環境構築まで)

7 min read

Notion Blogでブログを開設しました

ちょっと前になりますが、Notion Blogでsisterのブログを開設したので、開設するまでの流れを書いてみようと思います。

▼sisterのブログはこちらです↓

https://blog.sisterwith.com/

▼ Notion Blogはこちらです↓

https://notion-blog.vercel.app/

▼ 参考記事はこちらです↓

https://blog.35d.jp/2020-05-23-notion-blog-1

Notion Blogとは

Notion Blog とは、Notion(バックエンド)で作成したブログ記事を Next.jsで作られたプロジェクト(フロントエンド)でWeb上に公開できるヘッドレスCMS(コンテンツマネジメントシステム) です。

環境

・Vercel
・Notion Blog(Next.js、TypeScrypt)
・Notion

1, Notion BlogをVercelにデプロイする

①Deployボタンをクリック

Notion Blogにアクセスし、以下のDeployボタンをクリックする

②GitHubと連携

GitHubのボタンからGitHubと連携します



対象のGitHubアカウントとプロジェクト名を入力して、Continueボタンをクリックします



対象のGitHubとリポジトリ名を入力して、Continueボタンをクリックします

③プロジェクトのデプロイ準備

プロジェクト名は特に変更しないで、進めます。
FRAMEWORK PRESETはNext.jsにします(デフォルトでなってるはず)



自分のNotionとBlogを連携させるために、環境変数を設定します
・NOTION_TOKEN
・BLOG_INDEX_ID

NotionでNotion Blogと連携させたいページを作成する

事前にNotionでNotion Blogと連携させたいページを作成する必要があります。
※ここでは一旦ページだけの作成で大丈夫です

NOTION_TOKEN取得方法

開発ツールの以下箇所がNOTION TOKENです
Applicationタブ > Storage > Cookies > https://www.notion.so
Name: token_v2のValue



BLOG_INDEX_ID取得方法

NotionでNotion Blogと連携させたいページのURLの以下XXXXの箇所がBLOG INDEX IDです。

https://www.notion.so/Notion-Blog-XXXXXXX


上記で取得した環境変数をVercelで設定します

④プロジェクトをインポート&デプロイする

デプロイ準備が完了したら、Deployボタンをクリックして、プロジェクトをデプロイします。




〜〜デプロイ中〜〜



デプロイ完了!!あっという間だ〜

⑤ちゃんとデプロイできているか見に行く

My Notion Blogの画面が表示されていれば、デプロイ成功!!



Blogはまだ投稿されていないので、空っぽですね。

2, ブログを投稿する

インラインテーブル[1]を作成する

テーブル名は「Index」とします。


テーブルカラムを作成する

テーブルのカラムですが、こちらでRead Meにも記載されているとおり、指定されたカラムがないと認識されないようなので、ReadMeの通り作成します。または、テーブルを作成するスクリプトを用意してくれているので、そちらを使用しても大丈夫です。

Page: ページタイトルと内容
Slug: ブログページのURL/blog/xxxのxxxの部分です。Text形式。
Published: 公開/非公開設定です。Checkbox形式
Date: ブログ作成日です。Date形式
Authors: ブログ作成者です。Person形式



記事を作成する

適当に記事を作成します。

ブログが投稿されているか確認する

ブログが投稿されたか確認します。
反映されていますね!!

一旦、ブログの構築は完了です!!
10分くらいで構築できちゃうと思います!!簡単だ〜

ただ、カスタマイズしたいですよね、、ローカルで触りたいですよね!!
ここからは、ローカル環境構築手順について書いていきます〜

3, DockerでNotion Blogのローカル環境を構築する

事前に先ほどGitHubにあげたnotion-blogリポジトリをcloneしてきてください!

また、ローカル環境はDockerじゃなくても問題ありません。私個人的に、MacBookを汚したくない精神が強いため、開発環境を構築する際は毎回、Dockerを使用しているので、今回もDockerで環境構築しました!!

①Dockerfileを作成する

Dockerfileを作成します。
私はyarnも一緒にインストールするところまで、書いてますが、どっちでもいいかなと思います。

FROM node:14.15.3
WORKDIR /usr/src/app

RUN curl https://deb.nodesource.com/setup_12.x | bash
RUN curl https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add -
RUN echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list

RUN apt-get update && apt-get install -y yarn
RUN apt install direnv

RUN yarn install

※こっちのコマンドでもyarn installできます!

% docker-compose run node yarn install

②docker-compose.ymlを作成する

docker-compose.ymlを作成します。

version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/usr/src/app
    command: sh -c "yarn dev"
    ports:
      - "3000:3000"

※ディレクトリ構成はこんな感じです

③docker-compose up -dでコンテナを起動する

damuha@otion-blog % docker-compose up -d
Docker Compose is now in the Docker CLI, try `docker compose up`

Starting notion-blog_node_1 ... done
damuha@notion-blog % 

④http://localhost:3000で確認する

http://localhost:3000 にアクセスして、ローカル環境がうまく構築できたか確認します。
できてますね!!

⑤Notionと連携する

ローカル環境でも以下の環境変数を設定します。
私は本番と同じNotionページを設定しています。
・NOTION_TOKEN
・BLOG_INDEX_ID

ローカル環境では .env に設定します。

BLOG_INDEX_ID=xxxxxxxxxxxx
NOTION_TOKEN=xxxxxxxxx



ローカル環境でもNotionのブログ記事が表示されていることを確認できました!!

4, いろいろカスタマイズして自分だけのブログを作ってみよう!!

はい、こんな感じで、ブログを開設することができました!
sisterのブログはもっと色々とカスタマイズしています。

https://blog.sisterwith.com/
  • 全体的なスタイルを変えたり、
  • タグごとに記事を表示できるようにしたり
  • アイコン画像を入れたり

(おまけ)作ってみた私の感想

自分の好きなようにフルカスタマイズできるので、めちゃくちゃNext.jsの勉強にもなるんじゃないかな〜とカスタマイズしてて思いました!!私は、Next.jsは初めて触ったのですが、基礎的な部分の
・APIでデータ取得してくる
・ルーティング
・コンポーネント連携
などは枠組みが用意されているので、すごく勉強になりました。

ただ、あくまで、エンジニア向けで、エンジニア以外の方には結構ハードルが高いかなと思います!!WordPressのようにデザインのテンプレートが用意されていたり、プラグインがあったりするわけではないです。

また、Anotionという誰でも簡単にNotionでブログを構築できるサービスもあるようなので、ぜひチェックしてみてください〜!

https://anotion.so/

最後に

長い記事を最後まで読んでいただきありがとうございました!!
次回は独自ドメインの適用部分もかければいいなと思います!!

脚注
  1. Notionでのインラインテーブルの説明はこちらの記事がわかりやすかったです。
    https://note.com/mamizo/n/nade3aba29ab6 ↩︎

Discussion

ログインするとコメントできます