博客地址
http://www.trigold.tech/（2022 01 09 已升级为 restful 架构，前端：react v17, styled components, redux等，后端：express,multer等,数据库：mongodb,）
背景
关于我
西安邮电大学，大3的男学生。一名前端学习者。
项目练习
在理论性学完 html，css，javascript 之后，实际上和真实的开发之间还有一些差距。而这些差距的消除正需要我们不断的实践和复盘。
博客系统 是一个经典的开发主题。但是想要开发出一个精致和完善的博客系统对于水平一般的前端开发者来说还是比较有挑战性。
在技术栈的选型上，我选择了典型的 Restful 架构。前端的依赖项有 React(v17), Axios, Styled Components, React Router DOM(v6)，后端的依赖项有 Express，Multer, Mongosse 等。数据库选择了 Mongodb。
开发过程
服务器环境部署
在购买阿里云服务器之后，首先要做的事情就是部署服务器的环境。阿里云有官方的帮助文档，不过这里还是说明一下。
使用 ECS 服务器控制台中的 SSH 连接工具连接服务器之后，我们按照阿里云的官方文档键入：
wget https://nodejs.org/dist/v17.3.0/node-v17.3.0-linux-x64.tar.xz
这里采用的是最新的 nodejs 版本：17.3，nodejs 版本更新很快。
最后，键入 node 或 npm 来测试一下是否成功。
至此我们的服务器已经可以全局运行 javascript 程序。
Express 和 Pug
web 服务器的源代码在本地编写，编写完成后使用 xftp 应用上传到服务器，之后在服务器键入 node path/example.js 即可执行。
这里推荐在本地下载 xshell 和 xftp 的免费版本，以方便我们和服务器交互：https://www.xshell.com/zh/xshell/
本地编写 web 服务器的源代码，所使用的框架为 express，这里展示一下整个项目的结构。
其中，views 是用来放置实际的用户能看到的东西：视图模板。routes 则是处理用户不同的导航操作，对于不同的 url 做出反应。public 是用来存放公共资源的地方，这里我们放置了 css，js，以及关键的 markdown 文件，这些 markdown 文件就是我们本地写好的文章或者笔记。
路由，marked 和 highlightjs
在路由处理上，一开始打算处理 3 种路由：/ 首页，/note/xxx 笔记目录页，reading/xxx 文章或笔记阅读页。后面会增加 articles 文章目录页，/about 关于页等等。
这里的关键问题是怎么将 markdown 转换为 html 代码，这就要用到一个必不可少的库：marked。
将 marked 转为 html 代码之后，其中的程序部分，也就是 code 元素的内容如果不语法高亮显示，阅读体验会非常差。这里也要用到一个不可少的库：hightlightjs。
主题和跟随目录
在我们设计完主要的页面之后，对于博客系统来说，我觉得主题和跟随目录这两个功能非常重要。但同时也比较复杂。
对于主题功能来说，基本的亮色和暗色主题是必须要实现的。这里采用的是 body dark class 方案，这也是最基本的一种方案。
跟随目录也是比较关键的一个功能，试想一个页面的内容部分非常的长，用户该怎么在不同的章节导航呢？要做出目录跟随功能，我们首先做的事情就是生成一个目录，然后在用户每次滚动时获取到“current”目录，之后将生成目录中的当前目录凸显出来即可。
上线和 forever
上线
在我们开发好项目的源码之后，或是项目的源码达到“可以测试”的程度就可以上线了。这里我们要用到下载好的 xshell 和 xftp 应用。
forever
一切看起来都不错，直到你关掉连接阿里云服务器的窗口。当我们关掉连接窗口，那么运行的程序就会退出，也就是说 web 服务器被停止了。这当然是不合理的，web 服务器进程应该长期运行来监听用户们的浏览器请求。那么该怎么办呢？这就要用到进程管理器：forever 库。
总结和展望
总结
这个项目从构思到原型，从原型到能跑起来的原型，再从能跑起来的原型到看起来不错的原型，这些阶段都花费了很多的精力和时间。有时候由于一个疏忽，打错了字符，导致怎么也查不出来错误。有时候，在关闭十几个tab页之后，才找到一个报错的解决方案。有时候，你只能自己想办法解决。
坚持和对前端技术的热爱是关键的。其次还要适当地放松。
经过这个博客项目的初始构建，我发觉了一些以前用的少的知识点，比如：css !important 解决样式冲突，target.closest() 解决事件委托的bug 等等。当然主要还是巩固了自己的 html ,css 和 javascript 以及计网的知识。
但是本次的体验和以前的都是不同的，因为本次项目是一个真正线上部署的项目，这种体验促使从服务器和客户端联系上思考问题，而不是以前只关注客户端。还有，也带给了我架构上的宏观思维。
展望
这个基本的博客系统确实有些简陋，接下来的主要任务还是完善博客的功能：文章，评论，点赞。
回想在以前，前端开发者往往只能是前端开发者，但是 nodejs 的出现打破了这个规则。优秀的前端开发者同时也可以是优秀的后端开发者。nodejs 在正在带给前端开发者更大的可能。
阿里云是一个优秀的云服务提供者，物美价廉这个词确实非常适合，阿里云平台对用户和开发者的考虑很多，很多地方也体现出阿里云背后整个团队的努力以及他们的优秀的特质。希望阿里云将来有更多好的发展！
