Notion Photo React 文檔

這是什麼

Notion Photo React 是一個由 Notion 提供支持，使用 React、Next.JS、tailwindcss、TypeScript、Notion-Api-Worker 等構建的圖片庫。

長話短說

從 GitHub Fork Notion Photo React 項目。
改變 config/site.config.js 文件裡的內容來更改你的網頁設定。
使用此連結導入至 Vercel。
加入兩個環境變量 NOTION_API 及 NOTION_TABLE_SLUG 到 Vercel 配置中。
開始部署。

現在你看可以通過使用 Vercel 生成的連結來查看你的網頁。

完整部署指南

如果您對這個項目感興趣，您可以通過執行以下操作來嘗試自行部署。

要執行以下操作，您需要準備好 GitHub 帳戶。

Fork 這個項目

訪問 Notion Photo React 的 GitHub 頁面，然後單擊右上角的 fork。

1.project

更改站點配置

進入 config/site.config.js，更改配置。

查看每個變量的詳細信息

// 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 準備工作

這將是您網站的環境變量之一，稱為 NOTION_API。

請不要在 NOTION_API 前面添加 http:// 或 https://。

如果你不想自己部署 Notion API 你可以使用 notion-api.splitbee.io 替代。

或者, 點此查看如何部署自己的 Notion API。

在 Notion 中創建數據庫

這將是您網站的環境變量之一，稱為 NOTION_TABLE_SLUG。

您應該創建一個具有以下屬性的 Notion 數據庫。（您可以從此處複製模板。）

查看每個變量的詳細信息

title: Title
location: Select
published: Checkbox
date: Date
slug: Text
url: URL (Your photo image url)

請不要在任何屬性框中留空，除了複選框和描述。

如果這樣做會發生錯誤。

在無伺服器平台上部署

我們現在已經完成了大部分配置，是時候部署它了。

您可以選擇將其部署在任何支持 Next.JS 框架的 serverless 平台上，我們推薦使用 Vercel，當然，您也可以使用 Netlify 等。

請勿使用 Cloudflare Pages，他們目前只支持 Next.JS 靜態部署。

要將其部署在 Vercel 上，請訪問 Vercel 並單擊 New Project 按鈕。
導入您 fork 的 GitHub 存儲庫。

配置的結構基本是這樣。

添加 Environment Variables 很重要，否則部署將失敗。
完成所有設置後，單擊部署。
您可以通過 Vercel 自動生成的 URL 訪問您的網站（如果是在 Vercel 部署，以 vercel.app 結尾）。

部署在本地

我們現在已經完成了大部分配置，是時候部署它了。

您可以通過單擊 GitHub 上的 Download ZIP 來下載整個項目，或者如果您願意，也可以 Clone 它。

之後，請執行以下操作：

在 IDE（例如 VSCode）或終端（例如 iterm2）中打開您的項目。
在項目的根路徑中創建一個 .env.local。
從 .env.example 複製並粘貼到 .env.local。
在.env.local中填寫環境變量。

添加 Environment Variables 很重要，否則部署將失敗。
在你的項目中運行 yarn。
在你的項目中運行yarn build && yarn start。
您現在可以通過 http://localhost:3000 訪問您的網站。

On this page