网站版本更新

从今年一月“立项”开始，我写的这个小破网站已经更新到了1.0.5版本了。（其实前面的版本号都是乱标的）
不知不觉已经过去三个月了，时间过得真快，网站从二月份发布的一个版本1.0.0只有最简单的博文浏览功能，到现在Galgame功能的添加，离预想中的又近了一步。

最初的想法

最开始，我只是想用Python写点东西，但是又一直苦于没有什么东西可以写的，太难的又写不来简单的又没意思。正好也在写博客，于是就使用Python自己搭一个网站吧，于是这个网站最初的构想就开始了。
既然确定了要用Python来写，那还有什么其他的要求呢，首先第一点，要足够高级，既然要写，就要写最好的。说到要足够高级，那么就需要请出Python中的大红人django了，功能一应俱全，生态丰富。但是只有一个django貌似也并没有多高级，得上前后端分离。
那么确定了后端，前端该用什么呢，在vue和react中我选择了后者，因为感觉就很高级，而且生态也很丰富。什么你说Angular？Angular是谁，真不熟。（其实还犹豫过Astro的，只不过他貌似比较适合静态页面，就没有考虑了，虽然他也是可以集成React的）后面了解到了Next.js这个React框架，这个东西是真的高级，当时也算是给了我不小的震撼。一个手搓HTML的原始人发现了这个东西，简直就像是发现了一个新大陆。

功能

在我的构想里面，这个网站需要集成很多功能，所以严格意义上来说并不算是一个单纯的博客，博客只是他所附带的一个功能。未来可能还会有更多功能会添加到这里面来（如果我有时间并且还愿意继续更新的话），可能最后会成为一个大缝合怪？

设计思路

因为水平实在有限，并且审美又只有那么点，这里看看图一乐就好了。如果以后有时间的话说不定会重写一遍这个网站，现在看这个网站越看越丑了...
顺带一提，网站使用的字体是霞鹜文楷和maple，感谢作者提供的免费字体。（同时，我的VSCode里也是这两个字体混搭）

blog

博客是我网站的第一个功能，也是最早设计的一个页面。设计这个页面的思路就是一个词“图片”。 没错这个页面重点强调的元素就是图片，其他的东西怎么样都无所谓，只要图片又大又清晰就可以了，所以甚至还有个鼠标悬停放大的功能。
这样想想，只要打开这个页面就可以看到整整一页的软萌可爱的妹子，整整齐齐排成两列等你去“翻牌子”，光想想就很美好。
至于内容页嘛，并没有什么装饰，主要这个部分的主体应该是内容，而不是形形色色的装饰，如果只是单纯展示装饰的话那这个博客也就失去了原本的意义了。

page

这个页面本来是用来放一些固定页面的，但是没什么时间写，所以把原来计划放在这里的内容丢到博客页面去了。
说下设计思路吧，首先这里是存放一些长期更新内容的，比如说学习笔记之类的东西。我的计划就是把他设计成类似于抽屉的样式，一行只有一个条目，同时装饰要尽量的少。整体的感觉像是古时用的竹简。

Galgame

至于这个页面嘛，就放飞自我了。
首先这个页面本来计划是在愚人节前就做完的，（现在我写这篇文章已经是四月二了，还是只有一个框架）点开这个页面之后就会弹出一个模态框（小萝莉验证），这个组件本来的名字还是AprilFoolConfirm来着，忘记了。你可以去看看源码，本来想写一个永远都追不上的按钮的，结果突然想起来还有触屏用户这个群体...
设计思路嘛，之前也想做成卡片式的，可以展示游戏图片和相关信息，点击可以展开更多内容。但是这样的话就与博客页面重复了，因为我还是会接入VNDB（视觉小说数据库），并且给每个条目打分的，有什么东西适合用来突出对比呢，而且还是可以自定义方式的...头上那个并不存在的灯泡突然一闪，这不就是Excel嘛，于是这个页面就变成了表格的样子。
但是我个人不是很喜欢，我想的话，还有一个新的设计思路，但是以我现在的水平肯定写不出来。把这个页面做成探索式的，整个页面可以无限拖动，可以自由的翻找想看的游戏。

高可用

