今天跟大家唠唠我搭建《更好还是更糟》游戏官网的那些事儿，踩了不少坑，但也学到不少东西，算是个完整的实践记录。
接到这个任务，说要搞个官网，我心里想，这还不简单？不就是个展示页面，加个下载链接嘛Too young，too simple！
选型：是自己撸还是用框架？
第一个问题就来了，是用现成的CMS（内容管理系统）框架，比如 WordPress 啥的，还是自己纯手撸？想了想，这个游戏内容更新不会太频繁，而且我想更灵活地控制页面样式，就决定自己来了。结果，这就是个大坑的开始。
前端：从零开始的 HTML、CSS、JS
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
- HTML：先把骨架搭起来，header、导航、主要内容区、footer，这些基本的元素先搞定。内容嘛先随便放点占位符，反正后面要改。
- CSS：样式这块，我下了点功夫。配色方案参考了游戏的整体风格，想做出那种有点复古，又有点现代的感觉。字体也选了好久，定了一款比较清晰易读的。用Flexbox和Grid布局，让页面在不同设备上都能 нормально отображаться。
- JS：JavaScript 这边，主要就是做一些简单的交互效果，比如点击导航菜单平滑滚动到对应内容区域，还有就是图片轮播。轮播图我一开始是自己写的，后来发现太麻烦了，直接用了 *，真香！
后端：简单粗暴的 PHP
后端没什么复杂的，因为主要就是展示信息，不需要用户注册登录啥的。我就用 PHP 写了个简单的下载链接管理，方便以后更新游戏版本。数据库都没用，直接把下载链接写在配置文件里了，简单粗暴。
遇到的坑：各种兼容性问题
做完之后，我满怀信心地打开了各种浏览器，结果... 惨不忍睹。IE 直接阵亡，Chrome 和 Firefox 也有一些小问题。
- CSS 兼容性：各种 CSS 属性在不同浏览器下的表现都不一样，比如圆角、阴影啥的。只能一个个去调整，加各种前缀，累死个人。
- JS 兼容性：JavaScript 也有一些坑，比如 `addEventListener` 在 IE 下要用 `attachEvent`。还有就是 `fetch` API，IE 不支持，要用 `XMLHttpRequest`。
为了解决这些兼容性问题，我疯狂 Google，各种 Stack Overflow，真是头都要秃了。后来学乖了，用了 Babel 把 ES6 代码转成 ES5，CSS 也用了 PostCSS 自动加前缀，这才好多了。
上线：服务器和域名
服务器我租了个便宜的 VPS，域名也注册了一个，然后就是配置 DNS，把域名指向服务器。这一步倒是没遇到什么大问题，毕竟之前也搞过几次。把网站文件上传到服务器，配置好 Nginx，搞定！
优化：速度、安全
网站上线之后，我又做了一些优化：
- 图片压缩：把网站上的图片都压缩了一下，减少了文件大小，加载速度快了不少。
- CDN：用了个免费的 CDN，把静态资源缓存到 CDN 上，进一步提升加载速度。
- HTTPS：申请了免费的 SSL 证书，把网站升级到了 HTTPS，增强安全性。
痛并快乐着
这回搭建官网的经历，虽然很累，但真的学到了很多东西。从前端到后端，从服务器到域名，每一个环节都亲自操刀，对整个 Web 开发流程有了更深刻的理解。以后再遇到类似的任务，就不会那么慌了。
我知道这个官网还有很多不足之处，比如代码质量、用户体验等等。以后会继续改进，不断学习，争取做出更好的作品。
