本系列记录我使用 Cloudflare 搭建个人网站的完整过程。从域名注册、DNS 配置，到 Cloudflare Worker、D1、KV、R2 以及个人博客部署，逐步搭建属于自己的 Web 基础设施。
本篇作为系列第二篇，主要介绍使用 NotionNext + GitHub + Vercel 搭建个人博客，并完成自定义域名绑定、Notion 内容同步以及主题切换与自定义。
在上一篇文章中，我已经完成了域名购买，那接下来就是开始使用这个域名来进行搭建独属于自己的博客网站。经过网上搜索，我发现目前搭建博客有好几种方案，比如使用 WordPress，Hexo，Hugo 等方案，但不乏其中需要花费 money 来进行维护，这对我这种口袋比脸还干净的学生党而言，每个月还需要花上几十甚至大几百来进行维护博客网站，很显然是不划算的。因此，在我不懈努力下，终于在神器 GitHub 中找到了这款无需花钱且自定义高的开源项目———NotionNext，无需写任何代码，动动小手点击几下屏幕就可以完成自己博客网站搭建，这真是天助我也。话不多说，直接进入今天主题，使用 NotionNext + Velcel 一键式搭建我的个人博客系统。
前期准备
在正式搭建博客之前，需要准备以下几样:
- GitHub 账号
- Velcel 账号
- 一个独属于自己的域名
需求三已经准备好了，没有准备好的小伙伴，可以看我第一篇文章《Cloudflare 建站实战：域名注册与规划》，这里面就有如何获得独属于自己的域名。
GitHub 注册
在注册之前，我必须介绍一下这款伟大神器 GitHub，这是一款全球最大的代码托管与软件开发协作平台之一，基于 Git 版本控制系统，为开发者提供代码存储、版本管理、团队协作、开源项目交流以及自动化部署等功能。用户可以在 GitHub 上创建仓库，保存和管理项目代码，也可以通过 Fork、Issue、Pull Request 等方式参与开源项目开发。目前，GitHub 已成为程序员、科研人员和企业进行软件开发、项目展示以及技术交流的重要平台。我之所以会说它是神器，是因为这个网站就没有它不知道的，无论是合法的，还是非法的，在这里几乎都可以找到，例如我前段时间刚搭建的免费看片网站（嘿嘿🙄🙄，绿色网站，类似那种盗版影片网站），还有之前参加某些竞赛，需要爬取特定网站的数据，在这里面都可以实现。这网站只有你想不到，没有它做不到的，大佬云云，众生可渡。今天所搭建的网站代码就是出自于这里，开始表演。
首先，需要点击这个网站 GitHub ，点击右上角 Sign up ，选择注册，在页面中填写自己信息即可，国家那里任选，因为我挂的英国的节点，所以那里是英国，其实这个国家关系不大，选择大陆也是可以的。邮箱那里建议使用谷歌邮箱，要是没有谷歌邮箱，也可以使用自己域名邮箱或者QQ邮箱等，注意，这里不建议使用临时邮箱，特别是某些网站中临时，因为 GitHub 后期在上传项目，项目处理等方面需要邮箱验证，临时邮箱可能无法验证，那么会产生一系列后果，这里显示我就使用我的域名邮箱了。
信息填写完毕之后，点击下面 Create account，之后会跳转到这个邮件验证页面，去刚才填好的邮箱中，找到验证码，填写进来，即可完成注册。
完成注册之后，会跳转到最开始进来的首页，这个时候点击右上角 Sign in，填写刚才的邮箱和密码，在点击一下 Sign in，就进入了 GitHub 的首页，
有些小伙伴会发现，这个网站里面全是英文，看不懂怎么办，这里我有两种办法，第一种就是点击右上角头像，找到 Appearance，进入之后在里面查看是否有 Language，选择简体中文即可。
第二种方法就是，在自己的浏览器中，点击右上角三个点，下拉选择 Settings，之后在里面找到 Language,选择 Add languages，搜索简体中文，并且置于最上方，重启浏览器，在进入 GitHub，就会发现里面的导航键就变成中文了，但是 GitHub 的仓库代码、README、Issues 内容不会自动翻译。
这里我建议在 GitHub 使用全英文，毕竟都是大学生了，这点英文看不了，可就说不过去了。
变为中文之后，GitHub 注册到这里就结束了，接下来开始 Vercel 注册。
Vercel 注册
浏览器搜索 Vercel，或者点击这个链接 Vercel，来到 Vercel 官网，点击右上角的 Sign Up，
在这里有很多种登陆方式，因为刚才已经注册好了 GitHub，所以这里建议使用第二个选项进行登陆，点击 Continue with GitHub，它会跳转到授权页面，点击下方绿色按钮 Authorize，进入了这个页面，就表示已经成功注册 Vercel 了，据我查看官方文档中，还没有中文这一项，因此页面都是默认英文，如果是在看不懂的就可以借助浏览器自带的 Google 翻译，强制学些英文也是不错的。
相信看到这里的小伙伴，已经成功的完成了这两个网站的注册，接下来就开始正式进入博客网站搭建。
博客网站搭建
首先，打开这个网址 NotionNext，进入这个开源项目，右上角给这个项目点上小星星，支持一下大佬们的作品，再点击一下小星星旁边的 Fork 按钮，把这个项目复制到自己仓库中，这里选择默认即可，点击下方 Create fork，自动跳转到已经在仓库里面的这个项目了，如何来区分是不是自己项目，可以看左上角的头像，以及小星星数。
其次，打开 Vercel，进入之后点击左侧 Projects，之后再点击右下角的 Import Project 的 Import，之后再点击左下角的 GitHub，再次点击一下 Install，会跳转到一个新页面，
这个页面划到页面底部，点击 Install，登陆自己的刚才注册好的 GitHub 账号密码，点击Confirm，之后自动跳转回到 Vercel 页面，右下角也会出现刚才在 GitHub 中 Fork 的项目。
到这一步，距离成功部署自己的博客网站仅剩一步之遥，点击左侧项目的 Import，点击 Deploy，大约等待三四分钟，显示这个页面就表示部署成功了。
如果中途出现这个页面，不用管，直接点击 Skip securing my account 即可。
这样，一个博客网站就部署成功了，点击下面 Continue to Dashboard，就跳转回了 Vercel 项目部署页面。
之后点击页面中的 Domains 下的连接，这个就是 Vercel 自动分配的域名，之后就跳转到了博客页面了，
到这里，博客其实就已经部署成功了，但这个分配的域名过于复杂了，要想实现别人能方便看自己的博客，那就需要绑定一个独属于自己的域名，要是没有域名的小伙伴，可以点击下面文章来查看。
这里作为演示，域名我就使用之前免费领取的域名了，但是要是小伙伴最好使用自己购买的域名，毕竟是自己的博客，免费域名还是不方便，说不定哪天人家就把根域名取消了，那就得不偿失了。
点击左侧导航键的 Domains，再点击右上角的 Add Existing，把自己的域名添加上来，这里说明一下，最前面加上 blog，因为一个根域名可以创建无限个二级域名，一个二级域名可以创建无限个三级域名，一个三级域名可以创建无数个四级域名。因此，就可以在前面加上标记，用一个域名添加前缀来实现很多不一样的域名，这里因为是个人博客，所以使用 blog，要是邮件系统那就可以使用 mail 作为前缀。
在下方出现刚才所所添加的域名名称的时候就表示添加成功了，但是会发现下面出现红色，是Verification Required View DNS configuraation，这是因为刚添加的域名还没有进行 DNS 检验，点击 View DNS configuraation，显示出来 NDS 信息，需要在 Cloudflare 里面进行设置的，步骤类似《Cloudflare 建站实战：域名注册与规划》中后半段把其他网站中购买的域名托管到 Cloudflare 里面一样，但是在我添加这个免费的三级域名的时候，我发现需要在二级域名中添加一条信息，因为是免费获取的三级域名，因此无法添加，所以我就新添加了一个我自己购买的二级域名，要是小伙伴之前购买了类似 xxx.com 这样的二级域名就可以直接添加上去了。第一张图是免费域名的，不可以，第二张图是自己购买的域名。
要是不想看，那就可以接着按照下面步骤进行操作即可。首先，先打开 Cloudflare 这个网站，登陆上你的账号，之后点击右侧导航栏 Account home 中的你所购买的域名，进入域名内，在点击左侧 DNS，点击下方的 Records，点击 Add record，
在这里设置刚才在 Vercel 里面所看见的 DNS 信息，Vercel 中Type 对应 Cloudflare 中的Type，在里面自己选择即可，之后再把剩下信息复制上去，点击一下 Save 保存一下就好了。
之后回到 Vercel 中，点击 Refresh ，显示 Valid Configuration 就表示已经设置好独属于自己的博客域名了，这时候就可以在网址上搜索刚才你自己设定的域名了，就会出现自己刚才搭建的博客网站了。
现在网站搭建完事了，那如何来撰写呢，这个时候就需要使用 Notion 这款软件了，通过 Notion 来撰写，之后连接到搭建的网站，即可实现博客撰写和发布了。
Notion 使用
点击 Notion，来到官网，下载属于自己电脑的版本，之后登陆一下即可，在点击这个链接 Notion Blog，之后点击右上角的复制按钮，先要在网页登录一下，之后复制到自己的 Notion中，之后在客户端登陆账号就可以看到了。
之后随意点击一篇文章，在 Notion 笔记中：在页面右上角的菜单栏中，点击共享——发布——发布，复制页面 ID 在共享链接中、域名中间的一串32位字母和数字。
例如：
https://resolute-grapple-aa0.notion.site/Cloudflare-NotionNext-Vercel-812fa2dbbecf837484550182798526a8?source=copy_link
这其中的 812fa2dbbecf837484550182798526a8 就是你的页面 ID。
之后回到 Vercel，找到 Environment Variables，点击右上角的 Add Environment Variable，
在 Key 中填上 NOTION_PAGE_ID，Value 就填写刚才页面 ID 即可，点击 Save 保存一下，点击右侧 Deployment，之后重新部署一下即可。
到这里，就已经把博客网站的步骤全部完事了，这个时候在访问自己绑定的域名，之后在 Notion 中编辑你的文章内容，就可以同步到博客网站了，如果不想折腾的同学，到这里就可以划走了，接下来是有些进阶博客内容，因为搭建出来的网站没有什么特点，需要自己额外更改一下，这里分为两种方式，一个是采用官网的主题，另外一种就是在官网上采用主题，但是进行修改，实现自定义主题，进阶版都是需要修改代码的，如果看不懂代码，就还是使用默认主题。
博客网站进阶版——使用官方主题
首先，打开官方主题目录 内置主题全览（27个），在这里挑选一个想要的主题，默认的搭建出来的主题是 simple，这里面有好多好看的主题，而且还有些商用主题，看个人需求进行选择。
选择好了之后，进入 GitHub 中，找到自己仓库里面刚刚 Fork 的项目，之后往下翻，找到 blog.config.js，点击一下，进入里面。
进来之后，就会看到一行代码，这行代码就是可以修改主题的地方，之后后面有注释，结合刚才你想要的主题，点击右上角编辑模式，把 simple 进行替换即可，其他地方不要动，更不要删掉引号，这里我就随意更改一个主题了，这里我选的是 heo。
编辑完之后，点击右上角的 Commit Change，然后回到 Vercel 页面，点击左侧导航键 Deployment，右侧就会自动进行部署，等待部署时间结束，再次访问博客就会发现主题进行更改了。
其实到这里，就可以了，要是觉得官网主题不太符合自己的审美标准，那就可以自定义模块和功能，比如我这个博客网站就是官方的 example 主题的，但是有些区别，就是我根据我自己的审美和所需功能进行调整了，因此，我接下来会简单介绍一下我如何进行更改的，具体情况得具体分析。
博客网站进阶版——自定义主题
还是回到 GitHub 中，下面我标记下来的就是可以自定义的代码的地方，里面内容很多，对于代码一点看不懂的，或者初学者还是不建议更改代码，要不然运行都是报错，我记得我当时部署博客官网网站只用了几个小时，但是自定义网站却搞了一周多，光在 GitHub 中提交代码修改次数就五千多次了，实属费劲，这还是有 AI 作为辅助的，所以能尽量使用官方的，就使用官方的。在这里提醒一下爱折腾的小伙伴，要是自定义主题了，也就是修改了代码，最好不要连接官方了，因为 Fork 项目，上游也就是官方一修改，处于下游的 Fork 代码的就会提交，因此自定义主题了，特别是代码修改很多的地方，就不要 Fork 官方了，直接取消掉，要是害怕没有及时更新哪些新功能的话，其实也不用担心，在官方更新文档中，明确写着具体哪里更新的，到时候自己手动更新一下即可了。
相信看到这里的小伙伴，应该对于博客网站部署有了清晰的认识，有什么问题可以在评论区交流，如果想要自定义主题，但是代码看不懂，也可以在最上方关于我那里找到我的联系方式。
我这个博客网站的 GitHub 地址：
要是觉得我的博客网站不错，可以直接 Fork 到自己仓库，步骤就是文章内容，觉得不错可以给我点个小星星。
之前文章链接