本来我还是想自托管整个网站的，但是无可奈何网络不给力，特别是谷歌字体，导致我的docker镜像经常构建失败，重试了N次之后决定托管到Vercel。后端的话则是我自己部署，数据库每天自动备份，并且上传到对象存储。
因为之前一个小问题，我的网站宕机了差不多十几个小时，睡了一觉起来才修好。具体是什么问题呢，那天我照常更新我的后端，把他打包成docker镜像上传到服务器，本来是一切正常的，但是回到网站上一看，所有东西都没有了。没错，我本地调代码的时候图方便把一些代码注释掉了，导致他一直连不上PG数据库，然后又稀里糊涂的改服务器上的环境文件（为了安全，我的开发环境的变量和生产环境的不同），没错又把数据库那部分注释掉了，然后我本地怎么做都是可以脸上PG数据库的但是部署到服务器上就是不行。第二天才想起来可能是环境变量的问题。
所以现在还是挺关心网站的可用性问题的，之前还花了一个下午把网站改了个edge运行时的版本，部署到cloudflare page上（然后现在又有个cloudflare woker的版本），cf会爆炸的概率可比我单抽出金的概率还低。非酋凝视。yysy，cf的算力真的猛，从Vercel迁移到cf的worker之后网站的响应速度至少提升了一倍（严谨点，应该说响应时间变成了原来的一半）。感觉不出来？可以换个好点的网络再试试。
要说最害怕的东西的话，那肯定是数据库了，万一数据库爆炸了，那我之前写的东西可就全都没了。所以我打算是把数据库迁移到Neon，每月0.5G的免费额度已经很够用了。因为我也不需要频繁的操作数据库，而且一次的请求可能连1KB都用不了（大概吧，我也不是很不清楚）。然后还可以配个redis，嗯，靠谱。
后端的话，打算用上我买的所有的服务器，组一个k8s集群，之前没事干就喜欢收集各家的云服务器，现在总算是能有点用了，只不过分布式的各种问题这一块是真的头大。不过服务器的性能的话...说不定打一下死一群。毕竟都是图便宜买的嘛，要求不能这么高。

未来

未来的话可能会全部迁移到cf上（如果那个时候还更新的话），现在主域名已经是由cf的worker提供的计算服务了，因为感觉cf的速度很快，所以直接让cf来干这活。也是因为Vercel开不起Pro版，只能用0.6核的计算服务吧，迁移到worker上之后感觉是真的快。而且，我的图片，对象存储这些也全在cf上，让cf自己内部访问肯定速度是最快的。
不过，如果你了解serverless的话应该知道，这个函数计算是有冷启动时间的，也就是说刚开始的时候很慢，要用一会才会快起来。虽然cf宣称自己的启动时间很短，在TCP建立链接之前就可以启动完成，但是体验了一圈，还是需要一点时间的，并没有他说的那么夸张。
既然要全部迁移到cf上，那后端怎么办呢，worker又跑不了python（cf worker的python并不是常用的CPython，而是Pyodide）。其实我有点想放弃Django了，Django确实很好用，也很有Python的风格－用最少的代码干最多的事。你可以去看看我的后端代码，其实也没写多少，像数据库这些都是Django接管的，我只管实现接口和逻辑就好了，体验真的很棒。
但是，因为我都前后端是同时进行的，写前端的时候确定需要的数据，然后再返回后端实现提供这些数据的接口，写完了再回去写下一个功能。因为语言不一样，所以体验很割裂，特别Python还是这样一种风格化很强的语言，有时候写着写着TypeScript就变成PyScript了...不过正是因为Python独特的语法风格，我才会对他感兴趣，顺带一提，我最喜欢的编程语言就是Python了。
如果真的要迁移的话可能会变成Next.js写全栈，数据库的话还是用neon这个serverless的PG数据库。
不过这些都是后话了，至少再可见的未来都是Next.js+Django这个组合。

碎碎念

这段时间再干嘛，为什么不更新文章？
最近都在忙网站的事，连Rust都没写，不信你去看看我的github的提交记录。
至于文章的话争取一周至少一更吧。
具体在更新些什么呢？
本来想着在愚人节之前吧Galgame功能肝出来的，结果如你所见－完美错过了...
到是还重构了之前写的史山，并且加了一些你感觉不出来的功能。
还吧github上的issue修了，这么个小东西修了一个晚上...
下面是修复过程，如果不懂react的话直接无视吧。
我的avatar代码如下：

import Image from "next/image";

import LoginButton from "./login-button";
import NavAvatarLink from "./avatar-link";

import { getSession } from "@/lib/auth";

export default async function NavAvatar() {
  const session = await getSession();
  const defaultAvatar = "/default-avatar.png";

  if (!session) return <LoginButton />;

  return (
    <NavAvatarLink>
      <Image
        alt={`${session.name}'s avatar`}
        className="rounded-full"
        height={"40"}
        src={session.avatar_url ? session.avatar_url : defaultAvatar}
        width={"40"}
      />
    </NavAvatarLink>
  );
}

这份代码看着有什么问题嘛，看着很对吧，获取当前的session，如果没有就返回一个登按钮，有的话就显示头像。
但是，这样写是不对的，因为没有外部的干扰，这个组件一旦挂载上就不会再更新了，也就是说getSession这个函数也就不会再被调用了，整个组件也就不知道你更新了session。这样一来你登陆之后，因为这个组件并不知道数据已经更新了，所以显示的还是一个登陆按钮。
这个特性明明是刚开始学react就学了的，结果现在还被耍的团团转，真是太丢人了。
如果想让这个组件自己更新该怎么做呢，可以传个参数给他，如果参数发生变化那么这整个组件也会跟着变化。或者用context，连带着一起更新。
当然也可以想我一样，用react query向服务器发起查询，暴力同步状态。不过，react query开销有点大了，因为部署在worker上，每次响应都是要计费的。
下次去优化一下吧。