无代码博客#
由 Vercel + Notion + NotionNext 构建#
前言#
有一位不会写代码的朋友也想搭一个博客，ta 甚至没有使用过 git，嗯，那我们的方案就有了下列需求：
- 可以在线编写与发布。
- 不需要修订前端代码。
- 最好全部都是可视化操作。
经过一番寻找，大致确定下列三种方案：
- WordPress ↗ + 云服务器
- Notion + NotionNext ↗ + Vercel
- 云服务器 + Halo + 服务器可视化操作 ↗
方案一需要在云服务器里进行终端操作，甚至要接触 docker 之类的玩意，我感觉认知成本太高了。方案三确实全局可视化了，但是博客数据全部存在云服务器的 DB 内，怎么导出是一件麻烦的事情，对于想要长期写博客的朋友来说，很可能有需要迁移数据的场景，这就需要博客数据仍然是可下载的文件形式而不是存在 DB 里的。
所以我们选择方案二，把数据存在 Notion 中，用 Vercel 去部署 NotionNext 项目，再用 NotionNext 获取 Notion 中的数据，去渲染网站。
DB : DataBase，数据库，原谅我替这些还不懂的朋友解释一下 :p
docker : 一种容器技术，用于在一台电脑内部署多个不同的应用
好啦，让我们开始吧！
前置准备#
关于梯子
有些朋友可能还没有梯子，这里以我随便找的一个梯子为例，做一个配置教程。
首先下载安装一个 Clash Verge ↗：
软件打开后如下所示：
打开青云梯 ↗，注册登录之后买最便宜的套餐：
这是我随便找的一个梯子，其实很多梯子都支持 Clash Verge，比如说更便宜的有 Sakuracat，但是那个比较不稳定。
付款之后打开首页，复制订阅链接：
然后打开 Clash Verge 输入订阅链接导入：
最后打开系统代理：
系统代理打开之后，电脑内任何应用的网络请求都会经过 Clash Verge 转发，从而完成翻墙。
配置完成，可以到代理内找一个你看的顺眼节点开始翻墙了。后面的步骤将默认在开梯子的情况下进行，如果你网页打不开，就尝试换换节点。
你也可以到此为止，去刷 youtube、twitter 和 quora 了。
关于 Notion
注册后点此下载桌面端应用：
虽然网页也完全可用，但是我喜欢 desktop app~
搭建博客#
初始化#
首先打开 NotionNext 提供的 Notion模板 ↗。
点击右上角将模板拷贝到自己的 Notion 应用中。
我这里改了一些东西，忽略它们。
然后点击分享 - 发布。
拿到分享出的网络链接。
譬如我的链接就是：
https://shimmering-guppy-a59.notion.site/22839ed0f5b580659320f60896532de3?v=22839ed0f5b581bd85c7000c37d1f677&source=copy_link拿到中间这段序列号：22839ed0f5b580659320f60896532de3，即在 “site/” 之后，在 “?v=” 之前的这一段。记为页面 ID。
打开这个页面 ↗，进行 Fork 项目，然后我们就也有了一个 NotionNext 代码仓库：
此时打开 Vervel ↗，使用 Github 账号登录，把我们刚刚创建的项目 Import 进来。
添加一个环境变量 NOTION_PAGE_ID，就是我们刚才拿到的那个序列号。
然后点击 deploy 即可。然后点击 Continue to dashboard，我们就到达了这个页面：
此时点击 Visit（注意要挂梯子哦），就能看到部署的网站啦，我们完成了初始化操作。但是此时网站还是默认的内容，我们要修整它。
修订配置#
切换作者名、网站名等
打开 Notion：下图处就是网站名、作者头像、网站描述的配置处。
切换主题
首先打开配置中心：
按住 ctrl 再点打开，可以新开一个页面。找到 THEME 这一行设置，打钩并替换为 fukasawa。
替换之后，可以到 Vercel 里面重新部署一下，或者多刷新几次自己的网站。
这两张图即为 Vercel 重新部署示例。
然后就能看到网站的新主题啦：
切换浏览器 icon
就是标签页展示的这个小图标：
这里可以先用这个图标生成工具 ↗，把 png 图片转换成 32 * 32 的。
然后在这里上传获得链接：image 上传工具 ↗
把链接复制到刚才的配置空间里：
其他的配置可以自行探索啦！或者去参考NotionNext 帮助手册 ↗。
清理默认信息
网站原有的文章和边栏信息不是我们想要的，我们可以删除它们。介绍一下该主题对应的元素：
- Menu
- Post（就是你写的文章）
- Notice（公告）
- SubMenu
- Page（单页）
- tags（文章标签）
- category（文章分类）
那么一到五就是 Notion 数据库内对应的数据行，你删去它就没了（记得多刷新几遍，但说实话它这个缓存做的有点太难受了，每次都要重新刷新很多次，建议修订页面结构之后直接 Vercel 重新部署一下）。
比如我们把公告删了，它就消失了。
而 category 和 tags 其实就是我们数据行的部分属性，如下图。
第一篇文章#
我们可以写一篇文章试试了：
配置一些属性：
- status 选为 draft，就不会显示到网站上
- slug 是子路径，会显示到浏览器该文章的 url 内
- summary 是文章概述，会显示在封面上
- password 是设置文章的访问密码
- 文章的封面也会同步到网站上
然后就可以编辑内容了。这里你需要了解 Markdown 语法，参考notion 编辑手册 ↗。
如果你想要插入图片，那么你直接截图复制，或者/插入。
去网站上看看：显示出来了
点进去之后，可以看到浏览器的路径栏的最后一个词显示的就是我们填入的 slug。
增加一个单页#
步骤一样，就是增加一个 Page 文章，然后再加一个菜单项，注意 slug 保持一致，不要和已经有的 slug 重复。
效果如下：
将博客域名更换为自定义域名#
首先我们要买一个域名，打开 namesile ↗，建议直接用谷歌账号登录。搜索框里搜索自己想要的域名，然后它就会给你推荐类似的域名，挑选一个价格合适的购买就好。
购买完成后就可以看到 Active Domains 变成 1 了。
点击 Manage，选中刚才购买的域名，点击 Change Nameservers：
记住这个页面，后面还会用到，你的 NameServer 应该是默认的 ns1.dnsowl.com 之类的，不要管它。
打开 CloudFlare ↗，用 qq 邮箱注册即可，套餐选择免费套餐。
把刚才的购买的域名输入进去，一路 Continue。
点击 Configure DNS：
往下拉直到看到 Cloudflare Nameservers：
把这两条替换到刚才的页面中（我也不知道你的和我的一不一样，总之照你的来就好）：
同时记住这个页面，后面也要用到，你的下方应该是空的没有任何记录：
然后我们打开 Vercel，找到你刚才部署的应用：
点开域名管理页面，Add Domain，输入你刚才购买的域名，我的原始域名已经被使用了，所以我这里就用一个子域名。
a.ww-weeds.xyz 就是 ww-weeds.xyz 的子域名，你可以简单理解为在前面加了一段。
刚出来是红色的，点击 learn more：
可以看到这有一条记录，记下它：
回到 CloudFlare 的 configureDNS 页面，添加这条记录：
回到 Vercel 刷新，发现配置完毕：
耐心等待一会（大概 5 分钟）之后，就可以访问你的新域名啦。
添加评论系统#
Cusdis
这个配置比较简单，功能也会少一些。打开 Cusdis 主页 ↗，用 github 登录就好，然后写你的网站的名字。
点击 Embeded code，拿到 data-app-id：
回到 Vercel，添加环境变量 NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID，save 之后重新部署（save 之后右下角会自动弹窗，直接点 reDeploy 就好了）。
可以看到页面最下方就有了 Cusdis 的评论了：
Cusdis 麻烦的点就是要去后台手动通过评论的审核：
然后页面就展示出来了：
更方便的 Twikoo 配置也会更复杂，稍微等等吧~
Twikoo
好啦，既然做了就做完吧！参考 Twikoo Vercel 部署教程 ↗。
我们首先到 MongoDB 主页 ↗，用 Google 账号登录就好。要你填表直接拖到最下面 skip 掉，选择免费套餐。
会自动弹窗给你，记下用户名和密码，或者你自定义密码也可以，点击 create database user。
连接方式选择 Drivers：
点击 Show Password，复制下方的字符串保存，后续要用。
点开 Network Access，ADD IP ADDRESS，增加一条 0.0.0.0/0（允许所有 ip 访问）：
你的序列串还可以通过这种方式获取：
仍然选择 Drivers，此时需要你手动把 “<db_password>” 替换为你记录下的密码：
点开这个网址 ↗，随便起个名字之后，点击 create。
然后增加环境变量 MONGODB_URI，值就是你保存的 MongoDB 序列号。
然后打开 Deployment Protection，disable 掉 Vercel Authentication，然后重新部署。
点击 visit 之后就可以看到云函数运行正常了：
把浏览器地址栏里的地址记下来，这里就是：https://twikoo-4lec7ydh6-wwweedss-projects.vercel.app/，你也可以替换成子域名。 ↗
然后到 NotionNext 项目中，继续添加环境变量 NEXT_PUBLIC_COMMENT_ENV_ID，重新部署。
成功！看来跨域问题已经被 NotionNext 的开发者解决了，给他们点赞！
点击小齿轮，可以配置评论管理者账号，并进一步设置，我也不知道是不是第一个注册的就是管理者账号，所以朋友们部署好了 Twikoo 就尽快完成配置哦。
写在最后#
这都是些不重要的东西啦，写博客最重要的当然是内容啦。今天把想说的话写下来，等很多年之后回看的时候一定会有许多感触。