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

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

Tags
Blog
Created At
Apr 11, 2022
👀
辣眼睛提醒:本文没有适配夜间模式

概览

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

准备材料:

  • 一个域名(如果有)

开始

Notion新建一页

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

Fork

notion image

配置

编辑`/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

notion image
New Project → Import 即可

配置域名

notion image
即可
(没有域名也不用担心,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
示例如下:
notion image
Update Apr 16, 2022 :
如何判断缓存状态:按下F12打开Network,找到图片,查看响应头
notion image
cf-cache-status
状态
HIT
已命中Cloudflare的缓存,无需回源
MISS
已配置缓存,但没有找到,资源已在回源后获取,下次即为HIT
BYPASS
被要求不缓存该文件,每次均回源
EXPIRED
上次缓存已经过期,CF将会再度回源获取资源,当下次请求时该文件就会显示HIT
DYNAMIC
默认不会缓存,也没有对应的缓存配置,每次均回源

Google analytics

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

半自动

等等,Vercel的Serverless不是能自动同步Notion上的最新内容吗?
是的……但有时候,如页面标题发生更改导致Url改变、页面结构复杂等问题会导致页面无法及时更新。解决方法是在Vercel上Redeploy一下。
notion image
有时候,Database过于复杂同样会导致拉取失败,因此,该方法构建的Blog并不稳定,仅供图~一~乐~