静态网站用到的技术：3样就够，别贪多

抓一份网页源码，存成 .html 扔到桌面上，双击还能正常打开——静态站的门槛低到这个程度。所以每次有人问，做一个官网或者个人博客到底要备多少技术，我都先反问一句：你多久改一次内容？答案要是”几个月才动一次”，那静态网站用到的技术就三样，多出来的一样都是自己给自己加班。

静态网站用到的技术，三样就撑住了

HTML 管内容结构，CSS 管长相，再有一个把这俩批量拼成页面的工具。这三样凑齐，一个能上线的站就有了。JS 算半个,需要交互了再加。剩下的数据库、后台管理、缓存插件、对象存储，属于”有需求才上”的东西，不是地基。搞混了顺序，后面每一步都在补窟窿。

HTML 这关，多数人以为自己早就过了

真打开编辑器写两页就知道不是那么回事。标题层级乱着来，h3 放在 h2 前面；导航用一堆 div 堆，搜索引擎和读屏软件都看不懂；图片不写 alt，链接不写 title。这些小毛病在动态站里被模板盖着看不出来，静态站自己手写，全露在外面。还有路径，本地预览用相对路径好好的，传上去全 404，多半是斜杠写反了或者大小写对不上——Linux 上是认大小写的,这点坑年年有人踩。

CSS：模板和手写，选一个就别来回横跳

要么直接用现成的框架，Bootstrap、Tailwind 这类，拿过来改几个变量就跑；要么老老实实手写一两个 css 文件。最怕的是两样一起上，框架样式压一层，自己再写一堆 !important 去盖，改到后面自己都记不清哪条规则在生效。文件也别拆太散，几支 css 合成一支、顺手压一下体积，比研究什么高级编译方案实在得多。样式表放在 head 里同步加载，别为了追那点评分把首屏搞成一片白。

第三样：那个把页面拼出来的工具

Hugo、Hexo、Eleventy、Jekyll，随便挑一个用得顺手的。逻辑都一样：内容写成 Markdown，套上模板，跑一条命令生成一个静态目录，把这个目录整个传上去就完事。常见的命令无非 hugo 或者 npm run build。总有人纠结哪个构建快，几十篇、上百篇文章的量级，你根本用不出差别，选社区活跃、文档能看懂的那个就行。真卡住了，多半是本地 Node 版本跟文档对不上，或者模板里的变量名打错了。

Git 加 CDN，是配角但少了难受

Git 这玩意儿不生成页面，但它让你改崩了能退回去。静态站最大的好处就是每次构建出来的东西都是干净的，谁在什么时候动了哪一行，一清二楚。CDN 则是把生成好的一堆 html、css、图片铺到离访客近的节点上,首字节时间能看出明显变化。要留意缓存策略：html 别缓存太久，css 和图片可以带指纹文件名长缓存。改完样式记得刷一下缓存，不然你会对着自己刚改的页面怀疑人生。

贪多的代价，见过太多人往回加东西

静态站跑顺了，就开始有人手痒：加个数据库吧，方便查数据；装个后台吧，不会写 Markdown 的同事也要发文；再来个全文搜索、评论系统、访问统计……一套加完，维护成本比原来的动态站还高，还要多养一台机器。有朋友就是这么折腾的，本来一个纯静态博客，最后搞成三台机器加一堆服务，隔三差五出毛病。回头看看，那些功能他一年用不了几次。

评论、搜索、表单，这三样最容易破防

静态站点没后端，这三样天然做不了。做法也简单：评论挂第三方服务，搜索用构建时生成的索引在浏览器里查，表单直接扔给第三方表单服务或者自己写一个云函数接收。具体支持什么、免费额度多少，以各家服务商官方页面说明为准，别照着两年前的教程抄。有一点提醒，表单别用 mailto 那种土办法，点了弹邮箱客户端的体验，转化率能看出差距。

什么时候该承认，静态不适合你

会员登录、订单库存这种实时变的东西、十几个人同时在线编辑内容——这类需求上静态就是给自己找罪受。技术选型不是站队，是算账。你的站大部分页面一年改不了几次，那静态方案省下来的机器钱和操心时间，是实打实的。反过来，一天要更新好几轮的，老老实实用动态站，别硬撑。

最后给个能立刻动手的顺序：先拿 Markdown 写三篇内容，选一个生成工具跑通本地预览，再丢进 Git 仓库，最后接上 CDN 和域名解析。跑完这一圈，静态网站用到的技术你基本就摸清了，剩下的都是锦上添花。真到了卡壳那天，先回头看是不是自己多加了不该加的东西——十有八九是。