👀 辣眼睛提醒:本文没有适配夜间模式
概览
实例(没错就是本站):猴子打字机产物 (0wo.top)
准备材料:
开始
Notion新建一页
公开并复制URL,保留最后的Page Id,如”18330b7d58314c368ede9d641f36c1cf”
Fork
前往https://github.com/transitive-bullshit/nextjs-notion-starter-kit ,Fork一个副本(本站为https://github.com/TennousuAthena/nextjs-notion)
配置
编辑/**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
New Project → Import 即可
配置域名
即可
(没有域名也不用担心,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 |
示例如下:
Update 2022-04-16 :
如何判断缓存状态:按下F12打开Network,找到图片,查看响应头
cf-cache-status |
状态 |
HIT |
已命中Cloudflare的缓存,无需回源 |
MISS |
已配置缓存,但没有找到,资源已在回源后获取,下次即为HIT |
BYPASS |
被要求不缓存该文件,每次均回源 |
EXPIRED |
上次缓存已经过期,CF将会再度回源获取资源,当下次请求时该文件就会显示HIT |
DYNAMIC |
默认不会缓存,也没有对应的缓存配置,每次均回源 |
Google analytics
若使用Tagmanager或GA4放置在页面头部可能导致图片懒加载blur异常,Vercel自带的analytics不会造成此问题。也可以使用Cloudflare的Web Analytics。
半自动
等等,Vercel的Serverless不是能自动同步Notion上的最新内容吗?
是的……但有时候,如页面标题发生更改导致Url改变、页面结构复杂等问题会导致页面无法及时更新。解决方法是在Vercel上Redeploy一下。
有时候,Database过于复杂同样会导致拉取失败,因此,该方法构建的Blog并不稳定,仅供图一乐~