{"id":25929508,"url":"https://github.com/wojtekthewebdev/notion-cms-boilerplate","last_synced_at":"2025-10-28T03:50:55.900Z","repository":{"id":279284308,"uuid":"938068530","full_name":"WojtekTheWebDev/notion-cms-boilerplate","owner":"WojtekTheWebDev","description":"This project combines the power of Notion as a CMS with modern web development tools like Next.js, providing a flexible foundation for your content management needs.","archived":false,"fork":false,"pushed_at":"2025-04-12T09:49:04.000Z","size":171,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-22T15:07:19.318Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://notion-cms-boilerplate.vercel.app","language":"TypeScript","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/WojtekTheWebDev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2025-02-24T11:21:56.000Z","updated_at":"2025-07-15T21:49:35.000Z","dependencies_parsed_at":"2025-04-12T10:29:16.024Z","dependency_job_id":"3ea1524d-ee1f-4871-8b57-1a8841493987","html_url":"https://github.com/WojtekTheWebDev/notion-cms-boilerplate","commit_stats":null,"previous_names":["wojtekthewebdev/notion-cms-boilerplate"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/WojtekTheWebDev/notion-cms-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2Fnotion-cms-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2Fnotion-cms-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2Fnotion-cms-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2Fnotion-cms-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WojtekTheWebDev","download_url":"https://codeload.github.com/WojtekTheWebDev/notion-cms-boilerplate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WojtekTheWebDev%2Fnotion-cms-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281381647,"owners_count":26491160,"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","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-03-03T22:07:42.081Z","updated_at":"2025-10-28T03:50:55.864Z","avatar_url":"https://github.com/WojtekTheWebDev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# notion-cms-boilerplate project\n\n## Getting started\n\nThis project combines the power of Notion as a CMS with modern web development tools like Next.js, providing a flexible foundation for your content management needs.\n\nThis guide will walk you through the setup process and essential features of this boilerplate.\n\n### Why?\n\nI love Notion and imho it’s a great (and free) tool that can work as a CMS.\n\nThere are some cool projects (e.g. [react-notion-x](https://github.com/NotionX/react-notion-x)) that can be used for the same purpose, but I wanted to base my solution on an official Notion tools. \n\nI had tons of fun playing with their API to render components and show everything I needed to create my personal website, so I’ve decided to make this project open-source. \n\nI hope it can be helpful to someone.\n\n### Demo\n\nYou can check the demo [here](https://notion-cms-boilerplate.vercel.app/).\n\n### TLDR\n\nTo implement this project, you would need to duplicate [Notion database](https://tinyurl.com/mpearp29) to your workspace, create a new [Notion integration](https://developers.notion.com/docs/create-a-notion-integration) to get an API key, clone the [notion-cms-boilerplate repository](https://github.com/WojtekTheWebDev/notion-cms-boilerplate), configure the environment variables with your Notion credentials, and deploy the Next.js application to your preferred hosting platform.\n\n### Database\n\nFirst, you need to duplicate the project’s Notion database - available [here](https://www.notion.so/CMS-19eabb8900388044bae4c08a4d020786?pvs=21).\n\nIt contains the list of pages that would be rendered in your project. After cloning it, you should see **Getting started** page. Don’t remove it yet, it would be helpful to ensure that everything in the setup has been done correctly.\n\nOnce you’ve duplicated the database, save it’s ID - it would be necessary in project setup. You can check it in the Notion url -[`https://www.notion.so/\u003cDB_NAME\u003e-\u003cDB_ID\u003e`](https://www.notion.so/CMS-19eabb8900388044bae4c08a4d020786?pvs=21)\n\nEach item in the database is a page that contains properties and content.\n\nThe properties are:\n\n- Slug\n- Meta title\n- Meta description\n- SEO Keywords\n\nA slug would be necessary to render your page. Home page uses `home` by default.\n\nAfter creating a new page, simply navigate to `\u003cyourdomain\u003e.\u003cextension\u003e/\u003cslug\u003e` or [`localhost:300/\u003cslug\u003e`](http://localhost:300/\u003cslug\u003e) for local development.\n\n### Notion integration\n\nTo fetch the data, it’s necessary to create a Notion integration. It can be an internal integration. Follow the [guide](https://developers.notion.com/docs/create-a-notion-integration#getting-started) to create one. Save your **Internal Integration Secret**, it would be necessary in project setup.\n\nAfter creating an integration, give the permissions (as the [guide](https://developers.notion.com/docs/create-a-notion-integration#give-your-integration-page-permissions) explains) to the duplicated database in your Notion space.\n\n### Project\n\nTo start, simply use this [template](https://github.com/WojtekTheWebDev/notion-cms-boilerplate) to create a new GitHub repository and clone it.\n\nThen, copy the *.env.example* and rename it to *.env*. Use your **Internal Integration Secret** and **Database ID** (from previous steps) as `NOTION_SECRET` and `NOTION_DATABASE_ID`.\n\nIt’s all. \n\nYou can run `npm run dev`. \n\nIf everything went properly, you should see this **Getting started** page. \n\nNow, feel free to remove it, edit the content and do whatever you want.\n\n### Deployment\n\nThe whole project is based on a Next.js app. The easiest way to deploy it is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.\n\n## How-tos\n\n### Setting Up Image Ratio\n\nIn this project, images are displayed with a specific width and height to maintain a consistent aspect ratio. This is necessary because Next.js requires both width and height to properly optimize and render images.\n\nThe default width and height are defined in the `constants.ts` file:\n\n```typescript\nexport const defaultWidth = 500;\nexport const ratio = 16 / 9;\nexport const defaultHeight = defaultWidth / ratio;\n```\n\nYou can adjust the `defaultWidth` and `ratio` values to change the dimensions of the images. The `defaultHeight` is automatically calculated based on the width and ratio.\n\nFor example, if you want to change the aspect ratio to 4:3, you can update the `ratio` value:\n\n```diff\n- export const ratio = 16 / 9;\n+ export const ratio = 4 / 3;\n```\n\nThis will ensure that all images maintain the new aspect ratio while being rendered.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekthewebdev%2Fnotion-cms-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwojtekthewebdev%2Fnotion-cms-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwojtekthewebdev%2Fnotion-cms-boilerplate/lists"}