README.ja.md

English | 日本語 | 한국어

easy-notion-blog

easy-notion-blog を使えばあっという間に Notion Blog を始めることができます。

• 🚀 ページの読み込みが爆速
• 📝 自分のNotionでブログが書ける
• 🛠️ ブログの見た目を自分好みにカスタマイズ可能
• ✅ Notion 公式APIを使っているので安心

開発が活発な astro-notion-blog もご検討ください。

スクリーンショット

📸 ブログ側

📸 Notion側

クイックスタート

必要要件

• Notion アカウント
• Vercel アカウント
• Git

手順

1. このリポジトリをスターします 😉
   • スターしていただけると開発の励みになります
2. テンプレート を自分の Notion へ複製します
3. 複製したページの URL の https://notion.so/your-account/<ココ>?v=xxxx を DATABASE_ID としてメモします
   • 例) 158bd90116004cd19aca26ad88cb5c07
   • ⚠️ 注意: ?v=ここではありません。?v= の前です。
4. Create an integration からインテグレーションを作成し "Internal Integration Token" を NOTION_API_SECRET としてメモします
5. 複製したページを再度開き Share a database with your integration の手順でインテグレーションにデータベースを共有します
6. vercel.com にログインします
7. プロジェクトを新規作成しリポジトリとして otoyo/easy-notion-blog をインポートします(チームの作成はスキップします)
8. "Configure Project" で "Environment Variables" を開き先ほどメモした NOTION_API_SECRET と DATABASE_ID を入力します
9. デプロイが完了すると Notion Blog が見えるようになります

さらに詳しい解説はへろほろさんの記事をご覧ください。

デモ

https://easy-notion-blog-otoyo.vercel.app/blog
ユーザーブログは wiki から見ることができます。

カスタマイズするには

追加の必要要件

• Node.js v16 もしくはそれ以上
• Yarn
• direnv

手順

1. このリポジトリをフォークしてローカルに clone します
2. プロジェクトルートで direnv を使って下記の環境変数を設定します

direnv edit .

export NOTION_API_SECRET=<YOUR_NOTION_API_SECRET>
export DATABASE_ID=<YOUR_DATABASE_ID>

3. 依存関係をインストールしローカルサーバーを起動します

# 依存関係のインストール
yarn install

# 開発サーバー(localhost:3000) の起動
yarn dev

4. ブラウザで http://localhost:3000 を開きます

開発環境では Published でないエントリーも表示されるためプレビューすることができます。ただし Slug が設定されていないエントリーは表示されません。

5. 開発サーバーを停止するにはターミナルで Ctrl+C を押します。

その他の情報

wiki をご覧ください。

バグ報告 & 機能要望

Issue を作成してください。日本語で大丈夫です。

🐦 Twitter コミュニティ

最新のアップデート情報を受け取ったり、カスタマイズに困った際に他のメンバーのサポートを得ることができます。

• easy-notion-blog

貢献

PR 歓迎です。

---

easy-notion-blog は ijjk/notion-blog と otoyo/notion-blog をベースにしています。