使用Notion和Nobelium搭建博客网站

吃核桃不吐核桃壳
1,249 阅读7分钟

本文原文在我的博客站点发布。

Notion是一款集成了笔记、知识库、数据表格、看板、日历等多种能力于一体的[应用程序]https%3A//zh.wikipedia.org/wiki/%25E5%25BA%2594%25E7%2594%25A8%25E7%25A8%258B%25E5%25BA%258F)，它支持个人用户单独使用，也可以与他人进行跨平台协作。这样的一款强大软件，可以被用于：

  • 笔记
  • 任务管理
  • 团队协作
  • 等等

这样一款软件，拥有极其强大的富文本编辑能力，支持非常多的文本格式，如果可以拿来做博客就好了。但是Notion的分享功能相对鸡肋，而且也没啥曝光度，没有很好的方式组织和管理博客。有没有办法搭建一个博客网站，但是同时却使用Notion的强大编辑能力呢？

有，解决方案就是Nobelium。

0 Nobelium简介

Nobelium在GitHub上的简介如下：

A static blog build on top of Notion and Nextjs, deployed on Vercel. 翻译：一个基于Notion和Nextjs，在Vercel上部署的静态博客系统。

它具有以下特点：

  • 快速

  • 快速的页面渲染和响应式设计

  • 高效编译器的快速静态页面生成

  • 多设备支持

  • 在桌面端、移动端一样完美显示

  • 自动高效免费

  • 部署在免费且快速的Vercel平台

  • 在Notion上的更新自动同步到网页上

  • 功能全面

  • 评论

  • 宽页面

  • 搜索

  • 标签

  • 订阅

  • 网站统计

  • 黑暗模式

  • 等等……

  • 美观优雅

  • 好看是主观的

  • 使用 Tailwind CSS ，二次开发容易

  • 自定义性高

  • 可配置项多

  • 支持多语言（支持简体中文）

1 开始部署

部署过程需要一个GitHub账户和Notion账户。

01 搭建Notion数据库

Nobelium需要一个数据库以储存博客数据，这个数据库被存放在Notion中。

打开 Nobelium 提供的 Notion 模板，将模版Duplicate到自己的Notion Workspace中。（这几张图用了TANGLY大佬的）

随后打开Share to Web，让Nobelium能够正常访问到数据库中的内容。

数据库的Icon，标题可以任意修改，也可以按照自己的需要调整View。可见《Notion入门使用指北》

如果你不希望这个Page公之于众，也可以通过Notion Token的方式来让Nobelium抓取内容。网络上可以找到相关信息此处不做解释。

02 搭建GitHub仓库

Fork Nobelium Github项目

Fork相当于将他人的代码仓库复制为一个自己的仓库，从而对仓库进行编辑。Fork之后就可以编辑仓库代码了。

完成这一步后修改一下配置文件：

点击blog.config.js 以查看文件。

随后点击Edit按钮以进行编辑：

我的配置如下（演示用非真实配置）：

onst BLOG = {
  title: '核桃Blog',
  author: '吃核桃不吐核桃壳',
  email: 'zdh883210zdh@gmail.com',
  link: 'https://blog-rouge-five.vercel.app/',
  description: '为你，千千万万次',
  lang: 'zh-CN', // ['en-US', 'zh-CN', 'zh-HK', 'zh-TW', 'ja-JP', 'es-ES']
  appearance: 'auto', // ['light', 'dark', 'auto'],
  font: 'sans-serif', // ['sans-serif', 'serif']
  lightBackground: '#ffffff', // use hex value, don't forget '#' e.g #fffefc
  darkBackground: '#18181B', // use hex value, don't forget '#'
  path: '', // leave this empty unless you want to deploy Nobelium in a folder
  since: 2021, // If leave this empty, current year will be used.
  postsPerPage: 7,
  sortByDate: false,
  showAbout: true,
  showArchive: true,
  autoCollapsedNavBar: false, // The automatically collapsed navigation bar
  ogImageGenerateURL: 'https://og-image-craigary.vercel.app', // The link to generate OG image, don't end with a slash
  socialLink: 'https://twitter.com/craigaryhart',
  seo: {
    keywords: ['Blog', 'Website', 'Notion'],
    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
  },
  notionPageId: process.env.NOTION_PAGE_ID, // DO NOT CHANGE THIS！！！
  notionAccessToken: process.env.NOTION_ACCESS_TOKEN, // Useful if you prefer not to make your database public
  analytics: {
    provider: '', // Currently we support Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
    ackeeConfig: {
      tracker: '', // e.g 'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: '', // e.g https://ackee.craigary.net , don't end with a slash
      domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: '' // e.g: G-XXXXXXXXXX
    }
  },
  comment: {
    // support provider: gitalk, utterances, cusdis
    provider: '', // leave it empty if you don't need any comment plugin
    gitalkConfig: {
      repo: '', // The repository of store comments
      owner: '',
      admin: [],
      clientID: '',
      clientSecret: '',
      distractionFreeMode: false
    },
    utterancesConfig: {
      repo: ''
    },
    cusdisConfig: {
      appId: '', // data-app-id
      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
    }
  },
  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
}
// export default BLOG
module.exports = BLOG

