astro-notion-component
v0.1.4
Published
Astro and Notion work seamlessly together to create a website.
Downloads
204
Readme
English | 日本語
astro-notion-blog
⚠️ Note: This project is just starting and the documentation is not complete.
To make the astro-notion-blog more user-friendly, we are developing it with the following benefits in mind.
Advantages Compared to the Original
- Not limited to just blogs
- Designed to be customizable
- Create a single Astro page directly from a Notion page
- You can mix Notion pages and pages created with Astro
- Embed Notion pages or blocks into a section of a page for more flexible design
- Notion has headings 1 to 3 but lacks headings 4 and beyond, so by creating subpages, you can simulate headings 4 and beyond
- Override the default features of astro-notion-blog
- You can use features not available in the original version (comment function will be added)
- Since the task of incorporating pull requests from the original repository is done within this repository, there is no worry about conflicts
- Easy to use by just installing via npm, allowing it to be integrated into existing Astro projects
Of course, it also retains the original benefits:
- :rocket: Blazing fast page rendering
- :pencil: Write your blog using Notion
- :hammer_and_wrench: Freely customize the appearance of your blog
- :white_check_mark: Uses the official Notion API, ensuring reliability
For beginners in programming or those who have not worked with Astro or Notion, we recommend first exploring the original astro-notion-blog. Once you feel like customizing it, you can then start using this project.
:camera_flash: Screenshots
PC
Smartphone
:globe_with_meridians: Demo
https://astro-notion-blog.pages.dev
:motor_scooter: Quick Start
Requirements
Steps
If you enjoy using this repo, don't forget to give it a star! :wink:
- This is very motivating!
Simply duplicate the blog template into your Notion workspace.
Once you've duplicated the page (database), customize it to your liking by changing the icon, title, and description.
For future reference, identify the
DATABASE_ID
by noting the portion of the duplicated page (database) URL that appears as https://notion.so/your-account/?v=xxxx.Create an integration and note "Internal Integration Token" as
NOTION_API_SECRET
To integrate your application with Notion, share a database with your integration.
To make a copy of this repository in your own account, fork it by clicking on the 'Fork' button in the top-right corner of the repository page.
Go to Cloudflare Pages and sign in
Create new project with "Connect to Git" with your forked repository
<your-account>/astro-notion-blog
, then click "Begin setup"In "Build settings" section,
- Select "Astro" as "Framework preset"
- Open "Environment Variables (advanced)" and set
NODE_VERSION
,NOTION_API_SECRET
andDATABASE_ID
NODE_VERSION
isv18.16.0
or higher- How to deploy a site with Git is helpful
After clicking the 'Save and Deploy' button, your Notion Blog will be published once the deployment process is complete.
Please note that the astro-notion-blog requires manual deployment every time you publish a new post or make updates. You can deploy manually from the Cloudflare Pages dashboard or set up a scheduled deploy using CI tools such as GitHub Actions.
:hammer_and_pick: How to customize
Additional requirements
- Node.js v18.14.1 or higher
Steps
To set your secrets as environment variables, run the following commands in your terminal:
export NOTION_API_SECRET=<YOUR_NOTION_API_SECRET> export DATABASE_ID=<YOUR_DATABASE_ID>
Install dependencies and start local server
npm install npm run dev
Open http://localhost:4321 in your browser
Press
Ctrl+C
in the terminal to stop
For more information
See wiki.
:lady_beetle: Bug reports & feature requests
To report an issue, please create a new Issue. You can use either English or Japanese to describe the issue. :wink:
About the original astro-notion-blog
:two_hearts: Sponsorship
If you like astro-notion-blog, please consider sponsoring it so we can continue developing the software.