低成本、低代码，三十分钟教会你使用Notion作为CMS搭建自己的Web网站

搭建自己的个人网站，你可以展示自己的作品和技能，让其他人更容易找到你并与你联系。同时，通过网站，你可以建立自己的个人品牌形象，展示专业能力，吸引更多机会。不仅如此，持续更新网站内容也有助于个人学习成长，同时吸引更多职业发展机会，为自己的未来打下坚实基础。

那如何快速搭建自己的个人网站呢？这里花费30分钟快速教会你。

本课程主要面向对象无需对编程有深入的了解，只需要跟着博客步骤来就好了。

我们使用到的工具有：

• https://www.notion.so/
• https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

你需要提前准备的环境有：

• Git
• NodeJS

第一步、准备Notion账号

关于notion的介绍，大家可以参考我们这一篇文章：

Notion，下一代个人&团队管理工具

新建网页

在我们注册好账号之后，我们新建一个页面：

在新建好页面后，我们可以在页面中填充后续想要在个人网站上展示的内容，可以以我这一篇为例：

ERRORIGHT.DEV

开放网页外部访问

接下来我们需要开放网页的外部访问，这样的话后续我们的网站才能从我们的notion中提取内容信息。

点击Share——>Publish——>View Site

进入网页后，我们复制网页的URL导航栏中的page’s Notion ID.

这里的话我的是1d016e8d99c8454db403f86fb4b14449（记住这个ID，后续需要用到）

使用nextjs-notion-starter-kit项目将notion网页转换成个人网站

克隆项目

使用以下指令克隆项目：

git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git

填入NotionPageId

克隆项目后，使用VScode打开项目，打开site.config.ts文件，将其中的rootNotionPageId替换成刚才在URL导航栏中的page’s Notion ID。

如果有社交媒体账号这里也可以直接添加你的账号ID。例如我的Twitter账号ID是zouyu1121，这里就改成zouyu1121

运行网页在本地测试

我们在终端运行：npm run dev

可以看到控制台打印输出如下：

这里我们直接打开URL：http://localhost:3000

可以看到可以正常访问。

部署到服务器

首先你需要选择你的服务器，这里我直接采用的Vercel，免费的，当然你也可以采用GitHub Pages。

Vercel 是一个流行的云平台，专门用于部署和托管静态网站、服务器端渲染的应用程序和无服务器函数。它提供了简单易用的界面和工具，让开发者可以快速将他们的应用部署到全球性的服务器网络上。Vercel 也支持自动化部署、预渲染、灵活的环境变量管理等功能，使得开发者可以专注于构建优秀的应用而不用担心基础设施的细节。

在本地使用 Vercel CLI 部署应用也非常简单。以下是一些基本步骤：

1. 安装 Vercel CLI：首先，你需要在本地安装 Vercel CLI。你可以使用 npm 进行安装：

   npm install -g vercel
   
   或者
   
   yarn global add vercel
   

2. 登录 Vercel：运行以下命令来登录到你的 Vercel 帐户：

   vercel login
   

   这将打开一个浏览器窗口，让你登录到 Vercel 帐户。

3. 部署应用：进入你的项目目录，然后运行以下命令来部署你的应用：

   vercel
   

   这将启动部署流程。你将被提示选择一个项目（如果你有多个项目），然后 Vercel 将会自动构建和部署你的应用。

4. 查看部署状态：部署完成后，Vercel CLI 会输出部署的状态信息，包括部署的 URL。

这样，你就可以在本地使用 Vercel CLI 来方便地部署你的应用了。

配置自定义域名

购买域名的步骤这里不过多介绍，按照官方操作即可。这里推荐几个购买域名的平台：

Domain Names, Websites, Hosting & Online Marketing Tools - GoDaddy

Buy a domain name - Register cheap domain names from $0.99 - Namecheap

我这里是在namecheap购买的，更加便宜一些哈哈哈哈哈

域名注册服务提供商，如GoDaddy和Namecheap，主要提供的是域名注册、管理和DNS设置等服务。当您在这些平台购买域名时，您实际上是在注册一个域名，使其与您的网站或服务相关联。

域名的注册和解析过程如下：

1. 域名注册：您在域名注册商那里购买域名，注册商将您的域名信息记录在域名注册数据库中。
2. 域名解析：注册商同时提供DNS服务，DNS（域名系统）负责将域名转换为IP地址。当用户输入一个网址时，DNS会将域名解析为服务器的IP地址，以便用户可以访问相应的网站。
3. 域名管理：注册商提供的管理界面允许您更新域名的DNS记录、续费域名、更改域名所有权等。

虽然不同的注册商可能会使用不同的DNS服务器，但域名的解析过程是全球统一的，遵循相同的DNS协议。因此，理论上，无论您在哪个注册商注册域名，只要DNS设置正确，访问速度不会受到注册商的影响。访问速度更多地取决于网站的服务器位置、服务器性能、网络带宽以及用户的网络条件等因素。

然而，某些注册商可能提供更快的DNS服务或更优化的DNS配置，这可能会间接影响域名解析的速度，但这种影响通常很小。选择一个信誉良好、服务稳定的域名注册商，可以确保域名管理的便利性和可靠性。

NameCheap的DNS配置

How to Change DNS For a Domain - Domains - Namecheap.com

详细步骤可看这篇博客：

How to set up Namecheap Domain on Vercel

如果你的DNS配置好了验证通过了还是无法访问，可能是缓存问题，这个时候你可以换一个设备访问试试看，详细🔎请参阅：

Why is my Vercel domain not verified?

后续更新

• 添加Redis图像缓存

  将Redis用作图像缓存的好处之一是其快速的读取速度。由于Redis将数据存储在内存中，而不是磁盘上，因此能够提供快速的数据读取和响应速度。这对于需要频繁读取图像数据的应用程序来说尤为重要。

• 添加PostHog Analytics网站分析

  PostHog Analytics是一个开源的产品分析平台，旨在帮助开发人员和产品团队更好地理解用户行为，优化产品体验。PostHog提供了一系列功能，包括事件追踪、用户分析、漏斗分析、实时数据等，以帮助团队深入了解用户行为和产品性能。

• 添加Youtube、Twitter相关社交媒体内容展示

  通过直接在源代码上进行修改，调用相关社交媒体API接口，对最新资讯信息进行展示。可以增加网站的多样性和吸引力。

• 添加联系&订阅邮箱功能

  添加联系与订阅邮箱的功能有助于建立更紧密的联系，用户可以轻松提出问题、建议或反馈意见，从而增强用户信任和网站可靠性。同时，订阅功能可以吸引访问者成为忠实粉丝，接收最新内容、特别优惠等信息，增加用户参与度和互动性。此外，通过邮件营销策略，网站可以推广活动、产品，并提高转化率和销售额，进而增强网站的影响力和市场竞争力。

注意⚠️

实际上，**nextjs-notion-starter-kit更多适用于简单的notion网页的展示，不适合于数量庞大的notion数据库展示。举例来说，我的notion博客里面记录了我几百篇博客，由于nextjs-notion-starter-kit的底层逻辑是调用notion API接口一次性获取notion pages网页里面所有的信息才展示，所以这个等待过程并不短。**

因此我这边的处理方案是，nextjs-notion-starter-kit搭建的网站只做以下几个目的：

• 个人介绍网站
• 内容引流导航网站

详细项目、博客、YouTube视频等还是回到各自的平台上进行浏览。