用零碎时间个人建站

一、缘由

去年2022年年终总结的时候，我突然有一个很后怕的想法，这一年下来除了写了17篇博客之外我什么都没有留下。这意味着我所做的所有的事情除了自己的工资收入，没有能够留存更加久远的东西。所以这一年，我要留下一些东西，比如个人建站。在2021年的时候我也做过一个，不过当时的UI比较丑，而且也没有后端代码，和后台管理。我就托管在了giteepage上，现在还是可以访问的，当时还集成了很多东西，但是无奈一直没有好好维护。

个人建站并不难，但是可以涉及到前端到后端业务开发、云服务器、数据库表设计、域名购买、部署上线等环节。这些环节在工作中不一定可以都体验得到，因此还是有尝试和学习的价值的。所以我决定哪怕会费些时间，还是应该做一做，话不多说，一起来看看吧！

二、部分展示

1. 首页 — 遵循极简主义（能不要的尽量不要）

2. 文章 — 下拉列表

3. 读书 — 读书很重要

4. 管理 — 怎么能没有管理平台呢！后期争取不用掘金的编辑器。

三、建站历程

四、功能介绍

1. 记录文章

文章有三种，分别是技术博客、读书笔记、生活随笔；后续也可以扩充其他的类型，类型是一张独立的表，支持扩展。目的是为了在上面记录自己的文章，等到年终的时候，或许可以拿出来看看，比自己空空的干想要方便的多。当然掘金也是可以的看到自己文章的汇总，但是掘金上大多都是自己的写的技术博客，所以其他文章类型的管理就不太方便了，因为自己有这样的诉求，所以做这样一个分类。

记录文章是在后台进行新增，然后在前台进行阅览。编辑的格式采用markdown语法，风格和github识别的风格保持一致。

2. 目标管理

目标的周期是一年的，可以在一年当中任意时间随意增添目标。一个目标有自己的指标，比如我一年完成10篇技术博客，指标就是10，那么每完成一篇博客指标就+1，并通过图展示出来，那么每天看看这个目标心中就会有一定的动力。这是为了激励自己好好完成目标，而不是定了一个目标，在完成的过程轻易放弃，导致自己年终草草了事，甚至自己都忘记过指定过这样的目标。

3. 每日总结

其实每日的总结我认为很重要，我发现在年终总结的时候，我往往在脑子里面回想，但是记忆力是有限的，我们只能记得印象最为深刻的那么几件事情，所以会有这一年一事无成的感觉，因此我认为如果把每一天通过数据的形式呈现出来，可能会有更客观的总结。对自己也会有更为清晰的认识。

基于上面的认识，我计划将每日总结也做一个统计，每天晚上回到家，把自己做的事情梳理一下，在平台上记录一天的状态、目标完成情况、是否有心流等。

高三那一年，我意识到我可能会一直很平凡，但能不能有一件事情，我一直坚持，哪怕是一件小事呢！于是我开始记日记了，现在写到第七个本子了。中间因为一些事情断断续续有断过，也不是每一天都会去记，但是直到现在这个习惯依然都在。

所以在今后，我也可以把每日日记移到平台上来做。

4. 关于成就值

如何评判自己的每一天是否是虚度呢！我可以定义一个指标，这个指标叫做成就值，它代表我这一天当中取得了什么样的成就，如果这个值很低，就意味着我这一天碌碌无为，如果很高则代表我当天取得了一定的成就，这样长此以往统计下去，可以尽可能的知道一年当中我的成就如何。

我目前想到的是跟几个要素有关：

所以最终的计算公式应该是：

成就值 =  状态*0.3 + 目标*0.5 + 日记*0.1 + 心流*0.1 

成就值越高则颜色越深，越低则颜色越浅，体现在目标日历中，如下图所示：

通过这样的方式在年终时拿着数据做支撑，我认为好过一篇空空的感想，当然这仅对我自己而言哈。

五、谈技术

1. 技术栈

技术在建设平台的过程中并没有特别难的部分，不过我分享一下技术栈，方便一起交流！

前端

后端

