不会写代码的人，怎么给自己做一个网站
我一直想有个自己的网站。
不是那种"公司官网"的网站，是我自己的 —— 放我做的几个小工具，写点东西，别人搜到我、看到我在干什么，就够了。
这件事想了挺久。每次都觉得"我又不会写代码，做网站得找外包吧"，然后就搁下了。这次做完了，从头到尾大概两个晚上。过程没有想象中顺，但也远没有想象中难。
记一下全过程，万一你也在想同样的事。
一开始我想的是什么（其实想错了）
我最初的设想很朴素：做个官网，把我的工具列上去。
按这个想法，页面应该是这样：顶部一个"产品中心"，下面一排工具卡片，"立即购买""免费下载"按钮，再来个"关于我们""联系我们""服务条款"。反正就是照着我看过的那些软件官网抄一遍。
现在回头看，这个想法从根上就跑偏了。因为我根本不是一家公司，我的"工具"也不是商品 —— 有几个是我自己在用的顺手东西，有几个还在改，有的压根不是拿来卖的。
但我当时没意识到。我甚至已经把那一版的页面都排出来了：一排排的产品卡，写着"版本 v2.4.1""支持 Windows"，还有"定价方案"的对比表格。
现在想想挺好笑：一个连下载链接都还没有的人，官网上已经写得像上市公司的产品页了。
第一个转折：我把方向砍了一半
真正让我改主意，是一次自己看那版页面的时候。
我盯着"立即购买"那个按钮想了半天 —— 点了会怎样？没人卖东西。又看"免费下载"，点了会怎样？没有包。
那一版的官网上，大部分按钮点下去都是空的。它看起来很完整，但它说的每一句话都不是真的。这种东西做出来，我自己都不好意思发给别人。
于是我做了第一个现在觉得最重要的决定：
不做公司官网，做"个人工坊"。
区别在哪？公司官网是站在"我们"的角度介绍产品，个人工坊是站在"我"的角度介绍我在干什么。这么一改，那些装门面的东西全不需要了：不用产品矩阵，不用定价表，不用"关于我们"里那些套话。
页面变成了这样：
- 一个简短的开场，说清这个站是干什么的
- 几个工具，每个老老实实写"它是什么、现在什么状态"
- 一个笔记栏目 —— 就是你现在看的这个
- 一条"有话直说"的留言入口
这个判断不是我拍脑袋来的。是我先做了一版错的，看着它觉得别扭，才想明白哪里别扭。方向这东西，往往得先撞一次墙才知道。
第二个转折：我意识到"能自己改"比"做得漂亮"重要一万倍
方向对了，接下来就是怎么做。这里我遇到了整个过程中最关键的一次取舍。
当时摆在我面前有两条路：
一条是"标准做法" —— 用现在流行的那些前端框架，页面能做得很好看，动效也能加。但代价是：这套东西有它自己的一套构建流程，我要是想改一行字，得先在电脑上装一堆环境，跑个命令，等它编译。
另一条路"土"得多 —— 页面由一个后端程序直接生成，改文字就是改文件，改完刷新就能看到。
我选了第二条。原因特别简单：
这个网站要一直由我自己维护。如果我改一个字都要找人，那这个网站活不过三个月。
事实证明这个选择太值了。后面我改了不知道多少轮文案 —— 标签上的字、按钮上的字、每句话的口气 —— 全是自己动手，改完立刻看效果。要是走第一条路，光为了改个字去配环境，我可能早就放弃了。
这也是我给所有跟我一样不写代码的人的建议：先选一个"坏了你能自己救"的做法，再谈好不好看。
真正开始动手
定的技术路线是这样：一个后端程序负责生成所有页面、管数据；数据存在一个文件型的小数据库里，不用单独装数据库服务；页面上那点交互（比如皮肤切换、留言提交）用最普通的浏览器脚本。
我这个不太懂技术的人，能说清的就是大概这么个意思。真正落地的时候，我是这么干的：
一次只让它做一件事，做完我自己验一遍。
不是一上来就说"帮我做个网站" —— 那出来的一定跑不通。而是拆开：
- 先做个能打开的首页，只有几行字，能跑起来就行
- 再加一个工具列表，数据从库里读
- 再加详情页
- 再加后台，让内容能改而不用动代码
- 最后才是留言、皮肤、笔记这些
每一步做完，我都会自己点一遍 —— 首页能不能打开、点进去是不是那一页、按钮点了有没有反应。看懂了，再往下走。
这一步一步来，比我预想的慢，但没返过工。中间只有一次，我说"帮我做个能在线试工具的地方"，做出来完全不是我想的 —— 那次教训写在下面。
踩过的坑（这部分你们应该最想看）
后端、部署这些技术上的坑我记不清细节，也说不明白。但我踩的坑里有几个是"脑子上的"，跟技术没关系，我觉得更值得说。
坑一：做出来一个"关不掉的开关"
网站做完了，我在后台看到一栏"官网明暗"，能选深色或浅色。我改了改，感觉挺满意。
后来我心血来潮验证了一下：切换前后各截一张图，对比一下 —— 两张图一模一样，一个像素都没变。
也就是说，那个开关后面什么都没有。它能点、能选、能保存，但页面上永远不会有任何变化。
这种事挺吓人的。因为它不像报错那样会告诉你"我坏了"，它就安安静静躺在那，看起来一切正常。你要是不去验证，可能过半年都不知道自己一直在改一个不存在的东西。
后来我让它把两套皮肤都真做了出来，还顺手加了个给访客自己切的按钮 —— 现在在右下角，你可以点着玩，真的会变。
我学到的：一个"设置项"是真的还是假的，不看它长什么样，要看你改完页面有没有跟着变。 凡是能改的东西，都值得亲手验证一次。
坑二：我在后台改了半天，页面上纹丝不动
联系页有一栏"购买与开票"，写的是付款和开发票的说明。我想把那句话改一改。
改了，保存，刷新 —— 没变。又改一次，还是没变。
查了半天才明白：同一个位置，其实有两个地方都能给它填内容，我改的那一栏，被另一个地方的默认值给盖住了。就像你想换电灯泡的颜色，结果发现开关在另一个人手里。
这个坑最气人的地方在于：它不报错。"改了没用"是我自己发现的，不是系统告诉我的。
坑三：我说"做个能在线试工具的地方"，做出来完全不对
这是我的表达问题。
我当时的想法是：访客看中一个工具，最好能在线试一下，合适了再决定。我说出来的是"做个能在线试的地方"。
做出来的是一个上传文件、在网页里处理的界面 —— 因为"在线试"听起来就是那样。
但我的工具根本不是那么跑的。它是另外一个网站上现成能用的服务，访客需要的是"从这里跳过去试"，不是"在这个页面里试"。
结果那个做好的界面完全用不上，而且它还开了一个很坏的头：界面长得像能处理文件，其实背后没有引擎，等于又造了一个假的。
后来这样改：这个页面只干一件事 —— 讲清楚这工具是干什么的、顺便放一句"我想试"，至于真正上手，是点一个按钮跳过去。
十次里有八次不是它笨，是我那句话没说清楚。改了没用，先回去想"我到底要的是什么"。
坑四：手机上传了截图说报错，最后发现不是网站的锅
这个坑的结论挺反直觉的。
有段时间手机上点"试一下"打不开，报错。我第一反应是网站写错了。
结果查了一圈：网站本身是好的，手机上从打开首页、到翻笔记、到看工具详情，全正常；那台被跳转过去的服务器也是好的（它在全世界的十几个探测点全部正常）。
问题出在那一跳：手机上能打开我的网站，但打不开我要跳过去的那台机器。可能是网络，也可能是微信里打开的 —— 内置浏览器有时候会拦外链。
这事教我一个道理：用户看到的那个"报错"，经常离真正的毛病很远。 报错在"这一跳"，病根可能在用户手机这边的网络。
顺便说，也正因为这个，我决定给这类跳转加个中转页（还没做完）：万一那边真的不通，访客看到的至少是一句人话，不是一个光秃秃的错误页面。
坑五：升级上去了 —— 其实根本没升级
这个不算坑，算惊出一身冷汗。
网站改完，我按流程上传、重启，一切显示"成功"。服务状态是正常的，页面也能打开。
但我心里不踏实，顺手看了一眼版本号 —— 还是旧的。
原来那一步解压的时候少写了一个参数，代码被解到了一个多出来的子目录里。旧的还在原地跑着，新的躺在隔壁没被用上。而"重启成功"和"页面能打开"这两个信号，都看不出这个问题。
这个坑让我改掉了一个坏习惯：以前我看"成功了没"就是看有没有报错。现在我会去看一个具体的、能被数字验证的东西 —— 版本号对不对。
别拿"没报错"当"做对了"。要找一个能证明它对的东西去看。
最后做出来的是什么
现在这个站是这样的：
- 首页：一句开场，说清我是谁、这里有什么
- 几个工具：每个都能单独点进去看，页面会根据这件工具的真实情况说话 —— 网页能直接用的就说"浏览器打开就能用"，需要下载的才显示版本和安装包
- 笔记：就是这里，写点我在做的事和想明白的事
- 留言：不用注册，有事直接说
- 后台：我自己能改每一段文字、加工具、改价格口径、发笔记 —— 不用碰代码
还有一件小事我挺满意：右下角那个圆钮，访客能自己切深色/浅色。 而且关掉浏览器再打开，它还记着你的选择。
这东西不难，但它是我从"假开关"那个坑里爬出来之后做的。所以对我来说，它不只是一个按钮。
回头想想
如果让我给以前的自己一句话，大概是：
别等"我会了"再开始。你先想清楚要什么，剩下的可以一步一步磨出来。
这一路我最常做的动作，其实不是"写代码"，是看完页面以后说"不对，我想要的是那个"。十次改动里有八九次都是这类。我从来没写过代码，但我一直在做判断 —— 而这个网站的样子，基本就是这些判断的累积。
不难，真的。比想的简单。
只是得愿意先做错一版。