Post Banner

Nobelium

Author

Skyler Shu

Nobelium 是什么

Nobelium 是一个使用 Next.js + Notion 第三方 API 实现的,部署在 Vercel 上的静态博客系统。作者是 Notion 中文社区管理团队的 @Craig Hart

🔗 GitHubDemo

Features

  • 部署在 Vercel,配合 Next.js,实现超快的响应速度
  • 使用 Next.js 实现,配合 ISG,更新 Notion 文章无需重新部署
  • 使用 Tailwind CSS 实现样式,方便二次定制
  • 响应式设计,移动端友好
  • 支持搜索,单独筛选页面
  • Tag 标签、RSS feed… 还有更多!
  • 部署指南

    本文不会从注册账号讲起,你可以从其他很多地方获取这些基本知识。

    准备

  • Notion 账号
  • GitHub 账号
  • Vercel 账号
  • 一个域名(非必需)
  • 1. Duplicate 模版,获取 Page ID

    在 Notion 中 Duplicate Notion 模版,并打开 Share to web

    然后 Copy link 保存下来复制的链接,我们需要从中提取出 Page ID。例如,

    php

    1
    https://www.notion.so/skylershu/f7ac6993a72e413f871b6ce4bb96d603?v=7672ba01dbcc4e188895816f975db6c1

    这个链接的格式是这样的:https://notion.so/用户名/PageID?v=***,我们需要的只有 Page ID。

    2. Fork GitHub repo

    在 GitHub 中 Fork 此 repository,fork 之后修改 blog.config.js

    按照提示修改引号中的内容,其余保持默认即可。

    javascript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    const BLOG = {
      title: 'CRAIGARY', // 标题
      author: 'Craig Hart', // 作者
      email: 'i@craigary.net', // 邮箱
      link: 'https://nobelium.vercel.app', // 链接或域名
      description: 'This gonna be an awesome website.', // 描述
      lang: 'en-US', // 语言
      appearance: 'auto', // ['light', 'dark', 'auto'],外观 (浅色, 深色或自动)
      lightBackground: '#ffffff', // 浅色状态下的背景色,请使用十六进制颜色,不要忘记 '#' 号,如 #ffffff
      darkBackground: '#111827', // 深色状态下的背景色,请使用十六进制颜色,不要忘记 '#' 号
      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,
      showAbout: true, // WIP
      showArchive: true, // WIP
      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!!!
      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
        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
        }
      }
    }
    // export default BLOG
    module.exports = BLOG

    我们还需要修改 /public 文件夹下的头像,格式、大小可以参考 GitHub 中的图片大小。

    3. 部署到 Vercel

    前往 vercel.com 登录,在 dashboard 点击 New Project,然后 Import Git Repository 从 GitHub 导入此前 Fork 的 Repository。

    选择自己的账号后,填入环境变量 Environment Variables

  • NAME 填写 NOTION_PAGE_ID
  • VALUE 填写步骤一中获取的 Page ID
  • 这里一定要点击 Add,VALUE 会自动加密,然后点击 Deploy,当看到以下页面即部署成功。

    4. 自定义域名

    Vercel 会给我们分配一个域名(可以修改),比如我这里的 https://skylers.vercel.app/。如果你自己有域名的话,可以前往 Vercel > Project Settings > Domains 添加域名。然后根据提示在域名后台添加一条 A 记录或 CNAME 记录即可。Vercel 会十分友好地自动生成 SSL 证书。

    配合 Cloudflare 使用

    部分地区 Vercel 速度很慢或者无法访问,可使用 Cloudflare 中转。首先,你需要 将域名服务器更改为 Cloudflare

    步骤一: 创建新的 DNS 记录,类型为 CNAME,名称为 @,记录值为 cname.vercel-dns.com。可以考虑将 www 一起加上。

    步骤二: 在 CloudFlare 站点管理面板中选择 SSL/TSL 选项,设置 SSL/TLS 加密模式为完全

    步骤三: 在 CloudFlare 管理面板 规则 (Rules) 选项,创建页面规则,输入 /.well-known/*,选择 关闭安全性 (Disable Security),保存规则。

    参考:

    How do I use a Cloudflare domain with Vercel?