抓瞎摸索：网站框架要用什么硬撑起来
一个游戏官网，听起来挺唬人，但说白了，就是把一堆图文资料整整齐齐地摆但问题来了，我得找个趁手的工具先把这“骨架”搭起来。
我这回没走老路，以前的项目我都是拿Vue来糊弄一下。但这回想试试新东西，就一头扎进了那个叫的框架里。为啥选它？图个新鲜，也图它生成静态页面据说速度快。结果，我上手就吃了个大亏。
我花了整整一个下午，光是配置那个基础的路由结构就差点给我整崩溃了。官方文档里写得是轻描淡写，可真到自己手里，动不动就是路径报错，或者模块依赖找不着。我一开始想偷懒，直接把所有组件都塞一个文件夹里，结果跑起来发现，它那个文件系统路由跟我想象的完全不一样。我只能硬着头皮，把那些组件按照它要求的嵌套方式，一个个重新命名，重新摆放。那个过程，简直像在玩俄罗斯方块，错了就得重来。等我看到首页那个“Hello World”终于能跑起来的时候，已经是晚上十点了，眼睛都快花了。
内容塞进去： Markdown文件的拉锯战
框架搭好了，接下来是内容。官网嘛设定集、角色介绍、剧情概览，这些都是文字和图片堆起来的。我可不想为了这么个小网站去搭一套完整的后台管理系统（CMS），太费劲了。
我决定走最简单的路：内容静态化。就是把所有的文字资料都写进Markdown文件里，然后让前端去读取，直接生成页面。这听起来简单，做起来又是另一回事。
- 第一关：文件读取权限。 *默认的安全策略，让它读取本地文件有点别扭。我得在服务端的那层逻辑里，专门写一段代码，指定它去哪个目录抓取数据。我一开始没搞明白同步和异步的问题，一运行网站就卡死，排查了半天才发现是读取文件的时候把它给堵住了。
- 第二关：中文乱码和解析器。 我用了个开源的Markdown解析库，这玩意儿对英文支持得很但一碰到我的中文标点符号和特殊字符，立马就歇菜了。它要么直接把标点符号吞了，要么就是输出一堆乱七八糟的问号。我没办法，只能去它的配置项里，一个参数一个参数地试，终于找到一个编码设置，能让它老老实实地认我的中文。
为了保证排版干净利落，我还自己写了一套样式去覆盖那个解析器的默认输出。尤其是那些代码块和引用块，我得让它们看起来和“少女骑士”那种简洁又带点幻想的风格搭得上。光是颜色和字体的微调，我就来回改了十几次。
图片优化：让页面飞起来
网站最吸引人的，当然是游戏的高清原画。但高清图就是个“带宽杀手”。我把那几张主角的立绘一放上去，本地测试一跑，好家伙，加载条转得像乌龟爬。
我马上开始着手优化：
第一步：压缩图片。 我把所有素材都用一个图像处理软件批量转成了WebP格式。这格式压缩率高，但有个烦人的地方，它对颜色处理比较粗暴。我得反复对比，找到一个平衡点，既保证图片文件够小，又不能让“少女骑士”的盔甲颜色失真。这个过程，我跑了三个晚上，把一百多张图全部过了一遍。
第二步：懒加载和占位符。 为了不让用户等太久，我给页面底下的所有图片都加上了懒加载（Lazy Load）。屏幕没滑到那个位置，图片就先不加载。而且我在图片加载出来之前，先用一个极小的模糊占位图来“糊弄”一下用户，至少让画面看起来不是一片空白。动手写这个懒加载组件，又让我掉了一把头发，主要是要监听那个滚动事件，并且精准计算图片是否进入了视野，中间的数学逻辑搞得我头晕眼花。
收官：部署上线的坎坷
代码写完了，本地跑得贼顺畅。但项目只有部署到网上，才算真的成功。我把代码推到我的托管仓库里，然后连接到了一个免费的云服务平台。
结果，一键部署，立马报错。
它提示我的构建环境缺失了某个依赖。我来回折腾了两个小时，检查了我的`*`文件，发现有个小小的工具库，我只装到了本地，但忘了把它写进依赖列表里。这平台可聪明了，它找不到那个依赖，就拒绝给我构建。
我赶紧补上依赖，重新部署。第二次，又报错了。这回提示的是：内存溢出。原来是我的静态生成步骤太暴力了，它在构建的时候要一次性处理太多Markdown文件和图片路径，把那个免费服务器的小内存给撑爆了。
我只好调整策略，把静态生成的步骤拆分成好几个小块，降低每一次构建的压力。我重新调整了脚本，加入了分批处理的逻辑。第三次部署，构建时间虽然慢得像蜗牛，但总算是跑通了。
看到那个网站地址终于能点开，看到“少女骑士”的大图稳稳当当地显示在屏幕中央，我才长舒一口气。这个官网，从敲下第一行代码到上线，完全就是被我硬生生磨出来的实践记录，虽然过程坎坷，但总算把这个项目给收官了。