▸ Gana dineroPaso 1 gratis

Una web de negocio entregada en un día, publicada en la cuenta del cliente y con su aviso legal

Muchos negocios pequeños siguen sin web, o con una que da vergüenza. Con Astro haces una web de una página que carga al instante en el móvil, con botón de llamar, WhatsApp, precios y cómo llegar; la publicas gratis arrastrando una carpeta a Netlify, en la cuenta del cliente, y le añades el aviso legal que pide la ley.

El negocio en 30 segundos

Según el INE, solo el 36,2 % de las empresas de menos de 10 empleados tiene página web, frente al 82,9 % de las de 10 o más. Para un bar, una peluquería o un taller, una página con teléfono, horario y cómo llegar ya marca la diferencia en Google.

Lo que enseñas
Le enseñas al dueño en tu móvil su web de ejemplo, con su nombre y sus precios, y le das al botón de llamar: suena su teléfono.
Dónde están los clientes
Negocios de tu lista de OpenStreetMap con la señal «sin web» (comprobado en Google), y fichas de Google Maps con buenas reseñas y sin web.
Lo que recibe el cliente
La web publicada en su cuenta, con su dominio, el aviso legal y las claves a su nombre.
Se cobra
Se cobra entre 300 y 900 € por la web y una cuota de mantenimiento aparte (orientativo)

Los precios son orientativos: lo que se suele cobrar en España, no lo que vas a ganar. Depende de tu zona, tu oferta y de cuántos clientes contactes.

Al terminar tendrás

  • Una web de una página con botón de llamar, WhatsApp, precios, horario y mapa.
  • Publicada en internet con https, en una cuenta a nombre del cliente.
  • Su página de aviso legal y privacidad con los datos que pide la LSSI.
  • Un precio, una cuota de mantenimiento y la forma de ofrecerla.

En esta misión · 8 pasos · 1 h 55 min

  1. 1Instala Node y crea la web5 min
  2. 2El mercado: lo que necesita una web pequeña10 min
  3. 3Encuentra 20 negocios sin web20 min
  4. 4Haz la demo con su nombre20 min
  5. 5Publícala en la cuenta del cliente20 min
  6. 6El aviso legal y la privacidad15 min
  7. 7Ponle precio10 min
  8. 8Contacta y repite15 min

Lo que vas a usar

1 h 55 min €0 · el dominio, unos 10-15 €/año, lo paga el cliente 4 GB RAM · sin GPU macOS · Windows