云服务器

阿里云ECS ，因为节省计划，现在还在试用一个月当中，不过后期应该会买这种服务器的。

域名

域名选了一个 new-story.com.cn，在阿里云平台上购买的，不过最近在搞备案，还没审核通过。

2. 踩坑

在用阿里云服务器的过程中，在服务器安装好nginx之后，启动了nginx，也就是服务器已经有一个80端口开启了一个web服务。但是因为是云服务器，所以要在阿里云上开放这个服务器的端口。否则外部不能访问这个端口。

那么如何开启这个端口呢！就要配置阿里云的安全组。

安全组是一个端口的开放配置，刚开始要创建一个安全组，阿里云默认会开放22端口。但是像80以及其他端口要配置好之后才可以。

配置好之后，还要将该安全组添加到云服务器实例上，只有这样才能生效。我刚开始配置了，但是每天加，耽搁了好半天才找到原因！

如果有遇到类似问题的同学，欢迎一起沟通交流！

六、总结

1.产品意识

前端难道真的只是写页面的么，还原UI和交互就可以了！这样想的确好像价值没有那么大，但今天我想我们可以去试着从产品的角度去做前端相关的工作。个人建站的过程中，最让我感到费劲不是业务的实现，而是这个页面应该怎样设计、我到底需要什么样的功能、要做成什么样子、该如何规划时间、如何推进进度等等！这个过程虽然难受，因为不是自己熟悉的领域，可能我已经比较用心了，但是做出来的东西依旧很垃圾，但是我不觉得这个过程丝毫没有意义。通过这个过程，我更加理解了产品是怎么想的，可能会对之后的沟通交流有帮助。

2.时间管理

用零碎的时间写个人项目的确比较难，公司比较卷，9点下班洗漱后只能写个把小时，我又不喜欢熬夜，所以完成的速度还是比较慢的。所以有的时候我就只能抽在公司的时候，吃完午饭后有半个小时到1个小时空窗期写写代码！整个过程的确没有怎么浪费时间。我就发现其实零碎的时间其实特别的重要！

如果有10分钟时间，我就不会写代码，而是思考原型、UI等；只有时间超过1个小时才动手写代码，这样可以充分利用时间。

3.作品

之前看过阮一峰老师的博客，里面提到一个观点很影响我，那就是我们的工作其实就是在雕琢我们自己的作品，一个有价值的人，有作品的人是不愁没有好的岗位的。所以我在想，我们工作中也应该好好思考一下是否应该好好打造一个个人的作品来证明自己的实力，而不是在面试时才想着怎么去吹牛逼。这个个人网站算是一个开始吧，当然现在还很简单，甚至不能称之为一个作品，不过之后会一直维护，我还有很多想法可以集成在这个网站里面。

七、资源

域名访问： new-story.com.cn/story

关于个人建站有任何问题欢迎评论区留言，探讨！

八、维护

这两天收获了很多优化建议，感谢每一位倔友大佬们的阅读和评论，中午抽空记录一下，接下来安排时间解决，包括但不限于以下几点：

1.首屏图片太大，导致首页很久才会出来。
2.目标tab栏时在手机端的适配有问题。
3.点赞功能的实现不好，点赞会请求整个文章数据，没有必要。
4.清空测试脏数据。
5.打包的js产物中有大于1M的资源，细化打包粒度。
6.服务器配置会考虑更换更好的。

九、备注

更新于：3月1日 — 这两天在迁移服务器，所以IP也暂时不能访问，万分抱歉。

更新于：3月3日 — 域名可访问：new-story.com.cn/

更新于：3月4日

成本汇总：

更新于 3月8日

new-story.com.cn 这个域名太长了，不利于记忆和传播，我看new-story.cn没有注册，立马下手了；
现由原来的new-story.com.cn迁移到new-story.cn 原域名访问依然生效

更新于 3月11日

我看评论区很多掘友都有自己的网站，我一一点开看了一下，果然很多优质的网站，优质的网站确实应该值得被传播和尊重，特将评论区优质的网站整理在这里供大家学习参考！