Fl0w3r

carpe diem

如何使用Notion制作个人网站

Posted on In
2.1k 4 mins.

引言

基于 Notion + Next.js + Vercel 来搭建个人网站，真的不难，适合零基础毫无技术基础的人。这个方法完全免费，不需要购买服务器，还可以不租用域名，可以随时随地发布内容，不局限于安装了 Git 的电脑，折腾起来也相对比较容易。

准备工作

Notion ID 的获取

首先我们要到在 Notion 中建立一个页面，像我这样：

接下来点击分享：

这一串数字就是我们需要的 Notion ID ，然后保存好。

创建vercel账号

需要说明的是，可以直接用 GitHub 账号登录，但是如果你 GitHub 账号是用 qq 邮箱注册的，可能会有些问题。

所以最好从其他邮箱重新注册一个账号。

正式开始

从Github中fork项目

从下面这个下面 fork 一份

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

fork完成之后来到你的 GitHub 主页，修改这个文件，点进去，编辑文件：

修改如下配置信息（以 xxxxx 代替）：

  • rootNotionPageId：这是用于编辑/管理内容的 Notion 页面的 Id
  • 博客基础信息：包含博客名称、Notion 页面的原始链接、作者名称
  • 可联系博客作者的渠道/方式：可以填写 Twitter、GitHub、Linkedin
module.exports = {
  // where it all starts -- the site's root Notion page (required)
+ rootNotionPageId: 'xxxxx',

  // 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: 'xxxxx',
+ domain: 'xxxxx',
+ author: 'xxxxx',

  // open graph metadata (optional)
  description: 'Example site description',
  socialImageTitle: 'Transitive Bullshit',
  socialImageSubtitle: 'Hello World! 👋',

  // social usernames (optional)
  twitter: 'transitive_bs',
+ github: 'xxxxx',
  linkedin: 'fisch2',

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

导入之后，点进项目，部署：

点进去部署完之后，就能在互联网中查看了（这里没有显示是因为 Notion id 和我自己页面的问题，作为网站而言已经成功部署了）。

自定义域名

部署好了，域名是很长的，于是我们需要用一个好记的域名，具体操作如下：

添加完之后就需要进行域名解析了，后面的可以到你的域名哪里搞一下域名解析，就可以搞定了，然后就可以愉快地在 Notion 写文章了，会自动同步过去的，非常的nice！

Related Posts