type
status
date
slug
summary
tags
category
icon
password
0. 背景
最近想整一个个人主页玩玩, 可是平时时间紧张, 所以需要一个建立之后, 可以快速编写博文或直接从我的笔记转换为博文, 并且需要能够快速简单的上传方式.
目前, 本人使用的笔记工具正是Notion, 并且有personal pro可以无限制上传文件. 于是使用Notion建站的话, 图床之类的问题也一并解决了(Github Pages显示1G的存贮, 长期写博文的话需要图床的支持). 另外, Notion的建站有两种方式, 本次介绍的方式和需要购买独立域名并且配合Cloudflare DNS重定位服务的方式. 后者需要购买独立域名(可能还需要备案), 并且部分域名可能需要修改DNS才能被Cloudflare识别, 试了两天还是放弃了. 本次介绍的方式无需考虑费用问题且建站调试也更快一些.
- 本文面向对计算机和前端有一定知识同学.
- 不过其实只用Notion建站也够了, 就是样式简陋点, 但是好歹没有bug. 🤣
1. 涉及到的服务和项目
Notion: 笔记与写作工具. 由于是基于web开发, 所以在各平台都可以无缝切换. 购买
Personal Pro 或使用学生邮箱可以不受限制的上传文件, 不过免费版也够用. - Notion入门一些时间成本, 另外需要一些Markdown知识.
Vercel: 免费的网站托管服务. 网页更新速度比 Github Pages 更快.
nextjs-notion-starter-kit: 使用Vercel和Next.js服务建站的项目.
- 缺点: 建站和调试需要一些前端知识.
- 优点: 建站和调试结束之后, 就可以使用Notion直接更新文章. 与Github Pages相比更加方便, 不过相对的, 能使用的模板也更少一些.
Node.js: 使用和调试上述项目的基础工具.
2. 大致流程
2.1. 事前准备
- 下载
- 原作者制作的主页: https://transitivebullsh.it/.
- 如果需要本站的样式, 可以使用这个连接下载这个压缩包.
下载nextjs-notion-starter-kit项目的压缩包.
下载 Node.js.
- 注册
2.2. 开始建站
- 在本地安装Node.js, 一路默认设置点确定即可.
- 解压nextjs-notion-starter-kit项目的压缩包.
- 打开终端. 进入项目的根目录. 配置项目.
2.3. 开始调试
- 首先打开Notion, 新建一篇笔记作为自己的站点首页, 在右上角点击
Share将这一页设为公开. 按自己的需求可以允许被他人吐槽, 被搜索引擎发现或被人复制网站所有内容等功能.
- 查看当前页面的URL(不是Share里的URL, 是浏览器里的URL)
- 回到本地, 打开项目中的
site.config.js.
- 启动网页本地调试模式
终端进入项目文件夹路径, 使用命令
npm run dev进入调试, 打开网址 http://localhost:3000, 显示调试页面. - 处理网页右上角的Github项目标志
目前点击这个图标会进入, 项目原作者的Github项目.
- 各种网站的图标可以在
public文件夹中替换修改.
- 进阶: 调式主页的页面样式
在项目中打开
styles/notion.css, 可以进行各种参数设置.一般样式都在styles和components这两个文件夹里.
3. 新建和发布博文
建立一个表格, 将
Name, Description, Public, Published, Tags建立好 (或者直接复制原项目作者的Notion主页里的表格).在表格中新建一行, 然后在Name列点击Open打开新的一页, 开始写文章.
点击
Public即可公布想要公布的文章. 
4. 连接私有域名
Vercel进入设置界面, 在
Domains添加私有域名.
编辑下方之前自动生成的域名, 选择刚添加的私有域名即可.
5. 可能出现的报错
- 调试的时候出现以下警告:
解决方法: 打开
node_modules/react-icons/lib/package.json. 删除并替换代码. (原代码不能注释, 一定要删除.)- 使用网页搜索功能时卡住不出结果
原因: 没有修改
site.config.js中的domain参数解决方法: 需要将
domain参数改为自己的网站网址.- 调试项目的时候出现报错:
'next' 不是内部或外部命令，也不是可运行的程序
解决方法:
npm install cross-env