說明
notion搭建博客的方法很多，今天介紹一個Notion+Vercel+Next.js搭建博客的方法，作者的Github。
演示
演示地址: Sky's Blog
搭建方法
首先注冊一個GitHub賬號。
-
注冊一個Notion賬號，創(chuàng)建一個頁面，選擇右上角
Share，選擇Share to web，選擇Copy link，找到此頁面的PageID，就是下圖中Blog后面的一串字符。image-20210609101228904 打開此倉庫 Fork一份，根據(jù)自己的情況修改
**site.config.js**的相關內容。
// 此處填寫第二步中獲取到的字符串
rootNotionPageId: '78fc5a4b88d74b0e824e29407e9f1ec1',
// 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: null,
// 站點基礎設置
name: '名稱',
domain: '域名',
author: '作者',
// 一些其他設置 (可選)
description: 'Example site description',
socialImageTitle: 'Transitive Bullshit',
socialImageSubtitle: 'Hello World! ??',
// SNS設置 (可選)
twitter: 'transitive_bs',
github: 'transitive-bullshit',
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,
// image CDN host to proxy all image requests through (optional)
// NOTE: this requires you to set up an external image proxy
imageCDNHost: null,
// Utteranc.es comments via GitHub issue comments (optional)
utterancesGitHubRepo: null,
// whether or not to enable support for LQIP preview images (optional)
// NOTE: this requires you to set up Google Firebase and add the environment
// variables specified in .env.example
isPreviewImageSupportEnabled: 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
}
-
打開Vercel，使用Github賬號登錄，選擇
New Project，找到Frok過來的庫，點擊Import。image-20210609101921941 選擇
Select->修改PROJECT NAME（可選）->點擊Deploy。等待部署完成即可。
綁定域名，選擇
Domains，按描述進行域名解析即可綁定成功。此方法搭建的博客，樣式部分可以通過修改
components、lib、styles、pages、public等幾個文件夾的內容來進行調整，比如將默認的twitter等海外SNS服務修改為QQ微博等國內服務。