title 填写博客的名称 author 填写作者的名称 email 邮箱地址（非必填） link 博客地址 description 博客描述 lang 改变界面语言，简体中文填zh-CN 以及外观相关的appearance、font、lightBackground、darkBackground可以进行更改，分别改变界面的颜色主体、字体、背景。可以根据配置文件中的注释进行更改。

如果想要改变博客界面的图标，也可以用自己的图片替换public文件夹下的图片文件。

如果部署完成后改变配置，如果希望配置生效，需要在Vercel Redeploy

点击Add file，可以将文件上传到此处进行替换，保持文件名称一致即可（可以先修改原文件的名称，再上传一份自定义的文件）。

03 部署到Vercel

打开 vercel.com/ ，然后点击 Sign up 选中Continue with GitHub以使用GitHub登陆。（可能需要验证手机号）

登陆完成后进入Dashboard，应该能看到类似以下的界面（我已经搭建了，在你的界面应该是空白的）。

点击右上角的New Project看到如下界面。

选择import你刚刚配置的GitHub仓库，看见此界面。

如图，要配置的东西很少，只要给项目起个名字（实际上图里的名字是用不了的因为vervel要求project name中无大写字母）

重点在于下面的环境变量Environment Variables

填写一个环境变量，NAME写NOTION_PAGE_ID 。VALUE则写你Notion数据库的PAGE_ID

如何获许数据库的PAGE_ID？ 打开你的Notion博客数据库，点击Shared可以得到一个分享链接。

复制链接，如链接为： hetaozdh.notion.site/[xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx](https%3A//hetaozdh.notion.site/043ba69a97714dc09701180965686dcd%3Fv%3D5f79ff6b11f64fabb72e48503c146ee5)?v=…
标红的一段就是PAGE_ID

写完后点Add才真正增加了环境变量。

设置这个环境变量，是为了让Nobelium正确访问到你的Notion数据库。

一切准备就绪后，点击Deploy开始部署。

部署完毕后，就可以点击Visit访问你的博客界面了，至于绑定域名的工作我还没做，有需要可以自行搜索。

2 开始写博客吧

要想在博客上面放文章，只需要在Notion数据库中新建Page，在Page中就可以写博客了，需要设置一些字段，如图：

Date是博客显示的时间，即写文章的时间或发文章的时间。

slug决定了博客的地址，如我填写的notion-blog，这篇文章的显示地址就为：

myblog.com/notion-blog

status决定文章的状态，可选项有：

当然也可以自行增加，不会有影响。只有status为Published的文章才会显示在博客界面上。Idea、Draft、Revise分别表示点子、手稿和修改状态。

tags是文章的标签

summary为文章摘要，显示在博客首页。

type为文章显示类型，一般的博客都选择Post。

不需要Redeploy，当你的文章处于Published状态，只需刷新博客界面，你的文章就会同步到博客界面上。

3 功能拓展

01 评论系统

我采用的是cusdis评论系统。配置简单省心，功能简约，无需注册即可评论。

打开以下链接：

cusdis.com/

用GitHub或Gitlab或Google账户登入，提示新建一个Website，按照喜好填写名字随后进入这样一个界面：

点击Embed Code 将会得到一串代码：

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="XXXXXXXX-XXXXXX-XXXXXXXX"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

将data-app-id后双引号内到内容复制下来。

然后回到GitHub仓库，修改配置文件blog.config.js如下修改：

// support provider: gitalk, utterances, cusdis
    provider: '', // leave it empty if you don't need any comment plugin
    gitalkConfig: {
      repo: '', // The repository of store comments
      owner: '',
      admin: [],
      clientID: '',
      clientSecret: '',
      distractionFreeMode: false
    },
    utterancesConfig: {
      repo: ''
    },
    cusdisConfig: {
      appId: '在这里填进你的data-app-id', // data-app-id
      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
    }
  },
  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
}
// export default BLOG
module.exports = BLOG

保存修改后，vercel会自动地重新编译部署，部署完成后刷新页面即可在文章末尾看到评论区了
总结

Notion拥有强大的编辑能力。通过Nobelium，我们搭建了一个优雅美观的博客站点。

个人博客可能并非当代互联网上最好的内容载体，但是重点从来不在载体，也不在站点的配置，而是在内容创作。专心于内容创作，是一条漫长的心路，坚持走这条路，守住自己的一片土地，也是一种白纸黑字的浪漫。

本文使用 文章同步助手 同步

avatar
文章
阅读
粉丝