Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/otoyo/astro-notion-blog
🚀 Begin building your very own Notion Blog with Astro.
https://github.com/otoyo/astro-notion-blog
astro astrojs astrojs-blog blog cloudflare cms notion notion-api notion-blog
Last synced: 5 minutes ago
JSON representation
🚀 Begin building your very own Notion Blog with Astro.
- Host: GitHub
- URL: https://github.com/otoyo/astro-notion-blog
- Owner: otoyo
- License: mit
- Created: 2023-01-09T03:10:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-07T23:55:16.000Z (6 months ago)
- Last Synced: 2024-10-29T17:11:53.009Z (3 months ago)
- Topics: astro, astrojs, astrojs-blog, blog, cloudflare, cms, notion, notion-api, notion-blog
- Language: Astro
- Homepage: https://astro-notion-blog.pages.dev/
- Size: 1.14 MB
- Stars: 767
- Watchers: 8
- Forks: 499
- Open Issues: 1
-
Metadata Files:
- Readme: README.ja.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[English](README.md) | 日本語
# astro-notion-blog
[](https://github.com/otoyo/astro-notion-blog/stargazers)
[](https://github.com/otoyo/astro-notion-blog/blob/main/LICENSE)
[](https://github.com/sponsors/otoyo)
astro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブログを作ることができます。
ブログは [Astro](https://astro.build/) を使って静的生成されるので非常に高速です。
- :rocket: ページの表示が**爆速**
- :pencil: **Notion で**ブログが書ける
- :hammer_and_wrench: ブログの見た目を**自由にカスタマイズ可能**
- :white_check_mark: **Notion 公式 API**を使っているため安心
## :camera_flash: スクリーンショット
### PC
### スマートフォン
## :globe_with_meridians: デモ
[https://astro-notion-blog.pages.dev](https://astro-notion-blog.pages.dev)
## :motor_scooter: クイックスタート
### 必要なもの
- [Notion](https://www.notion.so/)
- [Cloudflare Pages](https://pages.cloudflare.com/)
### ステップ
1. このリポジトリを**スターします** :wink:
- スターしていただけると開発の励みになります
2. [ブログテンプレート](https://otoyo.notion.site/e2c5fa2e8660452988d6137ba57fd974?v=abe305cd8b3d467285e91a2a85f4d8de) を自分の Notion へ複製します
3. 複製したページ(データベース)のアイコン、タイトル、説明を変更します
4. 複製したページ(データベース)の URL `https://notion.so/your-account/<ここ>?v=xxxx` を `DATABASE_ID` としてメモします
5. [Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration) からインテグレーションを作成し "Internal Integration Token" を `NOTION_API_SECRET` としてメモします
6. 複製したページを再度開き [Share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration) の手順でインテグレーションにデータベースを共有します
7. このリポジトリを自分のアカウントヘフォークします
- フォークボタンは画面上部右側のスターの左にあります
8. [Cloudflare Pages](https://pages.cloudflare.com/) を開きサインインします
- 言語設定を日本語に変更します
9. プロジェクトを "Connect to Git" を選んで作成し、先ほどフォークした `/astro-notion-blog` リポジトリを選んで "Begin setup" をクリックします
10. 「ビルドの設定」で、
1. 「フレームワーク プリセット」で Astro を選択します
2. 「環境変数(アドバンスド)」 を開き `NODE_VERSION`, `NOTION_API_SECRET`, `DATABASE_ID` の 3 つを設定します
- `NODE_VERSION` は `20.18.1` かそれ以上を指定します
- 詳しくは [How to deploy a site with Git](https://docs.astro.build/en/guides/deploy/cloudflare/#how-to-deploy-a-site-with-git) をご覧ください
11. "Save and Deploy" をクリックし、デプロイが完了すると Notion Blog が見えるようになります
astro-notion-blog では新しい記事や変更を公開したいとき毎回デプロイが必要になります。
Cloudflare Pages のダッシュボードから手動でデプロイするか、GitHub Action のような CI を使って定時デプロイしてください。
## :hammer_and_pick: カスタマイズするには
### 追加の必要要件
- Node.js v20.18.1 かそれ以上
- Git
### ステップ
1. 下記コマンドを実行して秘密情報を環境変数に設定します
```sh
export NOTION_API_SECRET=
export DATABASE_ID=
```
2. 依存関係をインストールしローカルサーバーを起動します
```sh
npm install
npm run dev
```
3. ブラウザで [http://localhost:4321](http://localhost:4321) を開きます
4. 開発サーバーを停止するにはターミナルで `Ctrl+C` を押します。
### その他の情報
[wiki](https://github.com/otoyo/astro-notion-blog/wiki) をご覧ください。
## :lady_beetle: バグ報告 & 機能要望
Issue を作成してください。日本語で大丈夫です。
## :two_hearts: スポンサー
astro-notion-blog を気に入っていただけましたら、ソフトウェアの開発を継続できるようにスポンサーになることを検討してください。
[](https://github.com/sponsors/otoyo)
---
astro-notion-blog は [otoyo/notion-blog](https://github.com/otoyo/notion-blog) をベースにしています。