Antes de empezar

  • Saber abrir la terminal y copiar y pegar órdenes.
  • Fotos y datos del negocio (o inventados para practicar).

  1. 1Paso 01 de 08 · ~5 min

    Instala Node y crea la web

    Premio en 5 minutos: la web en tu navegador.

    1. 1

      Abre la terminal. En Mac: pulsa Cmd+Espacio, escribe Terminal y pulsa Enter. En Windows: pulsa la tecla Windows, escribe PowerShell y pulsa Enter.

      TerminalmacOS
      $brew install node
      TerminalmacOS
      $mkdir ~/webs
      $cd ~/webs
      Terminal
      $npm create astro@latest peluqueria -- --template minimal --install --no-git --yes
      $cd peluqueria
    2. 2

      Abre la carpeta peluqueria › src › pages, cambia todo lo que hay en index.astro por esto y guárdalo:

      src/pages/index.astro
      1---
      2// Cambia estos datos por los del negocio
      3const negocio = {
      4  nombre: "Peluquería Ejemplo",
      5  lema: "Cortes y color en el centro de Teruel desde 1998",
      6  telefono: "+34 600 000 000",
      7  whatsapp: "34600000000",
      8  direccion: "Calle Mayor 1, 44001 Teruel",
      9  horario: "De martes a sábado, de 9:30 a 14:00 y de 16:30 a 20:00",
      10  mapa: "https://www.google.com/maps/search/?api=1&query=Calle+Mayor+1+Teruel",
      11};
      12const servicios = [
      13  ["Corte", "18 €"],
      14  ["Corte y peinado", "25 €"],
      15  ["Color", "desde 35 €"],
      16];
      17---
      18<html lang="es">
      19  <head>
      20    <meta charset="utf-8" />
      21    <meta name="viewport" content="width=device-width, initial-scale=1" />
      22    <title>{negocio.nombre}</title>
      23    <meta name="description" content={negocio.lema} />
      24  </head>
      25  <body>
      26    <header>
      27      <h1>{negocio.nombre}</h1>
      28      <p>{negocio.lema}</p>
      29      <a class="boton" href={`tel:${negocio.telefono.replaceAll(" ", "")}`}>Llamar</a>
      30      <a class="boton" href={`https://wa.me/${negocio.whatsapp}`}>WhatsApp</a>
      31    </header>
      32    <main>
      33      <h2>Servicios y precios</h2>
      34      <ul>{servicios.map(([s, p]) => <li><span>{s}</span><b>{p}</b></li>)}</ul>
      35      <h2>Dónde estamos</h2>
      36      <p>{negocio.direccion}<br />{negocio.horario}</p>
      37      <a href={negocio.mapa}>Cómo llegar</a>
      38    </main>
      39    <footer><a href="/aviso-legal">Aviso legal y privacidad</a></footer>
      40  </body>
      41</html>
      42
      43<style>
      44  body { font-family: system-ui, sans-serif; margin: 0; color: #1f2937; }
      45  header { background: #7c2d12; color: white; padding: 3rem 1rem; text-align: center; }
      46  main, footer { max-width: 40rem; margin: auto; padding: 1rem; }
      47  .boton { display: inline-block; background: white; color: #7c2d12; padding: 0.7rem 1.2rem; border-radius: 99px; margin: 0.3rem; font-weight: bold; text-decoration: none; }
      48  li { display: flex; justify-content: space-between; border-bottom: 1px solid #e5e7eb; padding: 0.6rem 0; list-style: none; }
      49  ul { padding: 0; }
      50</style>
      Terminal
      $npm run dev

      Así debería verse

      npm create astro crea un proyecto nuevo desde una plantilla; npm run dev arranca un servidor local, normalmente en http://localhost:4321, que se actualiza al guardar.

      Truco

      🎉 Si abres http://localhost:4321 y ves la web con los botones y los precios, ¡nivel 1 superado! Cambia el nombre arriba del archivo, guarda y mira cómo cambia sola.

    ¿Tu Mac dice «brew: command not found»? Instala Homebrew una vez

    Homebrew es el instalador de programas que usamos en todas las misiones de Mac. Pega esto en la Terminal (es el comando oficial de brew.sh). Te pedirá la contraseña del Mac: al escribirla no se ve nada, es normal.

    Instala HomebrewmacOS
    $/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

    Al terminar, copia y ejecuta las líneas que salen bajo «Next steps», cierra la Terminal y ábrela de nuevo. Comprueba con brew --version.

    Comprueba que funcionaVes la web de ejemplo en tu navegador.

    Si algo falla (4)
    Sale «brew: command not found»
    Te falta Homebrew. Instálalo con el comando de su web oficial, brew.sh, cierra la terminal, ábrela otra vez y repite.
    En Windows dice que no reconoce el comando nuevo
    Cierra PowerShell y ábrelo otra vez: la ventana vieja no sabe que acabas de instalar algo. Si lo que no reconoce es winget, actualiza «Instalador de aplicación» desde Microsoft Store.
    Sale «npm no se reconoce» o «command not found: npm»
    Cierra la terminal y ábrela otra vez después de instalar Node.
    Sale que tu versión de Node no es compatible
    Astro pide una versión reciente. Actualízala con brew upgrade node (Mac) o winget upgrade OpenJS.NodeJS.LTS (Windows).

    ¿Sigues atascado? Pregunta en la comunidad Avisar de un error en este paso

  2. Lo que desbloqueas

    7 pasos · 1 comando

    1. 2El mercado: lo que necesita una web pequeña~10 min

      Ni más ni menos.

    2. 3Encuentra 20 negocios sin web~20 min

      La lista de quien te necesita.

    3. 4Haz la demo con su nombre~20 min

      Que la vea antes de pagar.

    4. 5Publícala en la cuenta del cliente~20 min

      Suya desde el primer día.

      1 comando · comprobación incluida

    5. 6El aviso legal y la privacidad~15 min

      Lo que pide la ley.

    6. 7Ponle precio~10 min

      Web, dominio y cuota.

    7. 8Contacta y repite~15 min

      De una web a una cada semana.

    Pasos 2–8 con el plan Anual

Primeros logros

Ya lo tienes funcionando. Pruébalo con esto:

Los textos de la web

En la voz del negocio.

Prompt para tu IA

Escríbeme los textos de la web de una página de [tipo de negocio] en [ciudad]: un lema de 10 palabras, una frase de presentación y la descripción de estos servicios en una línea cada uno: [lista]. Cercano, sin frases hechas tipo «calidad y profesionalidad».

El aviso legal

Con los datos de la LSSI.

Prompt para tu IA

Hazme el texto de la página «Aviso legal y privacidad» de la web de un negocio en España con estos datos: [nombre o razón social, NIF, dirección, correo, Registro Mercantil si es sociedad, colegio profesional si lo tiene]. La web no usa cookies ni formularios, solo enlaces a teléfono, WhatsApp y Google Maps. Marca con [REVISAR] lo que deba confirmar el cliente.

Siguiente nivel: contratos menores del ayuntamiento

Tus webs, también para la administración.

Siguiente misión

Cómo deshacerlo

Borra la carpeta webs. Si publicaste una prueba en Netlify, bórrala en el sitio › Configuración › Borrar sitio.

Borrar la carpetamacOS
$rm -rf ~/webs
Únete a los miembros y sigue con los 7 pasos

Haciendo esta misión juntos

Sé de los primeros en terminarla. Si te atascas, pregunta: quien ya la hizo te puede ayudar.

Preguntar sobre esta misión Compartir mi logro

Logros recientes

Preguntas

Tu progreso 0/8Paso 1 →