Notion 博客
date
Sep 2, 2023
slug
notion-blog-vercel
status
Published
tags
Website
summary
使用vercel 部署个人博客，后续计划将老的博文陆陆续续迁移
type
Post
背景
很早开始就用Notion来记录个人笔记和技术总结，今天看到一篇用notion + nobelium作为数据，vercel进行免费部署的文章，看起来简洁又好用。用这个方案的好处有：
- notion插入图片免费，解决了图床的问题
- nobelium工具可以将notion数据库转换为博客
- vercel可免费部署静态页面，提供https证书、自定义的域名
- cloudflare 可以免费使用CDN
- 使用cusdis 作为评论系统
开始
github上找到nobelium，跟着readme的教程，往下设置即可。
nobelium
craigary • Updated Sep 2, 2023
教程总结如下
- Fork 此项目到你的github工作区，基于此repo可进行二次开发和部署
- 复制Notion模板到你个人notion的工作区中，在这个模板下进行博客文章的写作
- 复制完之后可以自己修改模板名称，删减模板的文件。
- 页面开启共享设置，如图，注意保存好
page id
- （可选）Github账户授权登录
cusdis,记录分配的data-id
- 自定义
blog.config.js,这一步主要是自定义语言、博客的元数据信息 - 在刚刚clone的repo根目录下找到
blog.config.js文件，根据实际情况编辑下面信息
- (可选)替换
/public目录下的favicon.svgfavicon.ico
- 使用vercel 部署,设置如下环境变量
- Github账户授权登录Vercel,增加一个新的project
- import 之后，设置
Environment Variables，新增一个参数NOTION_PAGE_ID，复制刚才拿到的page id值 - Deploy 然后等编译和发布结束，出现Congratulations页面
- Vercel 会自动生成一个域名供公网访问，可以进行编辑，自己设置下前缀。
进阶
上一步的部署得到的博客地址在国内被墙，需要开代理才可以访问。最好是设置自定义域名和Cloudflare 加速。
购买域名
个人blog域名推荐 .me .im 后缀
比较了之后我在cloudflare上购买了域名，使用visa卡。没有visa卡，可以使用支付宝在
namesilo 上购买。 DNS 设置
cloudflare 仪表盘上选择购买的域名，点击进入设置。
- DNS - 记录 添加一条A记录和CNAM记录
- A记录
名称填写你的域名，内容填写76.223.126.88，代理状态为仅DNS - CNAME记录 名称填写
www，内容填写cname-china.vercel-dns.com
- SSL/TLS - 概述 设置加密模式为
完全
Vercel 添加自定义域名
在项目设置 - Domains 添加你的域名即可
