利用零碎时间个人建站

缘由

在某一天下班的地铁上，我用手机浏览掘金时，看到了一篇文章《用零碎时间个人建站》，这篇文章分享了自己个人建站的经历和经验，看似很简单的一篇文章却深深触动了我。

我曾经因为高考发挥失利考上了一所民办本科，虽然我对于代码非常有兴趣，但不断的自我否定和怀疑、自卑敏感的性格让我堕落了好几年。

期间我在“努力”和“摆烂”中不断纠结，产生过最多的一个想法就是：“我想写一个自己的个人网站”，可能是为了满足我可怜的虚荣心、成就感，可能是为了逃离堕落的泥沼。这个想法实行过无数次，都半途而废停留在“新建文件夹”阶段，一直持续到我看到这篇文章为止。

这个时候的我虽然只做了一年的前端开发，但刚刚结婚，拥有一个善解人意的妻子、稳定的生活和工作，沉寂已久的想法再一次进入我的脑海：“我现在比以前更优秀，为什么不试试呢？我真的愿意接受半途而废无数次失败后的自己吗？”

于是我抱着我仅有的一点儿前端技术，开始了我的建站之路。

注：本文出于致敬，格式和风格均参考《用零碎时间个人建站》这篇文章，感谢作者Story的分享，让我迈出了完成梦想的第一步。

部分展示

我对于网站的开发思路是极简、易用性和流畅性。

极简是我喜欢的风格，只放有意义的元素，不做过多无用且花哨的样式。

易用性是“网站用起来很简单”，按钮直观、逻辑通畅、交互明显。

流畅性是我想利用Angular的动画特性，为网站的元素和样式添加更好的视觉效果。

首页

完全的极简风格，我的首页准确来说是一个集成了个人信息、导航、联系方式的起始页。

将最重要的按钮放在页面居中的位置，言简意赅。

文章模块

展示博客的地方，样式其实我并不是特别满意……但是暂时还未想到改进的思路，借鉴了知乎+掘金两个我很喜欢的社区的样式风格。

点滴模块

该模块是我老婆强烈要求添加的功能，用于展示我和我老婆的生活点滴，也就是秀恩爱的地方吧XD。

使用了一个充满色彩和圆润样式的时间轴，使得风格不会和其他模块一样过于严肃和正式。

后台管理系统

一个个人网站当然需要一个后台管理系统了！因为我实际日常的工作就是开发ERP，所以一个后台管理系统的开发非常得心应手，我也非常清楚自己需要什么。

建站历程

我在产生想法之后的第二天，在掘金发布了一篇文章《我又又又一次开始规划搭建个人博客网站了》，用于记录我开发这个网站的心路历程和经历，感兴趣的话可以翻阅。

当时在评论区收到了非常多朋友的建议和鼓励，真是非常感谢！

建站历程时间表

日期	事件	描述
2023年4月24日	产生想法，开始规划	我先自己画了一个思维导图，初步设计了个人网站的功能。用Angular创建了一个新项目设计了一下静态网页和样式。
2023年10月	进入我人生中最忙碌的一段时期	买房+装修+入住后+结婚后的各种事宜让我忙的焦头烂额，只能放下手里的开发工作，专注于家庭。期间会用零碎时间翻阅NestJS文档和视频进行学习。
2024年5月5日	前端开发	我老婆给我买了MacBook Pro，于是我重新创建了一个最新版本的Angular项目开始正式进入开发阶段，将项目开发环境从“公司的旧电脑”挪到了自己的个人电脑上
2024年7月29日	后端开发	得益于前期NestJS文档和视频打下的坚实基础、功能并不复杂、前期想法的完善等因素，后端开发基本是很顺利的，虽然也踩坑不少
2024年10月10日	云服务器部署	网站在经历了长达三天的踩坑和折腾后，终于部署在了服务器上，那一刻的成就感真的很爆炸
2024年10月17日	域名备案	备案过程很顺利，网上资料说要一个月，我只花了三天
至今	完善和维护	针对网站现有的功能和样式进一步优化，并慢慢发布正式数据

我哪里来的时间开发

下班在家的时候用mac零碎写一些

出去旅游的时候带上mac，在飞机上、车上规划开发思路和计划

上班提高工作效率，工作完成后利用虚拟机摸鱼开发

空闲时候就会对网站的样式、功能开发进行思考并记录

养成每天开发和思考的习惯，避免长时间的空窗导致开发思路中断

功能介绍

我是一个非常喜欢记录的人，日记、博客、照片、消费记账等等，同时我也是一个非常喜欢分享的人。

所以你应该知道这个网站的功能了：记录并分享。

现有的功能

目前网站除了首页外只有三个模块：文章、点滴、关于，分别对应发布博客、秀恩爱、自我和网站介绍

文章：记录自己遇到的开发问题和流程，不仅能帮助未来遇到相同问题的自己，还有可能帮助到其他陌生人。

点滴：我和我老婆的经历令很多人羡慕，许多朋友都喜欢磕，同样我也喜欢秀恩爱，因为很幸福所以才会分享幸福。

规划的功能

