Cómo hacer una página web estática de forma sencilla

¿Cuándo conviene una página estática?

Es ideal para landing pages, sitios institucionales, portafolios, menús, eventos y páginas de producto: todo lo que cambia pocas veces al mes. Ventajas:

• Velocidad: no hay consultas a base de datos; los archivos se sirven desde una CDN cercana al visitante.
• Seguridad: sin panel de administración ni plugins, casi no hay superficie de ataque.
• Costo: el hosting estático es gratuito o muy económico.
• Cero mantenimiento técnico: nada que parchar cada mes.

Si necesitas que varias personas editen contenido seguido, carrito de compras o usuarios con contraseña, entonces necesitas un sitio con panel o una webapp.

1. Planea el contenido

Antes de abrir el editor, escribe en un documento:

• Qué quieres que haga el visitante (escribirte por WhatsApp, llamar, pedir cotización).
• Las secciones: qué haces, para quién, pruebas (proyectos, clientes, números), cómo trabajas y contacto.
• Los textos reales y las fotos. El diseño se adapta al contenido, no al revés.

2. Arma la estructura en HTML

HTML describe qué es cada cosa. Usa etiquetas con significado: ayudan a buscadores y a lectores de pantalla.

<!doctype html>
<html lang="es-MX">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Taller de muebles a la medida en CDMX | Mi Empresa</title>
  <meta name="description" content="Fabricamos mobiliario para oficinas y residencias.">
  <link rel="stylesheet" href="estilos.css">
</head>
<body>
  <header><nav>…</nav></header>
  <main>
    <h1>Mobiliario a la medida para oficinas</h1>
    <section id="servicios"><h2>Servicios</h2>…</section>
    <section id="contacto"><h2>Contacto</h2>…</section>
  </main>
  <footer>…</footer>
</body>
</html>

Reglas simples: un solo h1 por página, encabezados en orden (h2, h3), texto alternativo en cada imagen y enlaces con texto descriptivo.

3. Dale estilo con CSS

• Define tus colores y tipografías una vez con variables (--color-principal) y reutilízalas.
• Diseña primero para celular y amplía con @media para pantallas grandes: la mayoría de las visitas llegan desde el teléfono.
• Usa CSS Grid y Flexbox para acomodar secciones; ya no hacen falta frameworks pesados.
• Carga fuentes en formato WOFF2 con font-display: swap para que el texto aparezca de inmediato.

4. Optimiza imágenes y video

Las imágenes son lo que más pesa en una página. Tres hábitos bastan:

• Exporta en WebP o AVIF al tamaño en que se muestran (no subas una foto de 6000 px para un cuadro de 600).
• Agrega width, height y loading="lazy" a las imágenes que no se ven al abrir la página.
• Para video de fondo, usa MP4 corto, sin audio, comprimido, con una imagen de portada.

5. Opcional: usa un generador de sitios

Si el sitio tiene varias páginas con encabezado y pie repetidos, un generador estático evita copiar y pegar: escribes plantillas y contenido (por ejemplo en Markdown) y el generador produce el HTML final. Opciones populares: Astro, Eleventy (11ty) y Hugo. El resultado sigue siendo una página estática.

6. Publica: dominio y hosting

1. Dominio: regístralo a nombre de tu empresa (.com o .com.mx) en un registrador confiable y guarda el acceso.
2. Hosting estático: Cloudflare Pages, Netlify, GitHub Pages o Vercel publican tus archivos en una CDN global con certificado SSL (https) incluido. Para sitios pequeños suelen ser gratuitos.
3. Sube los archivos arrastrando la carpeta o conectando un repositorio de GitHub: cada cambio que guardes se publica solo.
4. Apunta el dominio desde el panel de DNS (registro CNAME para www) y redirige el dominio sin www hacia la versión con www, o viceversa, para tener una sola dirección.

7. SEO básico que sí importa

• Título y descripción únicos por página, con lo que haces y dónde.
• Contenido útil y específico: servicios, zonas, preguntas frecuentes, proyectos reales.
• Velocidad: mide con PageSpeed Insights y corrige lo que marque en rojo.
• Archivo sitemap.xml y robots.txt, y da de alta el sitio en Google Search Console.
• Perfil de Google Business si atiendes clientes en una zona.
• Datos estructurados (schema.org de tipo Organization o LocalBusiness) para que el buscador entienda quién eres.

8. Mantenimiento

Una página estática casi no requiere mantenimiento técnico: renueva el dominio a tiempo, revisa que los enlaces funcionen y actualiza el contenido cuando tengas proyectos nuevos. Si cada cambio te toma demasiado, es momento de pasar a un sitio con panel de administración.

¿Prefieres que la hagamos por ti con diseño a la medida? En Forespot construimos webpages rápidas, ligeras y listas para buscadores. Escríbenos.