我为什么做了这个网站 ✦

说实话 我一开始也没有想得特别远

可能是想着以后简历里能多一个自己做过的项目 也可能就是那段时间刚好有点空 想找点事情折腾 平时我本来就会弄服务器 改代码 查各种问题 那干脆自己做个站 顺便把这些东西放进去

最开始的想法很简单 能打开 能写文章 之后想起来什么再慢慢补

先把站跑起来

一开始先弄的是服务器 装环境 跑 Docker 配数据库 再把前后端放起来 过程中经常会遇到一些很小但很烦的问题 比如页面能打开 但是登录不行 文章能显示 图片却出不来 改了配置 重新构建以后才发现好像改错地方了

后来前端用了 Nuxt 后台用了 Strapi 数据放在 PostgreSQL 前面再用 Nginx 转一下请求 这里面每个东西我都不是一开始就完全熟悉 很多时候就是遇到什么问题 再去查对应的文档

我觉得这样做的好处是 文章不用写死在页面里 以后想改标题 封面或者正文 直接去后台改就行 不用每次都改代码再重新发一遍

中间总会有点问题

当然 实际做的时候没有想象中顺利

登录态就折腾过一段时间 浏览器里的 Cookie 后端接口需要的认证信息 还有中间的转发 任何一个地方没接上 点赞和收藏都会提示未登录 当时看着按钮没什么问题 最后查下来其实是请求里的认证信息没有正确传过去

头像上传也遇到过 Forbidden 后台权限看着已经开了 但请求还是失败 只能再去看上传接口 代理路径和容器里到底加载了哪份配置

这些事情单独看都不算难 麻烦的是它们经常一起出现 改完一个地方 要重新构建 再看日志 再打开页面确认 有时候以为已经好了 刷新以后又发现还有另一个问题

代码高亮这件小事

代码高亮也是后来慢慢补的

我用了 Shiki 一开始只是想让代码看起来舒服一点 真正接进去以后才发现 浅色模式和夜间模式要分别处理 代码背景不能太亮 复制按钮也要真的能复制干净 手机上还不能让长代码把页面撑坏

排查文章有没有正常显示时 我一般会先看接口有没有拿到正文 再去看页面

async function checkArticle(slug: string) {
  // 先确认接口有没有返回文章
  const response = await $fetch.raw(
    `/api/articles?filters[slug][$eq]=${encodeURIComponent(slug)}`,
    { ignoreResponseError: true },
  );

  if (response.status !== 200) {
    throw new Error(`文章接口异常：${response.status}`);
  }

  const article = response._data?.data?.[0];
  if (!article?.content) {
    throw new Error('文章还没发布，或者正文为空');
  }

  return article;
}

现在代码块至少可以正常看了 夜间模式也比之前舒服一些 后面如果还要继续改 应该还是一些细节问题 不会一下子全部推倒重来

还会继续改

这个站目前还没有完全做完 文章 搜索 登录 评论 喜欢和收藏这些基本功能已经有了 域名和 HTTPS 也在准备 以后可能会继续放一些项目记录 也可能写点游戏相关的东西 具体还没定

我也没打算把它做成一个特别正式的产品 先把自己想用的部分做好 遇到问题就解决 想到什么就记下来 以后回头看 至少能知道这个站是怎么从一台空服务器慢慢变成现在这个样子的