目前网站的正式数据还在进一步补充中，博客和点滴都是只是发布了一部分用于展示。

除了完善网站的功能设计例如全局搜索、网页性能相关的东西，我还打算开发旅行、游戏模块。

其中旅行是我自己的旅行日记、可以用于记录照片、见闻、心情等等，还可以作为攻略参考。

其中游戏是打算撰写游戏攻略和游戏测评之类的东西，原因很简单，就是我喜欢写这些东西，没有人看也喜欢。

注：我的主站其实也有做一个TODO LIST

做这些有什么意义？

做自己喜欢的事情就是有意义的，人生苦短，及时行乐，如果做一件事能感受到开心那就马上去做。

就像这篇文章发布出去可能完全没人看，那也没有关系，在写文章的时候我不断的回忆起开发期间解决的一个个问题和BUG，以及解决问题、成功运行后的成就感，这些有意义的快乐回忆早已占满了这篇文章。

我是开心的，我也希望我是开心的。

聊聊技术

技术栈

前端

名称	类别	描述
框架	Angular	我最擅长的框架和语言，无需多言
组件库	ng-zorro	我使用最多的组件库，因为内置许多很方便的组件例如flex布局、tag标签、upload上传等，为了方便开发一并导入（只导入自己需要的）
markdown	ngx-markdown	Angular所支持的md库非常非常少，我选用了一款兼容性最好的，虽然并不成熟但功能和样式都可以自己手搓，毕竟稳定才是王道。

后端

名称	类别	描述
框架	NestJS	语言和Angular非常相似，且和SpringBoot也有一定相似性，我曾在大学实习的时候学习过JAVA和SpringBoot，理解会很简单
数据库	mysql	无需多言

安全措施

因为是个人建站，我非常担心网站的安全性问题，所以我采用了以下几种方式来尽可能的保证网站安全：

使用宝塔Linux面板，增量备份网站、定时备份数据库

后端严格限制跨域

例如我只允许主站进行get和post操作，只有后台可以进行put和delete操作，如图所示

当我更新网站正式区的时候，会注释掉本地服务器地址，保证只有主站和接口可以访问。

后台系统配置路由守卫和口令

防止他人误入进行数据操作，口令则是存放在服务器数据库中

主站和接口配置SSL证书

使主站和接口使用https进行数据传输，更安全

云服务器

阿里云ECS

选用的新用户优惠，99元一年的最普通的一种，后期续费也是99元

速度略微慢了一些，但是我做了图片压缩处理后就没有问题了，后期打算为项目添加Angular的SSR和水合特性，相信加载速度不会很慢。

域名

因为我目前有三个项目：主站、后台、后端接口。

所以我购买了两个域名：flowersink.com和flowersink.cn

前者已经通过工商局和公安联网双备案，作为主站域名，后者则是给后端接口专用。

两个域名都已部署SSL证书，使用的是阿里云的个人测试证书（申请了两个，一个90天一换，一个一年一换）

后台系统则部署在公网IP的某个端口上。

资源

域名：flowersink.com，欢迎访问 手机端在发布文章后第二天开发完成，双端均可访问

主站源代码地址：花墨，主站的代码是开源的，后端和后台因为安全性则不公开。

请不要嫌弃我代码写的有点烂，我还没有去优化和整合代码格式

关于网站，你有任何建议和想法欢迎评论区留言，也可以在主站找到联系方式交流探讨。

我实际上没有任何技术方面的朋友，一直是一个人埋头苦搞，还挺想认识一些同好的。

如果你对于个人建站也有兴趣和疑问，我也会尽我所能给你解答。

如果有人想要我这样从0建站的教程，也可以评论区留言（人多就写）

最后

距离我第一次产生想法和开发网站，已经过去一年半了。

看着自己的github绿块从曾经的稀疏几个，到现在密密麻麻，真的很有成就感。

在这期间我从一个刚结婚的毛头小子，成长为了一个自认为还算稳重和成熟的一家之主。

也从一个前端小B，成长为了一个对于Angular掌握足够熟练，对于后端数据库服务器都有进一步了解，有独立完成从0项目经验的前端开发。

就像我的网站一样，从最开始粗糙、难看的样式慢慢打磨成我现在所以喜欢的样子。

个人建站这件事或许对于很多人来说并不难，很简单，但当我完成之后，我才明白这也许就是成长和进步的意义。

感谢曾经所有鼓励和支持我的人、在我开发期间絮絮叨叨听我分享的朋友、以及看到这里的你。

且将新火试新茶。诗酒趁年华

以上。

最后一次更新

11月22日，在老婆大人的参与和设计下，重写并更新了2.0版本，网站现在拥有更好的交互设计，主次分明，也拥有了更好的性能优化和项目结构。

2.0版本源码：花墨2.0 2.0主站网址：花墨

建站历程：

• 2024年10月10日

  项目第一次在云服务器ECS上部署

• 2024年10月17日

  域名通过工商局备案

• 2024年10月21日

  域名通过公安联网备案

• 2024年11月06日

  花墨正式进入运营

• 2024年11月13日

  花墨2.0立项

• 2024年11月21日

  花墨2.0完成开发并上线