2024年初公司要做官网，领导觉得"做个网站还不简单，找外包公司几万块搞定"。结果8万块钱、三版设计稿、四个月来回拉扯，最后交出来的东西——首页加载7秒、手机端排版全乱、后台改个产品图要翻三层菜单。项目叫停后我们决定自己干，从需求梳理到设计到前端到后端到部署上线，两个月交付了一个加载不到1.5秒、手机端完美适配、后台更新产品像发朋友圈一样简单的官网。
这段经历让我想明白一个问题：公司网站这个东西，外包还是自建，选错的代价远不止多花几万块——它直接影响客户对你公司的第一印象、搜索引擎里的曝光机会、以及后续每一次内容更新的效率。这次从头到尾自己做的过程中踩了不少坑，也积累了一些回过头看很值钱的经验，整理出来给同样在纠结的人一个参考。
一个公司网站从零到上线的完整历程，六个关键节点
| 1 | 需求梳理阶段 — 别急着画图，先搞清楚这个网站到底要解决什么问题，目标用户是谁 |
| 2 | 技术选型 — 前端用什么框架、后端用什么语言、要不要CMS、服务器怎么选 |
| 3 | UI设计 — 配色、字体、间距、组件规范，一个公司的视觉体系从这里开始 |
| 4 | 前端开发 — HTML+CSS+JS从零搭建，响应式适配、性能优化、动效实现 |
| 5 | 后端与CMS — 文章管理、产品管理、表单收集，后台的易用性决定运营效率 |
| 6 | 部署上线与持续维护 — 域名解析、SSL证书、CDN、SEO、监控，上线只是开始 |
一、需求梳理阶段踩的第一个坑：把"我想做个好看的网站"当成了需求
外包失败的根因不是外包公司不行，是我们自己的需求根本没想清楚。当时的"需求文档"就三行字：首页大气、有产品展示、能在线留言。这种需求丢给任何开发方都只能靠猜，猜不对就反复改。
自己重新做的时候，我们花了整整一周梳理需求，输出了一份四页A4纸的文档。核心问题就三个：
需求梳理三问
① 谁来访问这个网站？不是"所有人"，是潜在客户、投资人、合作伙伴、应聘者——四类人关注的内容完全不同。潜在客户想看案例和产品，投资人想看数据和资质，应聘者想看团队和福利。
② 访问完希望他们做什么？不是"对我们产生好感"，是具体的动作：填表单、打电话、发邮件、关注公众号、申请试用。每个页面的设计都要引导用户完成一个具体动作。
③ 网站和公司现有业务怎么衔接？表单数据能不能自动同步到CRM？产品更新能不能联动到网站？公众号文章能不能一键同步？想清楚这些，后面做CMS选型时才不会走弯路。
需求想清楚之后，做一个页面结构图（sitemap）非常有必要。把整个网站规划为几个一级页面、每个一级页面下有哪些二级内容、哪些内容是静态的、哪些是动态更新的。我们当时规划的结构是：首页 → 产品中心 → 案例展示 → 关于我们 → 新闻动态 → 联系我们，外加一个博客频道用于SEO内容更新。这个结构图后来成了设计和开发的唯一依据，减少了很多沟通成本。
二、技术选型的真实体会：不是越新越好，是越合适越好
技术选型是自建网站最容易犯"技术兴奋症"的环节。团队里前端同事想用Next.js做SSR，后端同事推荐Go写API，还有人说要用微服务架构。冷静下来想清楚：一个展示型的企业官网，日访问量大概率不超过1000UV，真需要SSR和微服务吗？
| 技术层面 | 最终选择 | 为什么选它 |
|---|---|---|
| 前端框架 | 原生HTML+CSS+少量Vanilla JS | 页面少、交互简单，不需要React/Vue。HTML直出对SEO最友好，首屏加载最快 |
| CSS方案 | Tailwind CSS + 自定义CSS变量 | 不用写类名、不用维护CSS文件、响应式写起来极快。配合CSS变量统一品牌色 |
| 后端/CMS | WordPress（无头CMS模式） | 运营人员用WP后台更新内容，前端独立部署纯静态HTML，兼顾易用性和性能 |
| 服务器 | 阿里云轻量服务器+CDN | 月费不到100块，跑WordPress足够，CDN加速后全站加载1.5秒以内 |
| 表单处理 | 自写PHP脚本+企业微信机器人通知 | 客户填表后自动推送到企微群，销售团队实时响应，不依赖第三方表单工具 |
这里有一个心得特别想强调：企业官网的性能优化，80%的问题出在选型阶段。选了一个重型框架（Next.js、Gatsby），光打包出来的JS文件就有几百KB，首屏加载不可能快。我们的HTML直出方案，整个首页的HTML+CSS+图片加起来不到500KB，加上CDN，用户访问体验和看本地文件差不多。
选型时最容易掉进去的坑：把公司官网当成"技术练手项目"。官网的目的是给客户看的，不是给开发者炫技的。选技术栈的唯一标准是——能不能以最低的成本（开发成本+维护成本+学习成本）达成业务目标。如果原生HTML能搞定，就不要上框架；如果WordPress能满足CMS需求，就不要自己写后台。
三、UI设计的心得：好看的标准不是设计师觉得好看，是客户觉得可信
外包时期三版设计稿都被毙掉的原因，不是不好看——每一版单独拿出来都挺好看。问题在于，那些设计稿的审美取向是"设计大赛作品"级别的，大色块、粗字体、强对比、极简留白，看起来像设计工作室的官网，不像一家面向传统行业客户的技术公司。
企业官网设计的核心不是"好看"，是可信度。客户打开你的网站，他在潜意识里判断的是：这家公司正规吗？规模怎么样？有实力吗？不是"这个设计好艺术"。所以我们自己做设计时定了三条原则：
克制配色
主色只用品牌蓝（#1e3a5f），辅助色只用灰白体系。不搞渐变色、霓虹色、撞色。看起来"保守"，但传递的是专业和稳重。
信息密度适中
不搞"一屏只放一句话"的极简风。客户来网站是找信息的，一屏至少要传达2-3个有效信息点。但也不能堆砌，用卡片、色块、图标做信息分层。
真实素材优先
不用网络上的"商务人士握手"模板图。公司实拍照片、真实项目截图、团队工作照——虽然不完美，但传递的真实感比任何精修图都有说服力。
设计工具我们用Figma做的，从低保真线框图到高保真原型，整个设计过程在Figma里完成。一个意外的收获是：Figma的组件系统让后续的迭代修改效率极高——品牌色调整、按钮样式统一、间距规范修改，改一个组件全局生效。如果直接写代码边写边改，这些全局调整会让人疯掉。
四、前端开发：响应式适配不是加个meta viewport就完了
前端开发是整个项目耗时最长的环节，大约占了总工作量的50%。用Tailwind CSS写响应式确实快——class里写md:flex-row、lg:grid-cols-3就搞定了断点适配。但真正的难点不在写代码，而在于设计和开发之间的鸿沟。
设计师在Figma里做的桌面端设计稿很完美，但手机端怎么展示？我们的处理方式是：先做移动端，再做桌面端。手机屏幕只有375px宽，在这个限制下把信息层级、交互逻辑、视觉重点排清楚，桌面端自然就有了。反过来先做桌面端再"适配"手机端，大概率是粗暴地把内容堆成一列——这就是外包版首页手机端乱掉的根因。
移动端优先开发的实际好处：① 强迫你在有限空间里做信息优先级排序，倒逼内容精简；② 移动端调通后，桌面端只需要调整布局方式（堆叠→并排），不需要重写样式；③ 百度现在以移动端索引为主，移动端体验直接影响SEO排名。
性能优化方面，几个做对了的事：图片全部用WebP格式+懒加载，CSS和JS内联到HTML里减少请求数，字体用系统默认字体栈不用Google Fonts（省掉一次外部请求），首页完全不依赖任何外部JS库。Google PageSpeed Insights跑分：移动端92分，桌面端98分。对比外包版——移动端31分，差距就这么大。
动效方面我们很克制。只做了三处：导航栏滚动后变半透明背景、数字递增动画（公司数据展示区）、卡片hover时的微阴影。原则是：动效为信息传达服务，不为炫技。那种页面加载时元素从四面八方飞进来的动效，第一次看新鲜，第二次看就是干扰。
五、后端和CMS：后台好不好用，决定了网站是活的还是死的
很多公司网站建完之后就成了"死站"——首页的新闻动态停在2023年，产品中心只有上线时录入的那几个，团队介绍里还有离职两年的同事。问题不在运营人员懒，在于后台太难用了。外包公司给的CMS后台，更新一篇新闻要：登录 → 点击"内容管理" → 展开"新闻模块" → 点击"新增" → 在富文本编辑器里排版 → 设置封面图 → 设置SEO信息 → 发布。一共8步，运营同事用了一次就放弃了。
我们选WordPress做CMS，但做了大量简化。用Advanced Custom Fields（ACF）把每个页面需要更新的字段定义好，运营人员只需要在对应的输入框里填内容，不需要碰区块编辑器、不需要调样式。新闻发布流程简化到：写标题 → 写正文 → 上传封面图 → 点发布，四步搞定。产品管理也类似——填产品名、描述、参数、价格、上传图片，自动生成统一的产品卡片。
CMS选型的核心教训：不要因为技术团队熟悉某个框架就自己写CMS。WordPress的插件生态、权限系统、媒体库、定时发布、多用户协作，这些东西自己写至少要三个月，还不算后续的维护。用成熟的CMS做底层，前端独立部署做展示层——这种"无头CMS"架构是企业官网性价比最高的方案。
表单系统是我们自己写的PHP脚本。客户在前端提交表单后，PHP收到数据同时做三件事：存入数据库、发送邮件通知、推送到企业微信群。整个表单页面不到100行代码，比用任何第三方表单SaaS都轻量，而且数据在自己服务器上，没有隐私合规风险。
六、部署上线：看似最后一步，其实决定了前面的努力能不能被看到
上线前的检查清单，每一个漏掉都可能出问题：
| ✅ | SSL证书配置并强制HTTPS（没有SSL的网站在Chrome里会被标"不安全"） |
| ✅ | 全站301重定向（带www和不带www统一到一个域名，避免搜索引擎当成两个站） |
| ✅ | robots.txt和sitemap.xml生成并提交到百度搜索资源平台和Google Search Console |
| ✅ | CDN加速配置（阿里云CDN每月有免费流量额度，中小企业完全够用） |
| ✅ | TDK标签逐页检查（title/description/keywords不能全站一样，每个页面要单独写） |
| ✅ | 结构化数据标记（Organization和BreadcrumbList两个Schema加上，百度会展示更丰富的搜索结果） |
| ✅ | 404页面定制（不是默认的Nginx 404页，要有公司logo、返回首页按钮、搜索框） |
| ✅ | 网站在不同设备上逐页测试（至少覆盖iPhone SE、iPhone 14 Pro Max、iPad、MacBook Pro 13寸） |
| ✅ | 图片alt属性、链接title属性逐条检查，空白链接和死链全站扫描 |
上线后第一个月是最关键的观察期。我们每天盯着Google Search Console和百度搜索资源平台的数据：哪些页面被收录了、哪些页面有索引问题、搜索词是从哪些关键词进来的。发现一个有意思的现象：百度收录了首页和产品页，但新闻页一篇都没收。排查后发现新闻页的TDK标签是WordPress默认生成的，标题全是"新闻动态 - 公司名"，所有新闻页的标题一模一样。改了之后一周内就陆续收录了。
七、外包和自建之外，还有第三条路
写完以上六点，你可能觉得自建是最好的选择。但我想客观地说：自建适合团队里至少有一个能写前端代码的人。如果团队完全没有技术能力，从头学HTML+CSS+部署至少需要3-6个月，这个时间成本对很多公司来说不划算。
但外包也不是唯一解。现在有一些折中方案值得考虑：
用WordPress+付费主题
买一个商业主题（300-500元），在后台配置颜色、Logo、布局。不需要写代码，效果比模板建站好，维护成本极低。适合内容型官网。
设计外包+开发自建
花几千块找设计师出Figma设计稿，拿到设计稿后自己团队切图写代码。设计品质有保障，开发成本可控，后续迭代不受外包公司限制。
用UC建站系统做底层
WP底层+独立部署+HTML直出，技术团队可以专注定制前端样式，运营团队在WP后台管理内容，两条线互不干扰。自带百度API推送和IndexNow双通道收录，不用自己折腾SEO基础设施。
不管走哪条路，有一条经验是通用的：公司网站不是一次性项目，是一个需要持续运营的数字资产。外包做完交付的那一刻，网站就开始贬值——内容不更新、技术不升级、设计不过时。自建的意义不在于省了几万块外包费，而在于团队拥有了持续迭代的能力：发现某个页面转化率低可以改，发现某个关键词没收录可以优化，发现竞争对手网站更新了可以跟进。
回过头看这次从外包失败到自己做的经历，最大的收获不是技术层面的——那些HTML、CSS、WordPress配置网上教程一搜一大把。真正的收获是：明白了公司网站这个事，核心不在技术实现，而在"谁对这个网站负责"。外包公司做完就走了，不会关心你的转化率；只有自己的团队，才会盯着Search Console的收录曲线、盯着表单的提交数据、盯着竞品的变化不断调整。一个公司网站好不好，最终取决于有没有人真正把它当回事。
