搭建博客网站最简单的方式：Notion + Vercel实现个人博客搭建

背景

如果你有自己写博客的习惯，需要一个网站来展示自己的博客，同时，你又不想要进行复杂的开发工作，那么本篇文章将教给你一个最简单的博客搭建方式，仅需要一些配置修改即可以搭建好你的个人博客网站。

如果之前有使用过Notion来进行过笔记、任务搭建的，那么你将很快的上手这个博客搭建教程。本篇教程是基于Vercel这个自动化部署平台加上Github上的开源项目和Notion平台，快速的搭建一个博客网站。

搭建步骤

1. Fork Github上项目到个人仓库

搭建上是基于Github上的**nextjs-notion-starter-kit**项目，这个项目是基于Next.Js进行开发的，对于我们来说，我们不用进行二次开发即可运行我们自己的项目。

首先我们进入到Github上项目的页面：

nextjs-notion-starter-kit项目主页

Fork之后我们可以在自己的仓库中看见这个项目：

fork到自己的主页

接下来，我们只需要修改一个配置文件便可以完全完成我们的开发工作。点击site.config.js文件进入编辑功能，这个文件对应着我们的博客网站上的一些内容的构建：

配置文件名称

我们可以看到配置文件的内容是关于我们构建博客的一些基本要素，其中最重要的要素是rootNotionPageId 这个参数的配置，这个参数对应的就是我们Notion中的页面ID，后面章节将讲述如何获取这个参数。

下图中描述了我们涉及的一些需要自己配置的参数信息，可以在修改后提交到我们的项目中。

import { siteConfig } from './lib/site-config'

export default siteConfig({
  // the site's root Notion page (required)
  rootNotionPageId: '613ee3afda7b406c9cac7ba2965502cc',

  // if you want to restrict pages to a single notion workspace (optional)
  // (this should be a Notion ID; see the docs for how to extract this)
  rootNotionSpaceId: null,

  // basic site info (required)
  name: 'Chaodi Tang Blog World',
  domain: 'chaodit.tech',
  author: 'Chaodi Tang',

  // open graph metadata (optional)
  description: 'My Blogs.',

  // social usernames (optional)
  twitter: 'transitive_bs',
  github: 'transitive-bullshit',
  linkedin: 'fisch2',
  // mastodon: '#', // optional mastodon profile URL, provides link verification
  // newsletter: '#', // optional newsletter URL
  // youtube: '#', // optional youtube channel name or `channel/UCGbXXXXXXXXXXXXXXXXXXXXXX`

  // default notion icon and cover images for site-wide consistency (optional)
  // page-specific values will override these site-wide defaults
  defaultPageIcon: null,
  defaultPageCover: null,
  defaultPageCoverPosition: 0.5,

  // whether or not to enable support for LQIP preview images (optional)
  isPreviewImageSupportEnabled: true,

  // whether or not redis is enabled for caching generated preview images (optional)
  // NOTE: if you enable redis, you need to set the `REDIS_HOST` and `REDIS_PASSWORD`
  // environment variables. see the readme for more info
  isRedisEnabled: false,

  // map of notion page IDs to URL paths (optional)
  // any pages defined here will override their default URL paths
  // example:
  //
  // pageUrlOverrides: {
  //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
  //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
  // }
  pageUrlOverrides: null,

  // whether to use the default notion navigation style or a custom one with links to
  // important pages
  navigationStyle: 'default'
  // navigationStyle: 'custom',
  // navigationLinks: [
  //   {
  //     title: 'About',
  //     pageId: 'f1199d37579b41cbabfc0b5174f4256a'
  //   },
  //   {
  //     title: 'Contact',
  //     pageId: '6a29ebcb935a4f0689fe661ab5f3b8d1'
  //   }
  // ]
})

2. Copy Notion上对应的博客模板

在项目配置好后，我们对于博客网站的编码任务就已经是基本完成了，下面我们需要做的就是绑定我们Notion页面和我们项目访问主页的一个关系。

本次我们使用的模板就是Github项目上提供的一个基础模板（Next-js-Notion-Starter-Kit-Template），后续其实也可以自己写一个或者到Notion Template中去搜索模板。

进入页面后点击Duplicate将页面复制到我们自己的Notion空间中。

Notion Blog模板页面，点击Duplicate

复制到自己的Notion空间中

现在这个页面就是我们博客网站的主页面，我们需要将页面与我们的项目配置进行绑定，也就是将页面的PageId填入到步骤1的配置文件当中去。在Notion页面点击Share，选择Publish，点击Publish to web。

将页面对外发布

查找到对外发布的页面的rootNotionPageId

此时我们会得到一个链接，将我们的链接复制出来，上面所得到的链接如下：https://nostalgic-height-beb.notion.site/Next-js-Notion-Starter-Kit-Template-1568ef5d62864eabbe4cbad327387865?pvs=4，链接中我们需要关心的就是156开头的这一串数字（1568ef5d62864eabbe4cbad327387865），这串数字对应的就是我们的pageId，将这个ID复制到我们步骤1对应的rootNotionPageId 参数中即可完成我们Notion页面与项目页面的配对。

3. 使用Vercel部署项目

经过上面两个步骤，我们已经基本完成了我们的编码工作，离我们最终部署我们的网站只剩下最后的部署工作。我们使用Vercel作为我们的部署服务，关于Vercel的相关信息以及账号申请可以参考这一篇博客（Vercel介绍以及注册指南）。接下来我们将讲述如何部署我们的项目。

进入我们Vercel的主要页面，点击Add New Project：

Vercel主页面

选择我们Github上Fork的项目点击Import：

选择Github上面需要部署的项目

进入页面后点击Deploy即可以部署我们的项目，项目部署成功后会给我们一个默认地址。

部署页面

项目部署成功后，可以在我们的Dashboard页面上查看到我们的项目，在我们绑定自己的域名之前，使用的是Vercel给我们的默认域名，我们可以进入项目，购买并且绑定我们自己的域名。

项目管理页面

4. 绑定自己的域名

在Dashboard中进入我们部署好的项目后，可以看见有一个Domains的标签

点击Domains进入域名管理页面

点击Domains标签后可以进入到我们域名绑定界面：

域名管理页面

属于购买好的域名，点击Add即可给该项目添加上新的域名，并且通过域名进行访问。