Loading...
Loading...
- 最后编辑:2025/08/12 00:44:07 -
历时一个多月,我的个人网站终于上线啦!
在一切开始前,请让我先做个自我介绍:你好,我是Lumirant,这里是一个由我独立开发的个人网站。
这个网站断断续续的经历过很多次不同的技术选型和尝试,最终能以这样的姿态呈现给互联网,我个人认为还是非常满意的。
这次就以我的博客开发历程为话题,来谈谈它的前世今生吧!
关于个人网站和博客网站的开发,其实我很早就想做了,当时看了非常多优秀的开发者们的个人网站设计,感到十分惊讶和羡慕,也想着哪一天,也能拥有一个属于自己的空间,存放我的很多无处安放的想法和思绪。
我与网页设计的缘分起源于一次意外的尝试,我初中时偶然接触到了discuz这款非常优秀的论坛系统,并尝试将它部署到了一个刚注册的香港服务器上,当我第一次通过一个独属于自己的域名,访问到自己搭建的网站时,那种由心底里迸发出来的喜悦感和荣誉感,是任何时候都无法替代的,也就是从那时起,我爱上了编程、爱上了网页设计。那一天,我在我刚建成的网站上度过了将近五六个小时的时间,哪怕是走在路上,也在一刻不停的在脑海中回忆着它的各种功能。
后来,我通过Typecho这款优秀的博客系统,接触到了众多优秀的博客设计,同时也观摩了一下各位优秀的开发者们对于自己的个人网站的设计风格,令我非常的叹为观止。
后来的几年里,我又陆陆续续的接触过很多的成熟CMS、论坛系统等等。几乎是每认识到一个新的,我就会迫不及待的将它部署到自己的服务器上,然后探索个大半天。但最后总是因为各种原因而关闭,例如服务器到期没钱续费、数据库丢失等等,所以前前后后尝试过很多次,但最终都没能持续。
于是,在汲取了多次建站的经验后,我最终决定——自己做一个属于自己的、持续经营的个人网站!
这个想法说起来容易,但做起来十分困难,因为它不仅关系到我的技术问题,还有各种问题需要我克服,比如一个稳定且我能长期负担得起的服务器、一段连续的时间,以便我能持续的产出新的内容,以及一个不断能蹦出各种新鲜Idea的脑子等等,所以综合考虑多次后,我决定将这个计划放在我高考结束后,几个月的暑假加上大学四年的生活时光,适合我能够持续的维护我的网站,长期更新博客,不至于像之前的某几次经历一样,博客建好了,却找不到时间和点子来发新的博客。
而且这次,我不仅仅是要做一个博客网站,而是要完完整整的做一个前后端分离的CMS系统,除了博客之外,它还支持我后续扩展各种功能,比如在网站上线之初就已经决定好要做的实验室和随想功能。
因此,在高考结束后,我立刻就启动了这个积蓄已久的计划,在阅读了很多开发者分享的经验,以及一段时间的技术选型后,我最终选择使用Next.js为网站前端的主要技术栈,以Express.js作为后端框架,并使用了Postgresql这种数据类型较多的数据库来存储我的数据。
前端开发并不像我之前想象的这么困难,感谢AI,以及各种AI工具,它将我自认为比较耗时的前端设计流程简化了许多,也加速了网站的开发速度,不得不为AI点赞,尤其是我用到的那些模型和技术,例如豆包、DeepSeek、Claude、Trae等。
在前端开发中,我也学习到了很多现代前端开发中用的比较多的一些技术,比如我是用了Tailwind作为我的CSS框架,它原子化的设计理念真的为我减少了很多开发成本。我对这个框架的态度从一开始的完全不理解,到后来的逐渐接受,再到现在几乎每个涉及前端地方都会用到。我原先觉得这种依赖于Class名来编写CSS样式的做法与HTML的内嵌样式无异,除了会增加HTML代码的阅读成本和维护成本之外,几乎毫无亮点。但经过实际的开发实战后,我觉得这真的是一个很创新的理念,能够让我更快速的编写出自己想要的样式,减少我在HTML与CSS之间的周转,也许就像他们自己说的那样,能让我着眼于HTML的开发上,无需顾忌CSS样式 :)
Next.js也为我降低了不少的开发成本,很多特性当我第一次接触到时,都会感到十分的新奇和惊喜,加上我之前学过一点React基础,不得不说,Next.js确实是一个比较值得学习的一个前端框架,也许我之后不少的项目都会用到它。
另外,我还尝试了GSAP这种对我来说比较新奇的动画库模块,它为我提供了一种全新的动画设计方式,也让我对网页开发中的动画系统有了一个更全面的认知。GSAP成熟的动画系统也为我的开发过程减少了不少的麻烦。
顺带一提,GSAP的不少只能在客户端才能生效的特性,也迫使这个项目的耦合度下降了不少(笑
很快,有着这些成熟套件和工具的帮助,我便完成了前端部分第一阶段的开发,将我自认为的这个网站要达到上线标准所必须具备的功能,也就是最初的个人落地页、博客系统和自我介绍部分。
在完成这些工作后,我便迅速投入到了后端系统的开发中。
在经历了几个小时的研究后,我选择了Express.js这个老牌Node.js框架作为了我的后端框架,并使用Prisma ORM帮助我连接JavaScript和Postgresql。
由于我本身就有后端框架的项目经历,所以我对后端框架的理解程度还是比较高的,再加上Express框架本身足够轻量化、自由程度较高,可以实现各种设计模式,于是在我的经验帮助下,我很快就实现了一个简单的MVC框架原型,在实现了几个前端必要的接口后,就将它部署到了服务器上,与前端对接后,整个网站瞬间就活过来了!
当然,这个后端系统在设计之初就不是为了个人网站这一个项目而贴身制作的,我更想将它打造成一个成熟的中心化后端系统,后续能够支持更多我的其他的项目,所以凭借着Express框架“万物皆可中间件”的思想,我在开发这个后端框架时,加入了一些对于我来说比较具有创新性的设计理念,比如多层网关设计、灵活的路由解析等,它让这个系统更加的具有可扩展性和自定义性,变得不再专精于某个项目。
于是,在大约一个月的时间内,我就完成了一个简单的前CMS的前后端开发,并将它部署上线了。
然而紧接着,下一个问题就来了:如何管理我的文章呢?
这个问题在我开发之前是从来没有预料到的,因为这是一个自建网站,几乎所有的部分均由我完成设计,所以它并不像很多成熟的博客系统那样,有一套完整的前后台页面,能够很方便的管理文章,或是接入了一些编辑器工具,让它能够直接与网站的后端对接,一对一编辑文件。
所以,我该如何管理文章呢?我不可能每次要发布或者修改文章的时候,都打开数据库软件,连接我的数据库,然后手动将文章信息填进数据库里吧?这未免也太蠢了。
于是,我开始思考我该如何解决这个问题。
一开始的设想很简单,也很天真,就是直接做一个能与我的后端接口对接的md编辑器软件,这样,我写完文章后就可以一键将文章提交到数据库中,哪怕我对软件开发几乎一无所知,我也还有AI工具和类似Electron和React Native这样的技术可以帮助我完成这些过程,所以我一开始尝试了很久,想要完成这个软件,但很快我就放弃了,因为工程量确实有点大,而且实用价值很低……
于是,我转变了一下思想:我能不能也做一个后台系统来管理我的文章呢?
这个想法似乎更具有可行性,因为没人规定后台系统要具备哪些功能,我可以其他的什么都不做,就做一个文章管理的系统,实现一个简单的写作功能就可以了。
于是,说干就干,我使用了ShadcnUI这个B端风格的UI框架来完成前端的开发,而且感谢ShadcnUI完善的组件库和页面模板,我很快就搭建出了一个有模有样的后端页面。
但是,在开发实际的功能时,我又遇到了困难——我高估了自己的技术水平。
我在实际开发时,感觉这个系统真的很复杂,做来做去也做不到我满意的效果,也有很多地方天生的就只能设计的不太方便——比如在线写作,这些问题与我想要精简化的思想背道而驰,而且有点为了一碟醋而包了一盘饺子的感觉,这个后台系统的复杂度和开发成本已经快与网站前端相当了,这并不是我想看到的。
——好吧,说来说去,其实我就是懒了,不想耗那么久的时间做这个系统。
所以,我就又换了一种思路——也许我可以将前前两种方法结合起来?
这个想法诞生之后,我就如同贯通了任督二脉一般,迅速想出了很多解决方案。
我为什么一定要在网站上写作呢?能不能在本地使用成熟的编辑器工具写完之后,直接把文件通过一个后台系统上传到服务器呢?或者借助一些自动化工具,例如Github Action等,实现自动化的文章发布流程呢?
尽管后面一个想法被我以速度和安全性的理由淘汰了,但前一个想法似乎完全可行,他无论是从开发成本还是安全性等多个方面,都能满足我的需求。
于是,又经过几天之后,一个简单的文章管理系统也完成了!它并不具备在线写作的功能,只能简单的编辑文章的信息。至于内容,则需要手动上传md文件,然后网站会自动读取文件内容,最后上传到后端接口中,这就实现了开发成本与使用体验的平衡,也完美解决了所有的痛点!
于是,在经历了漫长的开发过程后,一个初步的CMS系统,正式上线了。
Of course,这个网站目前为止并不完善,它只是一个最小可行方案,还有非常多的功能我还没实现,这些就得留到我以后慢慢进行维护啦!
关于后续一些功能的开发进度和想法,我也会不定时的在我的各个社媒账号中更新,也会在个人网站中同步分享,如果你有兴趣,欢迎经常来我的个人网站看看~
后续,我也会不定期的更新博客,分享我在各个方面的见解,比如生活、学习、兴趣爱好等等。日后,我也会不断的扩展这个网站的边界,将它打造成一个Playground,也是我在互联网数据流中的一个家。
如果你想和我探讨一些技术问题,或者分享你的读后感,又或者只是单纯的想和我交朋友,欢迎通过网站最下方和“关于我”页面中提到的联系方式来与我取得联系(社媒账号需要备注来意,谢谢~),我非常乐意与志同道合的人交流!
That's all, thanks for your reading!