README.ja.md

English | 日本語

astro-notion-blog

astro-notion-blog を使えば Notion で書けるブログを作ることができます。
ブログは Astro を使って静的生成されるので非常に高速です。

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

📸 スクリーンショット

PC

スマートフォン

🌐 デモ

https://astro-notion-blog.pages.dev

🛵 クイックスタート

必要なもの

• Notion
• Cloudflare Pages

ステップ

1. このリポジトリをスターします 😉
   • スターしていただけると開発の励みになります
2. ブログテンプレート を自分の Notion へ複製します
3. 複製したページ(データベース)のアイコン、タイトル、説明を変更します

4. 複製したページ(データベース)の URL https://notion.so/your-account/<ここ>?v=xxxx を DATABASE_ID としてメモします

5. Create an integration からインテグレーションを作成し "Internal Integration Token" を NOTION_API_SECRET としてメモします
6. 複製したページを再度開き Share a database with your integration の手順でインテグレーションにデータベースを共有します
7. このリポジトリを自分のアカウントヘフォークします
   • フォークボタンは画面上部右側のスターの左にあります
8. Cloudflare Pages を開きサインインします
   • 言語設定を日本語に変更します

9. プロジェクトを "Connect to Git" を選んで作成し、先ほどフォークした <your-account>/astro-notion-blog リポジトリを選んで "Begin setup" をクリックします
10. 「ビルドの設定」で、
    1. 「フレームワーク プリセット」で Astro を選択します
    2. 「環境変数(アドバンスド)」 を開き NODE_VERSION, NOTION_API_SECRET, DATABASE_ID の 3 つを設定します
       • NODE_VERSION は v18.16.0 かそれ以上を指定します
       • 詳しくは How to deploy a site with Git をご覧ください

11. "Save and Deploy" をクリックし、デプロイが完了すると Notion Blog が見えるようになります

astro-notion-blog では新しい記事や変更を公開したいとき毎回デプロイが必要になります。
Cloudflare Pages のダッシュボードから手動でデプロイするか、GitHub Action のような CI を使って定時デプロイしてください。

⚒️ カスタマイズするには

追加の必要要件

• Node.js v18.14.1 かそれ以上
• Git

ステップ

1. 下記コマンドを実行して秘密情報を環境変数に設定します

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

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

npm install
npm run dev

3. ブラウザで http://localhost:4321 を開きます
4. 開発サーバーを停止するにはターミナルで Ctrl+C を押します。

その他の情報

wiki をご覧ください。

🐞 バグ報告 & 機能要望

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

💕 スポンサー

astro-notion-blog を気に入っていただけましたら、ソフトウェアの開発を継続できるようにスポンサーになることを検討してください。

---

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