Notion Photo React Documentation
What is this
Notion Photo React is a Photo Gallery powered by Notion, built with React, Next.js, tailwindcss, TypeScript, Notion-Api-Worker and more.
TL;DR
- Fork the Notion Photo React (opens in a new tab) from GitHub.
- Change setting in
config/site.config.js
(opens in a new tab) file. - Import to Vercel by clicking this quick link (opens in a new tab).
- Add two environment variables
NOTION_API
andNOTION_TABLE_SLUG
to Vercel configuration. - Deploy it.
You can now visit the link generated by Vercel.
Complete Deployment Guide
If you are interested in this project, you can have a try it by using the doing the following things.
To do the following, you need to have GitHub account ready.
Fork this project
Visiting Notion Photo React (opens in a new tab) on GitHub, and click the fork
on the top right.
Change the site configuration
Enter config/site.config.js
(opens in a new tab), change the configuration.
See details about the each variable
// Before you make changes to this document, please read https://docs.okis.dev/docs/notion-photo-react#change-the-site-configuration
module.exports = {
global: {
site: {
name: 'Notion Photo React Example',
description: 'Photo Gallery built with Notion, React.JS, Next.JS, tailwindcss, TypeScript, notion-api-worker and more.',
url: 'https://npr.okis.dev/',
author: 'Harry Yep',
banner_img: `https://cdn.harrly.com/project/GitHub/Notion-Photo-React/img/Notion-Photo-React.Banner.png`,
nav: [
{
name: 'Home',
url: '/',
external: false,
position: 'left',
},
{
name: 'GitHub',
url: 'https://github.com/okisdev',
external: true,
position: 'right',
},
],
language: [
{ name: '🇬🇧 English', code: 'en-GB' },
{ name: '🇨🇳 简体中文', code: 'zh-CN' },
{ name: '🇭🇰 繁體中文', code: 'zh-HK' },
],
font: '',
},
content: {
header: {
description: `A Photo Gallery built with <a href='https://notion.so/' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>Notion</a>, <a href='https://nextjs.org/' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>Next.js</a>, <a href='https://tailwindcss.com/' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>tailwindcss</a>, <a href='https://www.typescriptlang.org/' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>TypeScript</a>, <a href='https://github.com/splitbee/notion-api-worker' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>Notion-Api-Worker</a> and more. (Find more on <a href='https://github.com/Harry-Yep/Notion-Photo-React' class='transition duration-500 underline hover:bg-yellow-500 dark:hover:bg-yellow-600' target='_blank' rel='noopener noreferrer'>GitHub</a>)`,
},
license: {
name: 'CC BY-NC-SA 4.0',
url: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
},
footer: {
copyright: 'Copyright © 2023 Harry Yep. All rights reserved.',
},
},
analytics: {
umami: {
url: 'https://umami.harisfox.com/script.js',
website_id: '4c785146-016d-48b8-81fe-85172c82b37d',
},
},
},
};
Notion API Preparation
This will be one of the Environment Variable of your site, called NOTION_API
.
Please do not add http://
or https://
before NOTION_API
.
You can use notion-api.splitbee.io
if you don't want to make your own one.
Alternatively, see here (opens in a new tab) for how to deploy a notion-api by yourself.
Create the Database in Notion
This will be one of the Environment Variable of your site, called NOTION_TABLE_SLUG
.
You should create a notion table with below properties. (You can duplicate a template from here (opens in a new tab).)
See details about the each property
title: Title
location: Select
published: Checkbox
date: Date
slug: Text
url: URL (Your photo image url)
Please don't leave blank in any property box, excepted checkbox and description.
An error will happen if you do so.
Deploy on Serverless platform
We have now finished the large part of configuration, it is time to deploy it.
You can choose to deploy it on any serverless which support Next.JS framework, we recommend Vercel (opens in a new tab), you can use Netlify (opens in a new tab), etc.
Please don't use Cloudflare Pages (opens in a new tab), they only support Next.JS Static Deploy at the moment.
-
To deploy it on Vercel, visit Vercel and click the New Project button.
-
Import your forked repository.
This is how configuration looks like.
It is important to add the
Environment Variables
, else, the deployment will fail. -
After all setup, click Deploy.
-
You can visit your website via Vercel auto-generated URL (If you deploy with Vercel, it should ending with
vercel.app
).
Deploy it locally
We have now finished the large part of configuration, it is time to deploy it.
You can download your whole project by clicking the Download ZIP on your GitHub, or you can clone it if you prefer to do so.
After that, please do the following things:
-
Open your project in an IDE, such as VSCode, or terminal, such as iterm2.
-
Create a
.env.local
in the root path of the project. -
Copy and paste from
.env.example
to.env.local
. -
Fill in the environment variables in
.env.local
.It is important to add the
Environment Variables
, else, the deployment will fail. -
Run
yarn
in your project. -
Run
yarn build && yarn start
in your project. -
You can now able to visit your website via
http://localhost:3000
.