博客建站记录及心得

tips: 博客终于搭建起来了！本次博客搭建大概用时10 + 天。

为什么做博客呢？

去年、前年、long long ago···

我就会利用一些时间去看别人的博客，他们把自己的人生经历，项目实践，学习笔记等都记录在博客上面，大到无上限（35岁程序员的看法，回顾自己的十年、二十年），小到“小初高”的学生党（分享中二故事、恋爱经历也是蛮有趣的o(￣▽￣)ゞ哈哈哈）。

去探索不同年龄段人的想法、生活状态、学习方法还有喜欢的东西，个人感觉这是一件比较有趣的事情，同时也是拓宽视野的一种方式。探索了各式各样的个人站之后，自己逐渐也会萌生出这样一个想法。

所以很早我就想做一个属于自己的博客了，一个自己想怎么设计就怎么设计的网站ps:虽然大部分做了可能只有自己看···。

这件事也是自己每次想做一个项目，首先想到的东西。我也不知道自己为什么这么执着，以前就因为喜欢听歌去做了好多音乐播放器还有视频相关的东西(￣_￣|||)。

虽然博客是相对简单的一个项目，但如果可以灵活运用它我相信肯定会对现在和未来的自己有不小的帮助。

个人博客站是一个分享信息的平台，同样也是一个展示个人能力的平台，可以锻炼自己的写作能力、表达能力、英语能力（为此特意去增加的国际化功能）等。另外，很多的大佬都有属于自己的平台，输出高质量文章的同时，也会去分享一些照片（如果喜欢拍照），开源项目，Demo合集等许多东西。

我认为这是一件非常有意思也是非常有意义的一件事情！所以我的博客也注定会诞生！

发些什么东西

对于文章而言，我认为大部分人还是比较爱看“故事”的，比如：对生活中的趣事与反思，还有复杂项目的实践记录与分析或者技术上的“奇技淫巧”邪修，当然也包括许多有深度的技术文章。

相反的一些常规的琐碎的技术笔记、文档总结等在我看来展示的意义并不是很大，反而使文章的归档看起来更臃肿且杂乱。

所以虽然现在建立了自己的博客网址，但对于一般的技术笔记、文档总结等，我个人还是习惯记录在类似语雀、飞书等在线文档工具上。 我还是想要将其区分开来，博客更多的是记录一些有趣的故事、项目实践等等。

除此之外，对于一些零零碎碎的短文或记录，类似朋友圈的东西，自己的想法是单独创建一个动态模块比较好。毕竟应该把长文和短文区分开来。

建站心得

作为自己第一个正式完整落地的项目，写一下自己的心得。

首先，个人认为就算是“清水煮白菜”，也算是端上来一盘完整的菜了。能有一个让别人看的东西出来了，还是蛮激动的。

之前经常会写一些demo，但无法称得上为真正意义上的项目，比如：GPlayer

虽然本次开发用时很短，但通过这次的博客项目，巩固了部分累计的知识与开发技巧，比如：Nuxt4 的实践，Docker 的使用，GitHub 项目管理等等。

其实这个博客我想称之为2.0版本，Why？因为1.0没做出来就跨了···（～￣▽￣～）。 最初的想法太过复杂，导致功能不断累加，反而很难收尾。

比如当时即想要有基本的博客功能，又想要音乐播放器（因为自己比较喜欢K-pop嘛）, 又想去用流媒体技术做一个可以播放live的视频播放器（以现在的服务器根本支撑不了）， 又在想我该怎么去做登录注册功能呢？怎么去处理评论呢？是不是应该有一个后台去管理呢？等等等等等等等等···

比如当时即想要有基本的博客功能，又想要音乐播放器（因为自己比较喜欢K-pop嘛）, 又想去用流媒体技术做一个可以播放live的视频播放器（以现在的服务器根本支撑不了）， 又在想我该怎么去做登录注册功能呢？怎么去处理评论呢？是不是应该有一个后台去管理呢？等等等等等等等等···

最后发现靠自己的空余时间是很难去完成一版出来的，思来想去，就直接放弃了1.0版本，重新规划了2.0版本。 采用"渐进式"开发，先把我所需的基本功能做出来，再慢慢去完善它。

