企业网站自己可以做吗？3个关键注意事项避坑指南

刚搞完一个客户项目，老板盯着屏幕皱眉说：“这模板怎么一股廉价感？客户看了没印象。”我直接回答：“模板网站太丑不够用，想留住人，得自己上手改。”

很多老板问企业网站自己可以做吗，觉得外包太贵，自己学学HTML就能搞。其实完全可以，但前提是踩对注意事项。别被“拖拽建站”忽悠，那是展示页，不是企业官网。

项目背景与需求：别让“能用”变成“能用就行”

去年接了个做精密机械的客户，创始人老张，技术出身，但不懂前端。他之前用某个知名建站平台，拖了个工业风模板，改改图片就上线了。结果呢？百度收录慢，移动端图片变形，客户打电话问价格，还得他手动发微信。

老张问我：“自己写行不行？我不想再花钱。”

我让他先想清楚三个需求：

SEO友好：产品页必须被搜索引擎抓取，不能全是JS渲染。
响应式：70%客户用手机看，图片不能裂开。
内容管理：老张不会写代码，改新闻、传产品图必须傻瓜式操作。

这就不是一两个文件能解决的，需要架构设计。但好消息是，不用找团队，一个人配合工具就能搞定。关键是别在注意事项上栽跟头，比如域名解析、服务器配置这些隐形坑。

技术选型：别贪多，选对组合就赢了

老张第一反应是“我要学Vue，我要用React，我要做前后端分离”。我劝住了。企业官网不是APP，核心是信息传递和信任建立，过度技术化只会拖慢上线。

推荐组合：Next.js + Tailwind CSS + Headless CMS

为什么选Next.js？

SSG（静态生成）：产品页、公司介绍这些内容变化不频繁，构建时生成静态HTML，加载速度飞快，SEO天然友好。
SSR（服务端渲染）：新闻、博客等动态内容，实时渲染，保证数据新鲜。
文件路由：目录结构清晰，新手也能看懂，不用纠结路由配置。

Tailwind CSS 比 Bootstrap 灵活，不用写一堆自定义CSS，原子化类名直接套，响应式断点写一行代码搞定。

Headless CMS 选了 Strapi。为什么不用 WordPress？

WP 主题插件冲突多，安全问题频出，老张这种非技术人员容易被后台界面搞晕。
Strapi 提供 REST/GraphQL API，前端解耦，后台专注内容管理，老张只需要填表单、传图，完全不用碰代码。

服务器选 Cloudflare Workers + Vercel

Vercel 部署 Next.js 零配置，自动处理环境变量、构建命令。
Cloudflare 做CDN和DDoS防护，全球加速，免费套餐够用。
域名解析直接在 Cloudflare 控制台改，A记录指向 Vercel 分配的 IP，CNAME 指向 Cloudflare，全程10分钟搞定。

避坑注意事项：

别用本地服务器，备案麻烦，IP变动风险高。
别选“全栈框架”（如Nuxt），学习曲线陡，企业官网用不到那么多后端能力。
图片格式统一用 WebP，加载速度提升30%，SEO加分。

核心实现：代码片段拆解，看得懂才做得到

老张最关心的是“怎么改产品图？怎么加新闻？” 我给他看了核心代码，其实没几行。

1. 产品页 SSG 实现（app/products/[slug].tsx）

import { getProduct } from '@/lib/cms';
import { Image } from '@next/image';interface ProductPageProps {params: { slug: string };
}export async function generateStaticParams() {const products = await getAllProducts();return products.map((product) => ({slug: product.slug,}));
}export default async function ProductPage({ params }: ProductPageProps) {const product = await getProduct(params.slug);if (!product) {return <div>产品未找到</div>;}return (<main className="container mx-auto px-4 py-8"><h1 className="text-3xl font-bold mb-4">{product.title}</h1><Imagesrc={product.coverImage}alt={product.title}width={800}height={600}className="rounded-lg shadow-md mb-6"/><div className="prose max-w-none" dangerouslySetInnerHTML={{ __html: product.content }} /></main>);
}

