我那个远房亲戚，之前在一家小作坊做独立游戏，就是那个叫《薄雾/迷雾》的。他们游戏做得挺故事和美术都是一流水准，但官网烂得跟个二十年前的个人主页一样，打开慢，排版乱，简直是白瞎了这么好的游戏。
我看着心里直痒痒，觉得这不行，官网就是游戏的门面，得能撑得住场面。我就跟他们提了，说这官网得推倒重做，得给我一个干净利落、加载飞快的展示平台。他们一开始还觉得没必要，说内容放上去就行了，但我硬是说服了他们，说我要拿这个项目练练手，把最近研究的静态网站技术彻底实践一遍。
他们问我有没有时间，我说最近手头正好空着，干脆自己来全权操刀。我当时就定下了几个原则：速度第一，简洁至上，绝不使用任何大型的CMS系统，比如WordPress那种，太笨重了。
确定方案与技术选型
当时摆在我面前的路，一条是走前端框架，用React或者Vue写个单页应用，然后搞SSR。另一条就是回归原始，用静态站点生成器。我仔细琢磨了半天，觉得这官网的核心需求就两点：展示高质量图片和流畅播放预告片。不需要什么用户登录、评论系统这种复杂功能。
我最终选定了一个叫Astro的工具，因为它构建出来的东西是真的轻。它能把组件都编译成零JS的纯HTML，只有必须交互的地方才加载一点点JavaScript，完美符合我追求的“飞快”标准。配套的样式管理，我直接选择了最纯粹的CSS Modules，连SASS都没用，就是图个简单直接。
我的实践过程，是从最基础的骨架开始的：
- 第一步：环境搭建与基础模板。我用Astro快速拉起了一个项目骨架。我没有用任何现成的UI库，所有基础样式，比如按钮、导航栏，全部是自己手写CSS，确保每一个字节都是有用的。
- 第二步：内容收集与资源优化。他们把游戏里所有的高清截图、概念设计图和几个超大的4K预告片素材一股脑儿都丢给了我。我花了整整两天时间，进行图片压缩和格式转换。特别是那些大背景图，我研究了WebP格式，在保持清晰度的情况下，体积直接砍掉了一半，这是提升加载速度的重中之重。
- 第三步：核心页面设计与实现。官网的核心就那么几个页面：首页入口、游戏特色、媒体赞誉和购买渠道。我坚持了极简主义的设计风格，让背景的“迷雾”概念和UI保持一致，多用冷色调和暗色块，凸显游戏的神秘感。我甚至给页面加了视差滚动效果，让用户在滚动的过程中，能感觉到画面的层次感，但这一块的JS代码必须做到极致优化，不能影响性能。
- 第四步：部署与测试。所有内容写完后，Astro一键打包生成了纯静态文件。我没有用传统的服务器，而是直接部署到了Netlify上，利用它的全球CDN服务。我马上用手机和电脑分别测了一遍，全球各地都能秒开，首屏加载时间基本都在1秒以内。
等到他们工作室的人看到成品，都惊了。之前那个官网，打开要等三四秒，现在点进去‘咻’的一下就加载出来了。他们说，这速度和视觉效果，才配得上他们的游戏。这让我很有成就感。
这回实践下来，我最大的体会就是，做官网这事儿，速度和稳定性才是王道。没有必要为了追求技术新潮而过度设计。很多时候，回归最朴素、最直接的静态化方案，就是解决小问题、追求高性能的最优解。折腾了一个多星期，虽然有点累，但看着自己亲手实践出来的网站，那种满足感是实实在在的。