Vercel + Notion 建个人博客

大家好，我是 “潇洒哥老苗”。

今天我带大家创建一个站，不需要购买服务器，只需要掏钱买个自己喜欢的域名即可。

涉及

Vercel：免费静态网站托管
Notion：内容后台
CloudFlare：CDN 加速
域名
nextjs-notion-starter-kit：以 Notion 为后台的网站

nextjs-notion-starter-kit

地址：https://github.com/transitive-bullshit/nextjs-notion-starter-kit

1. fork

打开该网址，然后 fork 该项目。

2. 修改项目名(可选)

如果 fork 后的项目名不喜欢，可以修改自己喜欢的。

3. 修改配置

在项目根目录打开 site.config.js 文件，点击修改，如下：

然后修改几处内容，刚开始只需要看有中文描述的几处。

module.exports = {
  // where it all starts -- the site's root Notion page (required)
  // Notion 根页面的 ID
  rootNotionPageId: 'c811c01b7d824f5ba966f688ee37652b',

  // 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: '老苗', // 站名
  domain: 'laomiao.site', // 域名
  author: '老苗', // 作者

  // open graph metadata (optional)
  description: '专注技术、持续学习', // 网站描述
  socialImageTitle: 'Transitive Bullshit',
  socialImageSubtitle: 'Hello World! 👋',

  // social usernames (optional)
  // 社交账号
  twitter: 'laomiao_', 
  github: 'miaogaolin',
  linkedin: '',

  // 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,

  // image CDN host to proxy all image requests through (optional)
  // NOTE: this requires you to set up an external image proxy
  imageCDNHost: null,

  // Utteranc.es comments via GitHub issue comments (optional)
  utterancesGitHubRepo: null,

  // whether or not to enable support for LQIP preview images (optional)
  // NOTE: this requires you to set up Google Firebase and add the environment
  // variables specified in .env.example
  isPreviewImageSupportEnabled: 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
}