使用 Notion 快速搭建个人网站

使用Next.js和Vercel在几分钟内部署您自己的基于Notion的网站。

Next.js Starter Kit

使用Next.js和Notion构建网站的理想入门工具包。

介绍

使用Next.js和Notion驱动的个人博客/组合的网站transitivebullsh.it。

Notion作为CMS，从Notion获取内容，然后使用Next.js和react-notion-x呈现所有内容。

然后将该站点部署到Vercel。

产品特点

安装程序只需几分钟（单个配置文件）💪
通过react-notion-x对Notion内容提供支持
Next.js / TS / React /Notion
出色的加载速度
性感的 LQIP图像预览
嵌入式GitHub注释
自动打开图形图像
漂亮的网址
自动目录
完全支持黑暗模式
就像在Noion中一样，通过CMD + P快速搜索
响应式支持-桌面/平板/手机
针对Next.js和Vercel进行了优化

建立

所有配置都在site.config.js中定义。

Fork/Clone此仓库
更改site.config.js中的值
npm install
npm run dev 在本地测试
run run deploy 部署到Vercel💪

开发者已经精简了配置步骤已使搭建过程更加容易。

首先，编辑rootNotionPageId。默认情况下，呈现作者网站的公共概念页面78fc5a4b88d74b0e824e29407e9f1ec1。

你需要公开根目录概念页面，然后将链接复制到剪贴板。然后提取URL的最后一部分，类似于 d1b5dcf8b9ff425b8aef5ce6f0730202，即页面的Notion iD。

建议在主页上设置一个包含所有文章/项目/内容的收藏集（作者在这里使用的是 inline gallery）。但是，Notion工作空间上没有结构上的限制，因此，可以像通常在Notion中一样随意添加内容。该代码中有几部分具有逻辑，仅在博客帖子页面（收集项目详细信息页面）上显示注释。

URL路径

该应用程序默认在dev和prod中使用略有不同的路径名（尽管将任何dev路径名粘贴到prod中都可以，反之亦然）。

在开发中，它将使用/nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202页面标题的精简版本，后缀为它的概念ID。我发现在本地开发过程中始终将概念页面ID放在首位和居中确实很有用。

在生产中，它将使用/nextjs-notion-blog更好的方法，因为它消除了多余的ID混乱。

在构建过程中，将自动为您完成从概念ID到未分类页面标题的映射。请记住，如果您计划随着时间的推移更改页面标题，则可能要确保旧链接仍然可以使用，并且除了Next.js内置的支持外，目前不提供检测旧链接的解决方案重定向。

有关更多详细信息，请参见mapPageUrl和getCanonicalPageId。

注意：如果您的工作区中有多个页面，且具有相同的名称，则应用程序将引发错误，通知您URL路径名重复。

主题化

所有自定义Notion内容的CSS样式都位于styles / notion.css中。

它们主要针对react-notion-x styles.css导出的全局CSS类。

自定义大多数与样式相关的内容应该非常容易，尤其是在本地开发和热重载的情况下。

暗黑模式

完全支持黑暗模式，可通过页脚中的太阳/月亮图标进行切换。

附加功能

所有其他依赖项都是可选的-项目开箱即可正常工作。

如果您想复制我网站的一些高级元素，则必须设置一些其他功能。

Fathom Analytics

Fathom提供了Google Analytics（分析）的轻量级替代方案。

它是可选的，由于简单和优雅，推荐使用。

要启用分析，只需添加一个NEXT_PUBLIC_FATHOM_ID环境变量。

仅在生产中会考虑此环境变量，因此不必担心 Fathom Analytics将与Localhost开发混为一谈。

GitHub 评论

Utteranc.es是一个了不起的开源项目，使开发人员能够将GitHub issues 作为评论部分嵌入到其网站上。

集成非常简单。只需编辑utterancesGitHubRepoconfig值，使其指向你要用于问题注释的仓库即可。

在启用生产环境之前，您可能想通读Utterances文档，因为在如何将issues 映射到你网站上的页面方面存在一些小问题，但是总的来说，安装非常简单。

预览图像

这是一个非常酷的功能，灵感来自Medium的平滑图像加载，首先加载低质量，模糊版本的图像，并在加载后以全质量版本进行动画处理。这样的效果很好，但是确实增加了一些工作。

如果isPreviewImageSupportEnabled设置为true，则该应用将通过lqip-modern为您的概念工作区引用的所有图像计算LQIP图像。这些将存储在Google Firebase集合中（作为base64 JPEG数据），因此它们只需要计算一次。

您必须设置自己的Firestore的Google Firebase实例，并提供三个环境变量：

＃ base64编码的字符串，其中包含您的Google凭证json文件
GOOGLE_APPLICATION_CREDENTIALS =

＃您的Google云端专案名称
GCLOUD_PROJECT =

＃用于将图像存储在
FIREBASE_COLLECTION_IMAGES =中的firebase集合的名称

实际工作发生在create-preview- imageless server功能中。

自动社交图片

像这样的Open Graph图像将根据每个页面的内容自动为网站的每个页面生成。

默认情况下，它考虑到：

封面图片（还原为默认的全网站封面图片）
页面图标（回退到默认的全站图标）
页面标题
页面字幕（可选；从集合页面的“描述”属性中提取）

此功能通过在此无服务器功能中将一些自定义HTML呈现到Puppeteer实例而起作用，该功能以页面ID作为输入。

这是生产中社交图像URL的示例：/ api / render-social-image / 71201624b204481f862630ea25ce62fe

请注意，只要将其部署到Vercel，就无需执行任何其他操作即可启用此功能。

自动目录

默认情况下，每个文章页面都会有一个目录显示aside在桌面上。当用户在文档中滚动时，它使用scrollspy逻辑自动更新当前部分，从而使在不同部分之间跳转变得非常容易。

如果页面少于minTableOfContentsItems（默认3），则目录将被隐藏。如果浏览器窗口太小，它也会隐藏在索引页上。

此目录使用与Notion内置目录块相同的逻辑（有关基本逻辑和关联的单元测试，请参见getPageTableOfContents）。

分类

使用 Notion 快速搭建个人网站

Next.js Starter Kit

介绍

产品特点

建立

URL路径

主题化

暗黑模式