说起这个“平行救赎”的官网，我得先跟大家交个底，这活儿不是我想主动接的，是逼不得已。之前咱们那些设定、故事草稿、还有各种插画，都散在好几个群里，新来的朋友们就像无头苍蝇一样，问来问去。社群里每天回答重复的问题，回答得我心力交瘁。我就寻思，不行，得建个正经的、一站式的窝点，把所有东西都捋顺了。
第一阶段：下决心和选工具
下决心是第一步。我这个人，做事情不喜欢拖泥带水。既然要干，就得快。我一开始就否决了用那些需要复杂环境的框架，比如什么Java那一套，太重，搭环境都得半天。我们这项目又不是什么大型电商，只是个内容展示站。
我的原则就是：能用最简单的办法实现，就绝不绕弯子。我敲定了这么一套土办法：
- 前端：纯HTML、CSS和一点点原生JavaScript。不搞框架，免得为了点小功能还得引入几十兆的代码包。
- 设计：Sketch草图直接转成CSS，配色方案就用项目的主色调，黑白灰配一点点深红，显得稳重又神秘。
- 服务器：海外的便宜VPS，图个省事，免去备案的麻烦。
我当时就跟自己说，这回要的就是速度，要的就是稳定，那些花哨的技术名词，通通靠边站。
第二阶段：规划结构，从零开始画草图
技术选好了，内容架构就得提上日程。一个官网，内容必须清晰。我花了两个晚上，在草稿纸上画了无数个框框，3确定了四大核心板块：
- 主页（Home）：必须是宣传片的感觉，视觉冲击力要强，一眼看到核心的世界观。
- 世界观档案（Archives）：把所有文字设定、时间线，分门别类放进去，做好索引。这是给新朋友看的。
- 人物卡（Characters）：每个角色一张专属页面，包括他们的背景、能力和最新进展。
- 项目日志（Updates）：也就是更新日志，我得把自己这段时间的实践和想法，都扔进去。
结构一确定，我就开始着手写前端代码了。我先把主页的骨架搭起来，一个一个
标签，一块一块
第三阶段：啃硬骨头——响应式布局的拉锯战
网站开发最烦人的是什么？是兼容性。特别是手机端。现在谁还用电脑看网站，九成都是手机。我电脑上看着好好的版式，一传到手机模拟器上，立马就乱成一锅粥。
为了解决这个问题，我全程都在跟那个叫“弹性盒子”（Flexbox）的布局方式较劲。我就是一遍又一遍地试，把每个元素的尺寸、边距都用百分比去定义，而不是用固定像素。这工作真是磨人，我每天晚上都得调整好几次CSS文件，上传上去，再用我的旧手机、新平板、老婆的手机挨个看一遍。
我清楚地记得，有一次我为了让人物卡在手机上能变成两列而不是一列长条，我整整改了四个小时，中间差点把键盘砸了。发现，就是少写了一个“@media screen and (max-width: 600px)”的设置。这种低级错误，让我又郁闷又想笑。真是应了那句话，技术问题不可怕，低级失误最要命。
第四阶段：域名、部署与收尾
内容做得差不多了，就得考虑上线了。域名这块，我之前就瞄准了一个跟项目名高度相关的。当时生怕被人抢走，我设置了好几次提醒，到点立马冲上去注册，算是顺利拿下了。
部署流程我没搞太复杂。我这个人，不喜欢搞那些复杂的“持续集成”之类的玩意儿，对于咱们这种小型内容站来说，不实用。我直接配置了一个简单的FTP上传脚本。每次更新完代码，我直接在本地运行那个脚本，它就自动把修改过的文件推送到服务器上去。这办法土是土了点，但稳定，出错率低。
等我把所有的文件都推上去，在浏览器里输入域名，看到那个完整的、属于我们自己的官网跳出来的时候，那种感觉，怎么说，像是终于把一个巨大的担子给卸下来了。虽然整个过程粗糙，很多代码写得也不够优雅，但是它能跑，能解决问题，这就够了。
说真的，从一开始的被动，到中间的抓狂，再到的成功上线，这整个实践过程让我明白了一个道理：工具不重要，解决问题最重要。就像我当年辞职那会儿，为了生活，啥活儿都干，不也找到了新的出路吗？这回搞网站也是一样，土法炼钢，一样成功。
咱们的“平行救赎”终于有了个家。后续我还会记录和分享每次的内容更新和小的技术调整，大家有空可以去看看，多提意见。