实践开始：为何要重做官网？
就是看不得东西做得稀烂。话说回来，最近被我儿子拉着，玩了一款像素风的独立游戏《公寓大楼》。游戏挺但那个官方网站，简直就是上个世纪的产物。配色土，加载慢，手机上根本没法看。我看着心里直痒痒，寻思着自己动手，给它整一个像样的门面出来。
第一步：资源大搜刮。
我立马跑去游戏里截了好几张高清图，翻遍了他们的社区，扒拉出几段他们自己录的宣传片。这些东西我可不能直接用，图片太大，视频没法直接嵌入。我开了我的老伙计Photoshop和Premiere，对着图片一顿猛压，确保单张图不超过150K。视频我就导出了一个GIF，做成了背景动画，图个轻快。
动手：从零开始构建首页结构
我的原则是，能不碰后端就不碰，官网追求的就是一个字：快。我决定直接用最原始的“三件套”：HTML、CSS、JS。服务器？我直接拉起了一个家里闲置的树莓派，装了个最基础的Nginx环境，把它当成我的测试机。
- 结构定义：我拟定了首页的四个主要区块：顶部的导航栏（必须自适应）、一个巨大的视觉焦点区（放宣传图和“开始游戏”按钮）、新闻公告区、以及底部的版权和社交媒体链接。
- 导航栏的苦战：这回我要求自己必须用最新的Flexbox来写导航条。以前总是用float或者inline-block，这回咬牙也要啃下Flexbox的自适应。我对着W3C的文档磨了三个小时，调整各种对齐和间距。最耗时间的是在小屏设备上，怎么让那些菜单项收缩成一个汉堡菜单。我抄了一个现成的JS方案，然后抠了里面的逻辑，改成了自己能接受的样子。
功能实现：模拟后端与兼容性挑战
官网不能是死板的。我需要一个地方来展示“最新更新”或者“活动公告”。
既然不想架设MySQL，那我就模拟一个！我新建了一个`*`文件，把所有的新闻条目以数组的形式扔进去。然后，我写了一段原生JavaScript代码，它负责在页面加载时，读取这个JSON，遍历里面的数据，然后动态地在新闻公告区生成`
这个方案刚跑起来的时候，出现了个很蠢的问题：异步加载。新闻列表总是比页面主体晚一步出现。我调整了JS的加载顺序，确保它是执行的，才解决了这个闪烁问题。
兼容性：我被字体坑惨了。
我在自己的MacBook上选了一个细长、很有科技感的字体。看着简直完美。但当我把这个网站扔给我老婆和儿子的Windows机器上看的时候，他们告诉我页面上全是乱码或者难看的默认宋体。我尝试了几种Web Font的引入方式，但为了保证加载速度，还是妥协了，换成了大家都能认的“微软雅黑”作为首选，是系统通用字体。虽然风格差了点，但稳定压倒一切。
部署与收尾
所有的文件都整理好了，我压缩成了一个zip包，丢进了Nginx的根目录。配置好监听端口，设置了简单的缓存策略。然后我用手机、平板、还有公司的旧电脑挨个测试了一遍。
从最初的构想到上线，我花了整整两天时间。以前在公司做动辄上百万的项目，习惯了分工协作。现在自己一个人从头到尾把控，虽然累，但这种“我造出来了”的成就感，是花钱买不到的。
我看着儿子捧着平板，刷着我给他做的新官网，研究着攻略，心里踏实多了。这回的实践告诉我，基础的东西练扎实了，真遇到事，抓起什么工具都能开干。