【非原创】基于 Notion,Vercel 搭建个人网站
2023-7-21
| 2023-7-29
1539  |  4 分钟
password
last_edited_time
Jul 29, 2023 01:39 PM
type
status
date
slug
summary
tags
category
icon

建站

创建 Notion 的博客内容公开页面

  1. 如果没有Notion账号,就去Notion 官网注册一个账号。
  1. 打开Notion 博客内容模板,点击右上角的Duplicate,登录后即可复制模板到自己的命名空间下。
  1. 打开Notion,进入刚复制的博客内容模板,点击右上角的Share,然后选择Publish,生成的链接中有后续用到的page_id(域名后的第一串连续的字符,长度是32位)。但是需要注意的是:这个链接如果公开的话,你的所有文章别人都能直接通过这个链接访问,如果是不小心泄露的可以自己Duplicate,重新Publish后替换掉后续用到page_id,但是这种方式还是有可能泄露的,据说可以通过api key的方式访问,读者自己研究吧,我不是很在意,反正重要信息别存在公开的 Notion page 中,最好也别直接存,起码使用加密压缩包的形式存储。
注意:Notion 的 Android 操作系统端,需要去 Google App Store 下载,所以正常情况下中国大陆地区的是无法使用 Android 端的(需要支持系统内置 Google 服务框架,然后安装 Google App Store, 架上梯子就可以下载了)。而下载 Android 端程序后,后续就不需要梯子了。如果手机是装的操作系统不是原生的 Android 或者阉割后的,没有 Google 服务框架,那么只能使用 网页端 以及 PC端了。
 

Fork NotionNext 项目

  1. 如果没有Github账号,就去Github 官网注册一个账号。
  1. 打开NotionNext 项目 Github 地址,点击右上角的Fork,分叉一个分支到自己的仓库。
 

使用 Vercel 进行部署

  1. 如果没有Vercel 账号,就去Vercel 官网注册一个账号。建议使用Github账号注册,方便后续操作。
  1. 账号类型:Hobby是免费的,1个月有100G的免费流量;Pro一个月20$;还有个定制版自行研究。详情请看Vercel 定价
  1. 导入Git Repository,选择刚才自己Fork的仓库,期间好像需要授权,有点忘了。
  1. 项目导入后,就可以进行部署了,但是需要修改下配置,修改配置的方式有两种:
    1. 【不推荐】直接修改项目的配置文件,一个是会公开配置的内容,特别是page_id,还有个是容易和NotionNext 项目组的更新冲突
    2. 【推荐,可以无缝持续升级项目版本】修改Vercel部署项目的Environment Variables项目 -> Settings -> Environment Variables。该配置可以一个个添加,还可以批量导入,第一次推荐批量导入。创建一个xxx.env文件,内容为key=value的形式,每行一条配置,注释使用**#。具体的配置项查看NotionNext 项目 配置文件**,带process.env.xxx的配置都是可以配置的,后面的xxx就是配置的key。其中主要的配置是NOTION_PAGE_ID。注意:导入一次后确认无误后及时save,然后刷新一下,不然本次就无法再次导入了。
  1. 【如果有自己的域名】配置自己的域名,项目 -> Settings -> Domains
  1. 配置完后就可以进行部署了,项目 -> Deployments,随便选个部署记录,选择Redeploy即可重新部署。
 
网站标题取的是Notion 博客内容公开页面表格的标题 个人logo取的也是Notion 博客内容公开页面表格的icon 网站描述取的是Notion 博客内容公开页面表格的描述
 
配置模板,例如名称为:blog.jinyahuan.cn.env.Production
 

升级 NotionNext 项目版本

  1. 进入Github,进入自己ForkNotionNext仓库。
  1. 左上角选择生成环境部署分支(看你在Vercel中项目部署生产环境部署的分支是哪个(默认是main项目 -> Settings -> Git -> Production Branch),中间上方有个Sync fork,点击后选择Update branch。同步完后Vercel会自动部署项目。
  1. 如果发现部署失败(目前没发生过,不知道会不会影响到已经部署的版本),如果影响到参考进行下面的思路:从NotionNext 项目 Github 地址tagcheckout一个分支出来,然后推送到自己的仓库中一个新分支,然后在Vercel选择生成环境部署分支为这个分支。详细操作自行找资料。
 

写作指导

  • 表格的type: 页面类型
    • Post: 博文
    • Page: 单页。单页不会再博文列表显示
    • Notice: 公告
  • 表格的status: 发布状态
    • Published: 博文列表可见,也可以通过链接访问
    • Invisible: 再博文列表不可见,但可以通过链接访问
    • Draft: 完全隐藏
  • 表格的title: 文章标题
  • 表格的summary: 文章的内容摘要。搜索和简略显示会用到
  • 表格的slug: 文章的访问路径(相对的)。 (每篇文章唯一,请勿 重复)
  • 表格的category: 文章分类
  • 表格的date: 文章的发布日期
  • 表格的last_edited_time: 文章的最后更新时间(这个需要自己加,看源码才知道的这个字段,添加时搜索类型 last edited time
  • 表格的tag: 文章的标签
  • 表格的password: 文章密码,文章需要输入该密码才能访问
 

附录A 相关链接

 
 
使用技巧
  • 软件
  • 技巧
  • 建站
  • 安装与使用 VirtualBox修改 IntelliJ IDEA 的一些目录位置
    目录