辣眼睛提醒:本文没有适配夜间模式
概览
实例(没错就是本站):猴子打字机产物 (0wo.top)
准备材料:
- 一个GitHub账号
- 一个Notion账号
- 使用Github登录vercel
- 一个域名(如果有)
开始
Notion新建一页
公开并复制URL,保留最后的Page Id,如”18330b7d58314c368ede9d641f36c1cf”
Fork
前往 ,Fork一个副本(本站为)
nextjs-notion-starter-kit
transitive-bullshit • Updated Sep 2, 2022
nextjs-notion
TennousuAthena • Updated Apr 9, 2022
配置
编辑`/site.config.ts`,示例如下(请以您的项目文件为准)
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会自动创建一个默认域名<projectName>.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 Apr 16, 2022 :
如何判断缓存状态:按下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并不稳定,仅供图~一~乐~