关键注意点：

generateStaticParams 让 Next.js 在构建时预渲染所有产品页，生成静态HTML，搜索引擎直接抓取，不用等JS执行。
@next/image 自动优化图片，支持 WebP/AVIF，响应式加载，不用手动写 <picture> 标签。
dangerouslySetInnerHTML 渲染富文本，内容来自 CMS，确保后台编辑的格式能正确显示。

2. 响应式导航栏（components/Navbar.tsx）

'use client';import { useState } from 'react';export default function Navbar() {const [isOpen, setIsOpen] = useState(false);return (<nav className="bg-white shadow-sm fixed w-full z-50"><div className="container mx-auto px-4"><div className="flex justify-between items-center h-16"><a href="/" className="text-xl font-bold">精密机械</a>{/* 桌面端菜单 */}<div className="hidden md:flex space-x-6"><a href="/products" className="hover:text-blue-600">产品</a><a href="/about" className="hover:text-blue-600">关于</a><a href="/contact" className="hover:text-blue-600">联系</a></div>{/* 移动端汉堡菜单 */}<buttonclassName="md:hidden"onClick={() => setIsOpen(!isOpen)}aria-label="Toggle menu">☰</button></div>{/* 移动端下拉菜单 */}{isOpen && (<div className="md:hidden py-4 border-t"><a href="/products" className="block py-2 hover:text-blue-600">产品</a><a href="/about" className="block py-2 hover:text-blue-600">关于</a><a href="/contact" className="block py-2 hover:text-blue-600">联系</a></div>)}</div></nav>);
}

关键注意点：

use client 指令告诉 Next.js 这个组件需要客户端交互，状态管理用 useState。
md:hidden 和 hidden md:flex 是 Tailwind 响应式核心，md 断点默认768px，手机隐藏，平板/桌面显示。
aria-label 提升无障碍访问，SEO细节加分项。

3. CMS 内容获取（lib/cms.ts）

const STRAPI_URL = process.env.STRAPI_API_URL;export async function getProduct(slug: string) {const res = await fetch(`${STRAPI_URL}/api/products?filters[slug][$eq]=${slug}`, {next: { revalidate: 3600 }, // 每小时重新验证});if (!res.ok) {throw new Error('Failed to fetch product');}const data = await res.json();return data.data;
}

关键注意点：

revalidate: 3600 是 Next.js ISR（增量静态再生成）配置，内容更新后1小时内自动刷新静态页面，兼顾速度和新鲜度。
环境变量 STRAPI_API_URL 在 .env.local 中配置，不提交到 Git，安全。

上线与优化：细节决定生死

老张代码跑通了，本地没问题，但部署后发现图片加载慢，移动端菜单卡顿。我带着他排查，踩了三个坑：

坑1：图片路径错误

问题：CMS 返回的图片 URL 是相对路径，Next.js 图片优化失败。
解决：在 next.config.js 中配置 images.remotePatterns，允许 Strapi 域名：

module.exports = {images: {remotePatterns: [{protocol: 'https',hostname: 'your-strapi-domain.com',},],},
};

坑2：移动端 CSS 加载阻塞

问题：Tailwind 默认生成所有类，CSS 文件过大，首屏渲染慢。
解决：启用 purgeCSS（Tailwind 默认开启），只保留实际用到的类。同时，非关键 CSS（如动画）用 @media 延迟加载。

坑3：SEO 元数据缺失

问题：产品页没有独立 title 和 description，搜索引擎无法识别。
解决：在 app/products/[slug].tsx 中添加 generateMetadata：

export async function generateMetadata({ params }: ProductPageProps) {const product = await getProduct(params.slug);return {title: `${product.title} - 精密机械`,description: product.metaDescription,openGraph: {images: [product.coverImage],},};
}

上线检查清单：