梦的开始

Huey，还记得那个下午吗？在昨天我修改完最后一个默认设置后，打开主页，望着虚拟的深邃流星主页，发呆了半小时....简直不敢相信这是我们做的！

Censi，我们很好得诠释了什么叫一拍即合，当初因为你发的一些优秀的文章被国内的监管抹除，这种高监管，让你无法表达自己真实的想法。我就在想，为什么你不做一个个人的Blog?

Huey，做自己网站的想法，在我初中时就有了萌芽，记得是一个平安夜的晚上，我打开手机一看，辛苦经营的私域群，突然就被封了。这种高监管早就让我难以忍受，我感觉活在了“Matrix”，那天我们说干就干，你说你有相关的项目经历，打开电脑展示给我看，我说：这就是我要的。

Censi，咱们说干就干，那一天我们就完成了项目的基本框架，是用Next.js的轮子，万事开头难，一开始就遇到了TailWandCSS的版本问题，好在后面解决了。Gemini pro真好用

哈哈哈，现在回想起来，非常感谢我们当初的热情，第一天就敲了10个小时还乐此不疲

我们是怎么协同工作的？

Blog 不仅仅是内容的载体，更是技术审美的外化。为了在这个项目中注入我们独特的 DNA，我们采用了一套这种高效的“前后端分离”协作模式。

架构与基石（Huey）： 负责前期的技术选型与框架搭建。从路由设计到数据库Prisma ，再到最后的部署上线，Huey 确保了整个系统的健壮性与可扩展性。

视觉与交互（Censi）： 负责中期的 UI 落地。Censi 专注于将设计稿转化为代码，通过细腻的 CSS 和流畅的组件交互，赋予这个博客独特的视觉张力。

连接我们两人的核心工具，必须是Git。它不仅仅是版本控制工具，更是我们多人协同的“交通枢纽”。

得益于清晰的模块划分，我们的开发体验非常丝滑。通常情况下，我们各自在独立的分支上“各显神通”，这种并行开发模式让我们既保持了高效率，又极大地避免了代码冲突。同时，我们严格遵守 Commit 规范——每一次提交，都是对项目演进的一次清晰记录。我们深信，清晰的 Log 是代码质量的一部分，只有把每一次改动都交代明白，后续的维护才能游刃有余。

聊聊网站功能和设计理念

我们到底要一个什么样的博客？从功能到设计需要如何构建？ 我参考了很多公开的博客设计网站，发现国外的博客在往着"个人艺术主页"在发展，而我们是以文章输出为中心展开，所以本质上我们的美化应该以正文页为中心展开。

功能构建

从功能上来说，从一开始就确立了“用户优先”为原则，理由很简单，我们要做一个操作逻辑清晰且易用兼容性强的平台，因为大家的时间都很宝贵，如果一个网站的功能逻辑很差，对于访客来说就是折磨。

举几个例子:很多设计网站只做了黑色模式适配或者白色模式，而我们完完整整做了两套；窗口自由度也近乎完美，手机，平板，pc我们都做了适配；

考虑到手机端的窗口限制，我们在主页做了分栏按钮（淘宝app给的灵感），在正文页面，我们以markdown格式为基础做标题提取，做了一个目录导航，让用户能快速的掌握全文概要；我们做了父子标签结构和全站检索，可以让用户更快速找到文章。

美化设计

从美化设计上来说，我们有几个目标：全局去线留白重新排版;用高斯模糊和阴影构建页面层次化;页面尽可能使用圆角;正文页面杂志化。

我们引入了独立的字体库，因为我不想我的内容呈现因为用户系统设置有偏差，我们遵循"少即是多"的这一原则，在我们版本修订上，其实删了很多东西。

动画理念

怎么构建各页面之间的逻辑？我的答案是用动画，一套不"油腻"的动画。举个例子，iOS的返回逻辑是在页面的左上角，每个页面的进入就像纸张一样覆盖的一层又一层（重逻辑），而安卓是任意边缘侧滑返回，更强调使用场景的便捷性。

我觉得最佳的动画表达就是要用户知道"从哪里来到哪里去"的同时兼顾便捷性，我们的动画目标也是如此。

为什么我们只做Web1

