Vercel + Notion 建个人博客
Vercel + Notion 建个人博客

Vercel + Notion 建个人博客

Tags
Vercel
CloudFlare
Notion
Published
December 17, 2021
大家好,我是 “潇洒哥老苗”。
今天我带大家创建一个站,不需要购买服务器,只需要掏钱买个自己喜欢的域名即可。

涉及

  1. Vercel:免费静态网站托管
  1. Notion:内容后台
  1. CloudFlare:CDN 加速
  1. 域名
  1. nextjs-notion-starter-kit:以 Notion 为后台的网站

nextjs-notion-starter-kit

 

1. fork

打开该网址,然后 fork 该项目。

2. 修改项目名(可选)

如果 fork 后的项目名不喜欢,可以修改自己喜欢的。
notion image

3. 修改配置

在项目根目录打开 site.config.js 文件,点击修改,如下:
编辑文件
编辑文件
然后修改几处内容,刚开始只需要看有中文描述的几处。
module.exports = { // where it all starts -- the site's root Notion page (required) // Notion 根页面的 ID rootNotionPageId: 'c811c01b7d824f5ba966f688ee37652b', // 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, // basic site info (required) name: '老苗', // 站名 domain: 'laomiao.site', // 域名 author: '老苗', // 作者 // open graph metadata (optional) description: '专注技术、持续学习', // 网站描述 socialImageTitle: 'Transitive Bullshit', socialImageSubtitle: 'Hello World! 👋', // social usernames (optional) // 社交账号 twitter: 'laomiao_', github: 'miaogaolin', linkedin: '', // 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 }
改完后直接提交。

4. rootNotionPageId

从这个 ID 页面开始同步网站,该页面必须公开,选中下图 Share to Web
notion image
ID 从网址上找,例如:
notion image
 

Vercel

下来做的是,将 Notion 的内容同步到 https://vercel.com/ 网站,等这个完了再解析域名即可。

1. Github

使用 Github 登录

2. 创建项目

notion image

3. Import & Deploy

导入 Github 上 fork 后的项目,import 后再点击 deploy,下来需要耐心等会。
Import
Import
Deploy
Deploy

4. 域名

完成后点击 Go to Dashboard > View Domains,再添加自己的域名。
Domain
Domain
添加完后,再解析自己的域名,我的域名在阿里云购买的,先复制上图中蓝色框的内容,这个是在 Vercel 站上给你分配的域名。这个域名不方便,所以用自己的。
notion image
图解:
  • 记录类型:CNAME
  • 记录值:填写自己的
notion image

网站细节调整

1. 修改 copyright 时间

最新代码无需设置。
从根目录打开 components/Footer.tsx 文件,在大概 38 行处修改,如下图:
notion image
 

2. 默认 icon 和 conver 图

每个 notion 页面都可以设置这两个图,当如果也想在不设置的情况下,网站提供一个默认图,可以修改 site.config.js 如下配置:
defaultPageIcon: "https://laomiao.site/page-icon.png", defaultPageCover: "https://laomiao.site/page-conver.jpg",
按照我这个地址,是把图片放置在了根目录下的 public/ 下。

3. 首页文章配置

这是我个人的文章属性:
notion image
其中 4 个拿出来说明下:
  • Published 发布时间
  • Tags 标签
  • Public 是否公开
  • Featured 是否好文章
Published 发布 和 Tags 标签在如下图中配置,展示列表中出现的信息:
文章列表信息
文章列表信息
Public 用于筛选,确定是否在首页展示。
Featured 和 Published 用于排序。
notion image
 
如果不想展示的属性你这隐藏起来,不然会页面上展示出来,记着属性的顺序也会影响到页面的展示:
notion image

CloudFlare

也可以不使用 CloudFlare 加速网站,但是如果使用 Vercel 部署的网站在国内访问起来会比较慢,可以试试,反正我没用,用了发现速度提不起来。

1. 添加网站

打开 CloudFlare 网站,添加自己的域名,cloudflare.com,后面咱简称 CF
notion image

2. DNS

找到自己购买的域名,然后修改 DNS 服务器,修改成什么样呢?
先打开 CloudFlare 后台,找到 DNS 服务器地址,如下:
notion image
然后修改域名的 DNS 服务器地址,如下:
notion image
 
CF 上解析 DNS,如下:
notion image
图解:
  • 内容:复制该 IP 地址,这是 Vercel 的 IP。
  • 代理状态:设置为仅限 DNS。

3. 规则

在 CF 上添加两条规则,记着要根据自己的域名配置,这些配置是为了解决 SSL 证书问题,具体的,咱没深究。
notion image
 

4. 边缘证书

点击 SSL/TLS > 边缘证书,关闭 Https,至于为啥,暂时也没深究,我在第一次操作时没有添加,网站访问速度还是,后面加上后好了,不知道是巧合还是什么。
notion image
 

扩展

1. 分析

配置都完了,现在可以再访问了,如果你还想分析网站的访问速度情况,可以打开 Vercel 的分析模块。
notion image

参考

相关阅读

Google/Bing/Baidu验证并收录网站。
Vercel 解决静态网站接口跨域
使用 Cloudflare Workers 加速图片访问
Vercel + Notion 本地部署