前端小白搭建博客的艰难历程

1 创建个人博客的初衷

(1) 偶然的机会入坑前端

大学的一次课程设计,偶然间接触到了web开发,第一次知道Html、css、js。

展示成果的时候,看到同学做的商业级别的前端项目,才发现自己只是刚触碰到前端的冰山一角而已,原来这个方向有这么多东西。

从这以后我便慢慢喜欢上了前端,可能小时候喜欢画画的原因吧,比起后端,能展示丰富内容的前端更能让我提起兴趣,虽然算法,数据结构,AI 也很有趣,不过我觉得前端更适合我一点哈哈。

(2) 学习了Vue

在2020这个寒假里,我根据同学的建议学习了前端框架Vue,之后网上冲浪看到了许多大佬做的博客,突然来了兴趣,又加之这个特殊寒假的原因待在家里,所以闲着也是闲着,做一个自己的专属博客有何不可?刚好将学到的知识应用到实际中。

2 选择了自行搭建

(1) 了解到许多方式

  1. 借助各种博客框架来搭建,比如jekyll,Hexo,Django,Vuepress等等
  2. 自行搭建,前端代码生成静态文件,甚至还有后端和数据库,然后部署到服务器
  3. 直接在CSDN、博客园、简书、知乎上发布,当然这不算是搭建了,应该算写博客

(2) 最终选择自行搭建

利用博客框架,可以省去开发环境的部署,逻辑代码的编写与测试,以及最后的服务器部署。因为你只要按照博客框架手册配置文件和参数就好了,页面样式也有许多现成的,这样就可以把注意力放在写作上了。我一开始也想这样,但是想想自己也是为了练练Vue,所以就暂时放弃了。

自行搭建需要先在本地部署开发环境,写好你的所有代码,自测没问题之后还要购买服务器、域名、备案,最后把你的程序、数据都部署上线运行无误就算是成功了。

我选择了自行搭建,虽然花费了许多时间,但是功夫不负有心人,部署环境,编写前后端代码,购买域名、服务器以及备案,这些令人头疼的问题最终都解决了。

3 建站历程

(1) version1.0.0

  • 最初的版本,也就是打算自行建站后的第一个目标

  • 当时是边学Vue边做的

  • 起初我把精力都放在了前端上,后端可以说完全没有认真思考过

  • 甚至我一度打算把博客的数据做成本地的静态文件,让前端读取展示(当时属实有点傻了,其实浏览器为了安全是不允许javascript主动读取文件的,况且别人在远端打开你的网站要如何得到你电脑上的数据呢哈哈哈?真的被自己傻到)

  • 当时设计的前端界面就是下面这个弔样

第一版

  • 在一系列沙雕操作后,我才了解到,应该认真的做一个后端,至少能实现数据的基本读取;另外,博客的数据虽然简单,但是为了方便存储和管理,那还是放在数据库里面好一点。

  • 其次,购买服务器是为了依托服务商的公网将自己的数据存储在那上面,同时备案,这样才能合法的让别人在公网上访问(内网穿透我也尝试过,但毕竟走的是别人的服务代理,所以数据安全和访问速度欠佳)

  • 2020年4、5月份这样吧,第一版算是大概完成了,代码自测没问题之后。就去买了阿里云服务器,之后照着教程鼓捣一遍,把代码放上去,环境弄好并且运行上。然后公网上直接用IP地址就可以访问。

  • 之后就是域名和备案,域名很快,就是备案等了15天。不过工信部通过的短信到的那一刻,立马就去打开浏览器输入域名。那叫一个开心哈哈(虽然打开很慢)。下图就是大概预览,因为服务早已关停,所以图片数据什么的都没有了,不过源代码依然保留着

  • 首页

1-1

  • 友链

1-2

  • 关于

1-3

然而这个版本存在着大量问题

  • 代码结构混乱,功能逻辑不清楚,耦合度太高
  • 代码的风格也不好,UI设计、用户体验更是没有认真考虑过
  • 没有做更多的优化,也没有考虑数据的安全
  • 部署是纯手工上传文件,手动启动服务的
  • 没有做后台CMS管理系统,手动上传文章,手动更改数据库数据......(现在看来真的是太......)
  • 服务器也没有基本的日志打印,出了问题都找不到
  • 源码乱放,没有依托任何诸如github的仓库管理。写了上次,下次就找不到了

(2) version2.0.0

  • 这个版本主要是改变了整体的UI样式,同时增加了评论的功能。
  • 不过遗憾的是2.0.0依然没有解决上一个版本遗留的问题
  • 虽然该版本尝试对功能逻辑、代码结构做过调整,但是第一版本的冗余、杂乱已然是很难挽回。(写一个高内聚低耦合的代码很重要,否则代码越多越难维护)
  • 之后楼主忙于学业和找工作,2020年7月份后只能停止网站维护,但是在那之前立下了一个flag:有朝一日要重构整个博客!
  • 下面是当时的预览图

2-1 2-2

问题

  • 依然是第一个版本遗留下来的所有问题

(3) version3.0.0

  • 就是您现在看到的版本
  • 11月份拿到自己的offer后,终于有了时间休息下来,回想起之前的flag,决定开始着手进行。
  • 然而也并非一帆风顺:之后的时间里,实习、毕业设计把人搞得头大,几乎没有时间重新编写
  • 时间来到2021年4、5月份左右,我进入到了公司实习,学到了很多东西,同时也有一些空余时间,所以开始着手写起了博客。

最终在6、7月份做完了基本的工作

  • 前端采用 Next.js + React的配套库 做一个服务端渲染
  • 后端采用 Koa + 自研ORM框架 + Mongodb,做了后台服务
  • 代码托管在了 github,并严格区分开发分支、测试分支、正式环境
  • 采用 github提供的webhook + Node.js 服务 + shell 脚本 + docker,做完全自动化的部署。只要在本地写好代码,git push 一下,服务器就会自动拉取代码部署环境并编译上线,然后只要等待片刻就可以输入网址看到最新效果了
  • 配合后端服务做了大量分类的 日志打印
  • 数据安全方面直接采用 https,并为主域名及其名下多个子域名都配套了 ssl 服务,同时后端也做了许多数据的检查。
  • 采用标准的代码风格,尽量低耦合的功能编写,以及一些优化
  • 做了 后台 CMS 管理系统,方便数据的管理

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~

  • 阿松大
    • 阿松大
      回复
      阿达
      wqe
    • 努力向前
      回复
      阿达
      感谢光临小站,以后会开发更多新的功能和网站主题!