其实我们刚开始做了很多Web2时代的功能，例如点赞，浏览量。因为Censi不想被数据裹挟，所以删掉了。我们也有考虑过做用户注册系统，但是对于博客来说意义不大，因为很难指望用户能在个人博客平台输出有价值的文章。

部署

我们一开始以为部署不会很难，但实际上是很曲折的：

我们最开始考虑的是阿里云服务器，我们是先试用，第一次用的是2核4G内存，考虑价格因素，不是我们的首选，后来又试了2核2g的阿里的云服务器，到这就出问题了，在我们npm run build的时候，我们这个进程被killed了，linux在内存不足的时候会自动killed，因为价格便宜，我们考虑了很多方法：先在本地编译好，然后把这个编译好的.next文件夹传给云服务器，这个方案很快就被否决了，第一，太过麻烦，第二，不好维护。

还有一个方法是增加虚拟内存，这样也不行。相当曲折，后面用域名(在阿里云上买的)绑定IP也出了问题，在国内的服务器需要进行ICP备案，而ICP备案需要买至少三个月的服务器时间才行，那个价格贵的离谱(该死的阿里云，就会圈钱)，

后面，Censi找到了一个超便宜的海外云服务器(Racknerd)，黑色星期五活动，便宜又好用，我们选的是2核2.5g的Debian12(内存占用少)，他是真的胆大，直接买了这个加利福尼亚的云服务器，这个不能试用，所以我调整了我的本地虚拟机的配置，和服务器的一致，编译测试成功。本地测试成功，就差云服务器了。

我们冒着可能编译不了的心态，打开了VsCode的ssh远程连接到云服务器，尝试build（你知道他有多紧张）结果：成功！！！！，后来我改了阿里云域名解析到我们的服务器IP地址，还差Nginx代理等，弄完这些设置后，censi.top，域名正式诞生。我们成功绕过了ICP的备案!!

我们现在有海外服务器的公网IP，是不是就意味着我们有了一个对海外的一个渠道：VPN呢？Censi听到这样的想法也兴奋了，我们从来没想过能私拉VPN，这样的想法能否实现？问了Gemini大人，他说从技术上完全可行，到这，别提我们有多开心了，但是由于风险问题，这个服务器和那个VPN服务器区分，然后我们又买了个服务器操作，反正最后实现了，怎么实现的就不说了，话密了。

这是个什么样的项目？

简单说，这是一个基于Next.js16构建的现代化个人独立博客。我们采用了全栈开发模式，不仅有好看的前台，还内置了一个功能完整的 CMS 后台管理系统。

核心引擎与技术栈

项目的“心脏”是 Next.js 16 (App Router) 和 React，配合 Prisma 作为数据库的大管家，底层数据则安家在轻量高效的 SQLite 上。这一套组合拳，保证了系统的性能和开发体验。

站在巨人的肩膀上（致谢）

前端能这么漂亮，离不开开源社区的贡献。特别感谢以下库的作者团队：

视觉与动效： 用了 framer-motion 和 gsap 处理丝滑动画，cobe 和 ogl 搞定炫酷的 3D 地球效果，tsparticles 负责粒子特效。

内容渲染： 写作体验靠 md-editor-rt，展示则由 react-markdown 和 next-mdx-remote 驱动，甚至支持 mermaid 流程图。

UI 组件： 图标库选了 @heroicons/react 和 lucide-react，还有 next-themes 来管理明暗模式。

技术

紧跟前沿： 直接上了 Next.js 16，利用 Server Actions 处理服务端数据，路由组清晰划分了 (main) 前台和 admin 后台，中间件守卫时刻站岗。

类型安全： TypeScript 全程护航，Prisma 自动生成类型，从数据库到前端组件，数据流转严丝合缝。

强大的 Markdown： 不止是文字，代码高亮、表格、自定义组件，甚至复杂的图表都能完美渲染。

项目规模与工具链

虽然是个人项目，但五脏俱全：15+ 个页面，30+ 个核心组件，10,000+ 行代码。 我们用 Git 管理版本，ESLint 9 规范代码，Sharp 处理图片资源。这一切，都是为了打造一个精品的 Web 应用。

Censi和Huey对这次合作的评价

感谢AI,感谢Gemini!!! PS:如果你不走寻常路，我们还留下了一个彩蛋