README.ja.md

English | 日本語

astro-notion-blog

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

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

スクリーンショット

デモ

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. 「ビルドの設定」で、
11. 「フレームワーク プリセット」で Astro を選択します
12. 「環境変数(アドバンスド)」 を開き NODE_VERSION, NOTION_API_SECRET, DATABASE_ID の 3 つを設定します
    • NODE_VERSION は v16.13.0 かそれ以上を指定します
    • 詳しくは How to deploy a site with Git をご覧ください

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

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

カスタマイズするには

追加の必要要件

• Node.js v16 かそれ以上
• Git
• Yarn

ステップ

1. プロジェクトルートに .env ファイルを作成し下記のように環境変数を書き込みます

NOTION_API_SECRET=<YOUR_NOTION_API_SECRET>
DATABASE_ID=<YOUR_DATABASE_ID>

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

yarn install
yarn dev

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

その他の情報

wiki をご覧ください。

バグ報告 & 機能要望

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

🐦 Twitter コミュニティ

コミュニティに参加して他のメンバーからサポートを受けたりサポートすることができます。

• astro-notion-blog

貢献

Pull requests 歓迎です。

---

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