真的是“既要又要”，“全屋定制”的能力又没有。还是先盖好我的“毛坯房吧”

最后发现靠自己的空余时间是很难去完成一版出来的，思来想去，就直接放弃了1.0版本，重新规划了2.0版本。 采用“渐进式”开发，先把我所需的基本功能做出来，再慢慢去完善它。

最后的思路是：首先构思网站所需要的功能，然后把它拆分成一个个小功能模块，最后逐一去实现它们。

• 首先，先使用Figma 画一个草图出来(目前不太熟练，只能画出基本布局等。)。
• 其次，基本的如：项目的主题色、辅色等，字体、图标的选择，主题的切换，当然还有国际化（I18n）等基础配置功能。
• 考虑到博客的大概所需要的模块如：Header、Footer还有Layout,依次去实现它们，如 Header → Footer → Layout → Home → Blog 等等。

  我选择依次去实现，当然根据以往的经验，我不再去把模块的功能想的多么复杂，先实现其基本功能，再慢慢进行扩展。

• 我把响应式布局放在了模块完成PC端之后的步骤去做，然后再每个模块一次去调整，一方面因为整体项目较简单需要做响应式处理的地方不多，另一方面是可以看到页面整体随分辨率不同而发生的整体变化。
• 最后再去做一些零碎的功能，如：SEO优化、图片优化、样式调整等（可以列出一份清单，像工作那样，将需求分出一个合理的优先级去做）。

介绍

基础架构

• 博客框架：Nuxt4
• 样式管理：TailwindCSS
• 部署方式：Docker
• 代码托管：GitHub

为什么是Nuxt?

巩固Nuxt知识，自己是Vue技术栈，对应的Nuxt是Vue的服务端(SSR)渲染框架，且目前Vue及Nuxt生态经过几年发展，已经相对成熟。

云/轻量级服务器

阿里云 99元/年 2核2G 40G SSD 最大宽带3Mbps。

ps:有条件还是建议买大一点的服务器，因为当我在服务器docker build过程中内存不够用，进程直接崩掉了，且网站访问速度和稳定性还是很重要的，导致我都是在自己电脑上去打包docker镜像，上传至阿里云，在到服务器去pull下来。

域名

使用的是阿里云的域名：guoxk.me。

使用me后缀 寓意为“我”的意思，即我的网站。

证书

使用的是阿里云个人免费证书，通过nginx配置实现https。

部署

• system ：centos7
• pm2 ：守护进程，防止程序崩溃
• docker ：容器化部署，方便管理和迁移,且
• nginx ：反向代理，处理请求和SSL证书

  关于node版本，我用的是v22.17.0LTS，Nuxt最新推荐版本为20 + lts版本，centos7本地最高只能到v16版本

下一步 Next Steps

• bug修复（目前存在一些小问题）
• [ ]小细节上的调整如：博客文章布局样式调整、文章预计阅读时长、文字统计等小细节方面、博客绑定音乐、扩展md的展示组件、动态模块等等。
• 添加RSS订阅功能。
• 添加一个功能，点击对应文字播放对应的鬼畜配音，比如意大利炮就播放李云龙意大利炮的声音，应该会是一个很有意思的功能<(▰˘◡˘▰)>。
• 使用GitHub Actions实现CI/CD自动化部署。
• 将普通音频改为流媒体(或许得等换一个更好的服务器再来实现，否则可能ffmpeg都跑不动···( ＿ ＿)ノ｜壁)。
• 博客搜索功能当然现在是没有必要的，文章数量还没有累计起来，未来可以考虑。
• 友链等等等等(一些可有可无的)···

未来 Future

当然要不断学习，比如：之后可能会学习了解一些图像渲染类的技术吧。

关于项目方面：下一步个项目，我计划去实现一个自己的vue-admin平台， 目前我把它命名为GTemplate-admin,未来可能会考虑出两个版本，另一个版本把它命名为：GAdmin（Guo's Admin）。

未来随着自己技术的提升和时间的积累，期待自己的博客慢慢完善起来，并且添加更多有趣的功能。