{"id":13612956,"url":"https://github.com/otoyo/astro-notion-blog","last_synced_at":"2025-05-16T01:07:11.232Z","repository":{"id":65427856,"uuid":"586710695","full_name":"otoyo/astro-notion-blog","owner":"otoyo","description":"🚀 Begin building your very own Notion Blog with Astro.","archived":false,"fork":false,"pushed_at":"2024-08-07T23:55:16.000Z","size":1199,"stargazers_count":767,"open_issues_count":1,"forks_count":499,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-10-29T17:11:53.009Z","etag":null,"topics":["astro","astrojs","astrojs-blog","blog","cloudflare","cms","notion","notion-api","notion-blog"],"latest_commit_sha":null,"homepage":"https://astro-notion-blog.pages.dev/","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/otoyo.png","metadata":{"files":{"readme":"README.ja.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"otoyo"}},"created_at":"2023-01-09T03:10:18.000Z","updated_at":"2024-10-28T14:59:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"896b60f2-3a7c-40a6-837a-94553f0f6c8e","html_url":"https://github.com/otoyo/astro-notion-blog","commit_stats":{"total_commits":388,"total_committers":10,"mean_commits":38.8,"dds":"0.11855670103092786","last_synced_commit":"734c758d95a432473246139e8f25acdc1f2dcde3"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otoyo%2Fastro-notion-blog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otoyo%2Fastro-notion-blog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otoyo%2Fastro-notion-blog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/otoyo%2Fastro-notion-blog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/otoyo","download_url":"https://codeload.github.com/otoyo/astro-notion-blog/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astrojs","astrojs-blog","blog","cloudflare","cms","notion","notion-api","notion-blog"],"created_at":"2024-08-01T20:00:37.222Z","updated_at":"2025-05-16T01:07:06.225Z","avatar_url":"https://github.com/otoyo.png","language":"Astro","funding_links":["https://github.com/sponsors/otoyo"],"categories":["HarmonyOS","Astro"],"sub_categories":["Windows Manager"],"readme":"[English](README.md) | 日本語\n\n# astro-notion-blog\n\n[![GitHub stars](https://img.shields.io/github/stars/otoyo/astro-notion-blog)](https://github.com/otoyo/astro-notion-blog/stargazers)\n[![GitHub license](https://img.shields.io/github/license/otoyo/astro-notion-blog)](https://github.com/otoyo/astro-notion-blog/blob/main/LICENSE)\n[![GitHub sponsors](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/otoyo)\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/213838069-c9654c32-ec9b-4e82-a3b5-2acbd665b16a.png\" width=\"480\"\u003e\n\nastro-notion-blog を使えば [Notion](https://www.notion.so) で書けるブログを作ることができます。  \nブログは [Astro](https://astro.build/) を使って静的生成されるので非常に高速です。\n\n- :rocket: ページの表示が**爆速**\n- :pencil: **Notion で**ブログが書ける\n- :hammer_and_wrench: ブログの見た目を**自由にカスタマイズ可能**\n- :white_check_mark: **Notion 公式 API**を使っているため安心\n\n## :camera_flash: スクリーンショット\n\n### PC\n\n\u003cimg src=\"https://github.com/otoyo/astro-notion-blog/assets/1063435/967bbc23-014c-427d-b6cd-02c41822fb45\" width=\"600\"\u003e\n\n### スマートフォン\n\n\u003cimg src=\"https://github.com/otoyo/astro-notion-blog/assets/1063435/bf1add06-1f1c-42ca-88c9-decb8c0dcf8f\" width=\"300\"\u003e\n\n## :globe_with_meridians: デモ\n\n[https://astro-notion-blog.pages.dev](https://astro-notion-blog.pages.dev)\n\n## :motor_scooter: クイックスタート\n\n### 必要なもの\n\n- [Notion](https://www.notion.so/)\n- [Cloudflare Pages](https://pages.cloudflare.com/)\n\n### ステップ\n\n1. このリポジトリを**スターします** :wink:\n   - スターしていただけると開発の励みになります\n2. [ブログテンプレート](https://otoyo.notion.site/e2c5fa2e8660452988d6137ba57fd974?v=abe305cd8b3d467285e91a2a85f4d8de) を自分の Notion へ複製します\n3. 複製したページ(データベース)のアイコン、タイトル、説明を変更します\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/223611473-09e87aba-ad3b-4380-a74f-58c3c5804c39.png\" width=\"600\"\u003e\n\n4. 複製したページ(データベース)の URL `https://notion.so/your-account/\u003cここ\u003e?v=xxxx` を `DATABASE_ID` としてメモします\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/213966685-3a2afed2-45c0-4ea5-8070-e634d8d648de.png\" width=\"260\"\u003e\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/213966934-4442ce75-f88e-465f-b4f4-545d46b8eec9.png\" width=\"600\"\u003e\n\n5. [Create an integration](https://developers.notion.com/docs/create-a-notion-integration#step-1-create-an-integration) からインテグレーションを作成し \"Internal Integration Token\" を `NOTION_API_SECRET` としてメモします\n6. 複製したページを再度開き [Share a database with your integration](https://developers.notion.com/docs/create-a-notion-integration#step-2-share-a-database-with-your-integration) の手順でインテグレーションにデータベースを共有します\n7. このリポジトリを自分のアカウントヘフォークします\n   - フォークボタンは画面上部右側のスターの左にあります\n8. [Cloudflare Pages](https://pages.cloudflare.com/) を開きサインインします\n   - 言語設定を日本語に変更します\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/213967607-338b8728-d7c9-47e4-8192-e955e3f4ce30.png\" width=\"220\"\u003e\n\n9. プロジェクトを \"Connect to Git\" を選んで作成し、先ほどフォークした `\u003cyour-account\u003e/astro-notion-blog` リポジトリを選んで \"Begin setup\" をクリックします\n10. 「ビルドの設定」で、\n    1. 「フレームワーク プリセット」で Astro を選択します\n    2. 「環境変数(アドバンスド)」 を開き `NODE_VERSION`, `NOTION_API_SECRET`, `DATABASE_ID` の 3 つを設定します\n       - `NODE_VERSION` は `20.18.1` かそれ以上を指定します\n       - 詳しくは [How to deploy a site with Git](https://docs.astro.build/en/guides/deploy/cloudflare/#how-to-deploy-a-site-with-git) をご覧ください\n\n\u003cimg src=\"https://user-images.githubusercontent.com/1063435/213967111-72ea2ad1-ad3b-4629-8b65-7b25bc6ddb31.png\" width=\"400\"\u003e\n\n\u003cimg src=\"https://github.com/user-attachments/assets/548a57eb-a152-4a56-8bf9-0853c76638a8\" width=\"600\"\u003e\n\n11. \"Save and Deploy\" をクリックし、デプロイが完了すると Notion Blog が見えるようになります\n\nastro-notion-blog では新しい記事や変更を公開したいとき毎回デプロイが必要になります。  \nCloudflare Pages のダッシュボードから手動でデプロイするか、GitHub Action のような CI を使って定時デプロイしてください。\n\n## :hammer_and_pick: カスタマイズするには\n\n### 追加の必要要件\n\n- Node.js v20.18.1 かそれ以上\n- Git\n\n### ステップ\n\n1. 下記コマンドを実行して秘密情報を環境変数に設定します\n\n```sh\nexport NOTION_API_SECRET=\u003cYOUR_NOTION_API_SECRET\u003e\nexport DATABASE_ID=\u003cYOUR_DATABASE_ID\u003e\n```\n\n2. 依存関係をインストールしローカルサーバーを起動します\n\n```sh\nnpm install\nnpm run dev\n```\n\n3. ブラウザで [http://localhost:4321](http://localhost:4321) を開きます\n4. 開発サーバーを停止するにはターミナルで `Ctrl+C` を押します。\n\n### その他の情報\n\n[wiki](https://github.com/otoyo/astro-notion-blog/wiki) をご覧ください。\n\n## :lady_beetle: バグ報告 \u0026 機能要望\n\nIssue を作成してください。日本語で大丈夫です。\n\n## :two_hearts: スポンサー\n\nastro-notion-blog を気に入っていただけましたら、ソフトウェアの開発を継続できるようにスポンサーになることを検討してください。\n\n[![GitHub sponsors](https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/otoyo)\n\n---\n\nastro-notion-blog は [otoyo/notion-blog](https://github.com/otoyo/notion-blog) をベースにしています。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotoyo%2Fastro-notion-blog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fotoyo%2Fastro-notion-blog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fotoyo%2Fastro-notion-blog/lists"}