📢搭建小站，我是认真的！全篇干货无坑，快速起站！

Hi，又见面了，这里是可乐君！今天和大家聊一聊这个站点是咋建起来的。

前言

如果你想清楚了解这个博客的实现过程，这里推荐几个参考资料：

当然你也可以“不思进取”，直接开始自己的网站搭建！

前提准备

1. 一个Github账号

1. 一个Notion账号

1. 一个vercel账号

1. 有些基础，最好还能科学上网。

Fork仓库

打开以下链接：

点击Fork选项，将他添加到自己的仓库中，然后打开自己Fork好的仓库，等待接下来操作。

Notion配置

注册Notion账户

打开 Notion官网注册页面，按引导操作。

接着打开 Blog (notion.site) 点击右上角的Duplicate。

创建Notion数据库

打开 Notion – The all-in-one workspace for your notes, tasks, wikis, and databases. 点击Create new integration，随便输入Name。

保存 Internal Integration Secret

仓库配置

打开Fork好的仓库页面，点击Add file在根目录下创建新的文件，文件名为.env.local，然后将以下内容填入进去。

Notion database id获取

在Duplicate来的Blog下找到Post，点击Share，开启Share to web，打开分享链接，以我的为例，将链接选中的地方复制下来，就得到Notion database id了。

现在，就可以布置到vercel上了，只需要在vercel上导入你Fork的仓库即可，vercel会自动部署。不懂的朋友可以参考以下博文：

💡注意，这里已经填写好ID了，所以参考博文的配置页面ID并部署可直接跳过

进阶配置

配置文件修改

先打开config/me.ts，将内容替换，以下是每行介绍

再打开friend.ts配置友链，按照他的格式就行。

这个友链页面比较高端，它会检测友链是否活着，活着显示online，死了显示offline并禁止访问，但可能会报错，不用管，若不允许进页面请重启博客。

再打开links.ts (作用是首页小组件链接和me页social，前面在me.ts提到过）

自行替换，不多赘述。

打开仓库根目录下的next.config.js ，找到images，里面的domains是你使用过的图床域名，若不填写会报错，无法访问文章页。（page中不用，主要post）

修改所有昵称头像

先打开/components/Footer.tsx ，修改Copyright等含昵称头像的配置。

再打开同目录下的Licensing.tsx，Navbar.tsx，PostSeo.tsx依次替换昵称头像。

打开pages/tag 下的_app.tsx，index.tsx，me.tsx中的昵称替换（me.tsx有点html基础的可以修改，我自己去除了获奖和项目选项，就留下了简洁的信息页，想与我同款的可以参考我的仓库的me.tsx）

再在public/site.webmanifest 中替换昵称和头像。

评论系统配置

Twikoo评论

Twikoo免费搭建，详见Twikoo官方教程，推荐使用zeabur部署。

打开/components/comments/TwikooComponent.tsx

Giscus评论

打开Github，随便创建一个仓库或使用现成仓库（需为Public），转到仓库Settings，下滑找到Features，将Discussions选项勾上。在仓库主页点击Discussions，点击categories旁边的🖊，点击New Category，随便输入名称，Discussion Format选择Open-ended discussion。

继续，打开GitHub Apps - giscus，点击Install，按照引导配置。

打开giscus，在仓库选项中填写刚刚使用的仓库，如test-tea/gitcus

，Discussion 分类选择刚刚创建的分类，找到启用Giscus

打开/components/comments/GiscusComponent.tsx

按以下配置：

「这么短？这篇是不是有点水啊」

（「Copycat」可乐君使用了「敲打」）

「那没事了（捂脸）」

Prev

VMware安装Kali简记