Featured image of post Notion Next.js & Vercel搭建半自动博客

Notion Next.js & Vercel搭建半自动博客

👀 辣眼睛提醒:本文没有适配夜间模式

概览

实例(没错就是本站):猴子打字机产物 (0wo.top)

准备材料:

  • 一个GitHub账号
  • 一个Notion账号
  • 使用Github登录vercel
  • 一个域名(如果有)

开始

Notion新建一页

Untitled.png

公开并复制URL,保留最后的Page Id,如”18330b7d58314c368ede9d641f36c1cf”

Fork

前往https://github.com/transitive-bullshit/nextjs-notion-starter-kit ,Fork一个副本(本站为https://github.com/TennousuAthena/nextjs-notion

Untitled.png

配置

编辑/**site.config.ts**,示例如下(请以您的项目文件为准)

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { siteConfig } from './lib/site-config'

export default siteConfig({
  // the site's root Notion page (required)
  rootNotionPageId: '18330b7d58314c368ede9d641f36c1cf', //必须,此处改为先前复制的PageID

  // 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: 'qctech',  //限制Notion的SpaceID

  // basic site info (required)
  name: 'Athena\'s Secret Laboratory', //Blog名称
  domain: '0wo.top', //Blog域名(?)
  author: 'Athena', //作者

  // open graph metadata (optional)
  description: 'Blog posts based on infinite monkey theorem',  //Blog 介绍

  // social usernames (optional) 社交媒体账户,可选
  twitter: '_tennousuathena', 
  github: 'TennousuAthena',
  //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,

  // 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'
  //   }
  // ]
})

Commit并Push

配置Vercel

Untitled.png

New Project → Import 即可

配置域名

Untitled.png

即可

(没有域名也不用担心,Vercel会自动创建一个默认域名.vercel.app)

然后按照提示添加解析记录

Type Name Value
A xxx 76.76.21.21

Cloudflare加速

需要注意的是,该项目无法通过Cloudflare Page部署由于其并非完全静态站,而Vercel提供Serverless服务。

使用Clourdlare,可以添加如下规则,增加缓存时间,提升访问速度

URL Settings
example.com/_next/image* Cache Level: Cache Everything

示例如下:

Untitled.png

Update 2022-04-16 :

如何判断缓存状态:按下F12打开Network,找到图片,查看响应头

Untitled.png

cf-cache-status 状态
HIT 已命中Cloudflare的缓存,无需回源
MISS 已配置缓存,但没有找到,资源已在回源后获取,下次即为HIT
BYPASS 被要求不缓存该文件,每次均回源
EXPIRED 上次缓存已经过期,CF将会再度回源获取资源,当下次请求时该文件就会显示HIT
DYNAMIC 默认不会缓存,也没有对应的缓存配置,每次均回源

Google analytics

若使用Tagmanager或GA4放置在页面头部可能导致图片懒加载blur异常,Vercel自带的analytics不会造成此问题。也可以使用Cloudflare的Web Analytics。

Untitled.png

半自动

等等,Vercel的Serverless不是能自动同步Notion上的最新内容吗?

是的……但有时候,如页面标题发生更改导致Url改变、页面结构复杂等问题会导致页面无法及时更新。解决方法是在Vercel上Redeploy一下。

Untitled.png

有时候,Database过于复杂同样会导致拉取失败,因此,该方法构建的Blog并不稳定,仅供图乐~

署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)
最后更新于 2024-09-17 16:37 CST