--- title: "Tu primer sitio, de principio a fin | Briks" url: https://briks.dev/es/docs/your-first-site description: "Sigue una pequeña panadería desde New project hasta una vista previa en briks.live, un primer cambio por chat y Publish a producción, con todas las pantallas." last_updated: 2026-10-08 --- # Tu primer sitio, de principio a fin Esta guía sigue a un negocio desde un espacio de trabajo vacío hasta un sitio público, para que veas cada pantalla una vez antes de hacerlo tú. El ejemplo es Larder Lane, una pequeña panadería de York, creada con los 50 créditos del plan Free. 9 minutos de lectura Comprobado con el estudio el 8 de octubre de 2026 ## Antes de empezar Ten preparadas tres cosas: el nombre del negocio, un párrafo sobre él y una lista aproximada de páginas. Sam, que lleva Larder Lane, quiere un sitio que muestre el pan, reciba pedidos anticipados para el sábado y diga a la gente dónde está la tienda y cuándo abre. Sam está en el plan Free, así que tiene 50 créditos y espacio para 1 proyecto. Un sitio nuevo retiene 50 mientras se crea, así que empieza con el saldo completo y no gasta nada en otra cosa antes. Al ser el primer sitio de un espacio de trabajo Free, se crea completo aunque necesite más de lo que tiene. ## Primer paso: describe el negocio Dónde 1. Projects 2. New project También puedes empezar desde el cuadro de texto de Home y pulsar **Continue**. De cualquier forma llegas a una configuración corta en siete pasos: **What are you making?**, **Describe it**, **Show what you like**, **Your brand**, **Pictures**, **How it is built** y **Review and create**. Una lista a un lado muestra dónde estás, y **Back** y **Next** te mueven entre pasos. Lo que escribes se guarda en este navegador hasta que empieza la creación, así que puedes salir y volver. 1. Elige el tipo y ponle nombre Dónde: What are you making? Sam elige **Website** y escribe `Larder Lane` en **Business or project name**. El nombre también se convierte en la primera dirección del sitio. 2. Escribe la descripción Dónde: Describe it El cuadro admite hasta 25.000 caracteres y necesita al menos diez. Puedes escribir o dictar. El panel de debajo enumera lo que dice una buena descripción: para quién es y dónde, qué ofrece o qué hace, cómo debe sentirse, y las páginas o funciones que necesita. 3. Omite los pasos opcionales Dónde: Show what you like, Your brand Ambos están marcados como **Optional**, y si no rellenas nada el botón dice **Skip**. Sam no tiene sitios que quiera seguir ni colores fijos, así que se salta los dos y deja que Briks elija. 4. Conserva las imágenes incluidas Dónde: Pictures La primera opción, marcada como **Included**, toma imágenes adecuadas de la biblioteca del estudio y dibuja las que falten, sin cargo por las imágenes. Las otras opciones dibujan cada imagen nueva y añaden un precio por imagen a la creación. 5. Comprueba cómo está hecho Dónde: How it is built **Ask about what is unclear before building** está activado; déjalo así. Sam deja desactivados los interruptores de aprobación y **Check the published site**. 6. Revisar y construir Dónde: Review and create Cada elección aparece con una forma de volver atrás para cambiarla. La nota de debajo dice que el nuevo proyecto retiene 50 créditos mientras se construye, cuál es tu saldo y que la primera versión tarda unos minutos. Cuando un proyecto así suele necesitar más de lo que tienes, una línea debajo da la estimación. Sam pulsa **Build it**. El brief de Sam Larder Lane, York > Una pequeña panadería de barrio en York, abierta de miércoles a sábado. Pan de masa madre, de centeno y bollería horneados en el local cada mañana. La gente puede reservar hogazas para recogerlas el sábado con un formulario sencillo: nombre, teléfono, qué quiere y hora de recogida. Páginas: inicio, nuestro pan, reservas, visítanos con horarios e indicaciones, y una breve historia de los dos. Cálida y directa. Crema y verde oscuro, fotos grandes y sinceras del pan. Por qué un formulario y no una tienda Sam pide reservas anticipadas mediante un formulario, no pago en línea, porque quiere empezar de forma sencilla: el cliente paga en el mostrador. Para cobrar en línea más adelante, conectaría su propio procesador de pagos en **Settings**, **Payments** y lo pediría en un cambio. Deja desactivados los pasos de aprobación con 50 créditos **Approve the words before building**, **Choose the look from three directions** y **Choose the hero from four wireframes** pausan la creación hasta que decidas. Continuar tras una de ellas vuelve a reservar hasta 50 créditos, o lo que tenga tu saldo hasta 5, y cada parte se cobra por su trabajo. Con 50 créditos, una creación con varias pausas puede dejar tu saldo bajo; consulta [aprobar mientras se crea](https://briks.dev/es/docs/approval-steps). ## Paso dos: responde a las preguntas El proyecto se abre en su pestaña **Studio**, con la conversación a la izquierda y la vista previa a la derecha. Antes de planificar nada, Briks prepara unas preguntas; la etiqueta sobre la vista previa dice 'Waiting for your answers'. Todo el detalle está en [preguntas antes de construir](https://briks.dev/es/docs/questions-before-building). 1. Marca las páginas Dónde: Studio Briks sugiere páginas a partir de tu brief. **Home** está marcada como **Always**. Marca o desmarca el resto y añade las tuyas en el campo que dice 'Add a page, for example Careers'. Un sitio puede empezar con hasta 10 páginas, y cada página que marques se construye completa. 2. Responde a las demás preguntas Dónde: Studio Cada una tiene una opción marcada como **Recommended**, ya seleccionada. Cambia las que no sean correctas o elige **Something else** para escribir tu propia respuesta. 3. Enviar tus respuestas Dónde: Studio Pulsa **Continue**. **Decide for me** toma en su lugar todas las respuestas recomendadas. También puedes escribir tus respuestas con tus propias palabras en el cuadro que hay debajo de la conversación. Lo que eligió Sam > Sam conservó Home, Our bread, Pre-orders, Visit us y Our story, y añadió `Wholesale` para las tres cafeterías a las que suministra. Una pregunta era cómo gestionar los pedidos anticipados; él mantuvo la respuesta recomendada. Seis páginas, y luego Continue. La creación empezó de inmediato. ## Paso tres: mira cómo se crea La conversación muestra cada etapa a medida que ocurre, como **Planning the site and its pictures**, **Designing and building**, **Verifying build** y **Publishing**. La primera versión tarda unos minutos. Puedes salir de la página mientras se ejecuta; la construcción continúa y el resultado te espera cuando vuelvas. [Seguir una construcción](https://briks.dev/es/docs/watching-a-build) explica cada etapa. Cuando el sitio se publica, la vista previa se llena y la etiqueta de encima cambia a **Live preview**. Los botones de encima de la vista previa te permiten verla en ancho de escritorio, tableta y móvil, recargarla, abrirla a pantalla completa o abrirla en una pestaña nueva en su propia dirección para recorrer todas las páginas como lo haría un visitante. ¿Cambiaste de opinión a mitad de la creación? **Stop** detiene una compilación en curso antes de que se publique, así que el sitio queda como estaba. Solo se te cobra el trabajo hecho hasta la parada. Si una construcción espera créditos En sitios posteriores, o en un plan de pago, una construcción cuyo resto suele necesitar más créditos de los que tienes se detiene una vez planificada. La conversación dice **Waiting for credits**, con la estimación y lo que tienes, y el plan se guarda. Pulsa **Get credits** y luego **Resume building** cuando los tengas; nunca continúa por sí sola. Consulta [créditos y planes](https://briks.dev/es/docs/credits-and-plans). ## Paso cuatro: abre la vista previa La primera publicación es una vista previa en una dirección formada con el nombre del proyecto, aquí `larder-lane.briks.live`. Si ese nombre está ocupado, se añaden unos caracteres al final. Un Owner o Admin puede cambiarla después; consulta [la dirección de tu sitio](https://briks.dev/es/docs/site-address). Una vista previa es un sitio real y funcional que puede abrir cualquiera que tenga la dirección. Se diferencia de producción en dos cosas: se pide a los buscadores que la dejen fuera, y los mensajes enviados desde sus formularios se guardan en el estudio, pero no te llegan por correo. - Lee cada página en tu propio teléfono, no solo en el panel de vista previa. - Abre el menú y comprueba que esté cada página que marcaste. - Envía un pedido anticipado de prueba por el formulario y búscalo después en **Forms** del proyecto. Dónde 1. Projects 2. Larder Lane 3. Settings 4. Forms ## Paso cinco: haz un cambio Sam se da cuenta de que el horario está muy abajo en la página Visit us, y de que la foto de la página de inicio muestra cruasanes cuando él es conocido por su pan de masa madre. Escribe un mensaje en el cuadro que hay bajo la conversación, el que dice 'Change the hero, add a page, adjust the colours…'. 1. Escribe el cambio Dónde: Studio Di qué cambiar y dónde, con palabras sencillas. Un mensaje puede incluir varios cambios relacionados, hasta 6.000 caracteres, con hasta seis imágenes o vídeos adjuntos. 2. Decidir con una revisión Dónde: Studio Debajo del cuadro, **Check the site after this change** revisa el sitio publicado en cuatro tamaños de pantalla y repara lo que se vea roto. Añade unos minutos y algunos créditos, así que déjalo desactivado para cambios pequeños como este. 3. Envíalo Dónde: Studio Pulsa el botón de enviar, **Send**. Un cambio retiene 5 créditos mientras se ejecuta. Si ya hay una construcción en marcha, el botón pasa a **Queue**: el mensaje espera y se ejecuta cuando esa construcción termina. El cambio de Sam > En Visit us, pon el horario arriba en letra grande: de miércoles a sábado, de 8 a 14 h. En la página de inicio, cambia la foto grande por un primer plano de hogazas de masa madre sobre una tabla de madera. Briks creó el cambio y lo publicó en la misma dirección, y la vista previa se recargó. La versión anterior quedó en las versiones del proyecto por si Sam quería recuperarla. Consejo Si escribes una pregunta en lugar de un cambio, como «¿qué páginas tienen un formulario?», recibes una respuesta en la conversación, sin construcción y sin retener nada. Consulta [hacer preguntas](https://briks.dev/es/docs/asking-questions) y [hacer cambios](https://briks.dev/es/docs/making-changes). ## Paso seis: publica en producción La producción hace público el sitio por completo: los buscadores pueden indexarlo y los mensajes de sus formularios te llegan por correo. 1. Pulsa Publish Dónde: Top bar Una vez publicado un sitio, la barra superior muestra **Preview** y un botón **Publish**. Púlsalo. 2. Lee el cuadro de diálogo Dónde: Publish to production Explica qué cambia. Briks revisa primero el sitio, incluidos sus enlaces, y si algo necesita arreglo, no cambia nada y el estudio te dice qué. 3. Confirmar Dónde: Publish to production Pulsa **Publish to production**. Cuando termine, el botón de la barra superior dirá **In production**. Publicar en producción y volver con **Back to preview** no consume créditos. Cuando el sitio está en producción, cada cambio que envías también se publica allí. Más en [publicar en producción](https://briks.dev/es/docs/publish-to-production). ## Paso siete: tu propio dominio En el plan Free el sitio se queda en su dirección `briks.live`, que también funciona en producción. Conectar un dominio propio, como `larderlane.co.uk`, empieza en el plan Starter. Dónde 1. Projects 2. Larder Lane 3. Settings 4. Domain Ahí escribes el dominio en **Your domain** y pulsas **Connect domain**. Después añades tres registros en la empresa donde compraste el dominio. Los registros son ajustes cortos que indican a internet adónde apunta tu dominio: aquí un registro A, un CNAME para `www` que apunta a `edge.briks.live` y un registro TXT llamado `_briks` que demuestra que el dominio es tuyo. Briks los vuelve a comprobar cada 2 minutos y emite el certificado de seguridad por ti. [Conecta tu dominio](https://briks.dev/es/docs/custom-domains) te lo explica paso a paso. ## Si algo sale mal ### La creación falló. ¿Me han cobrado? No. Una solicitud que falla no se cobra, y su retención vuelve a tu saldo. El proyecto muestra **Needs attention**; lee el último mensaje de la conversación y luego envía tu siguiente mensaje para continuar. ### No tengo suficientes créditos para un cambio. El estudio te dice qué contiene el cambio y cuál es tu saldo, y no empieza nada. Un cambio que añade páginas también puede rechazarse cuando suele costar más de lo que tienes, con la estimación. Tu sitio sigue en línea. Un Owner puede pasar a un plan con más créditos desde la ventana que se abre, o desde **Billing**. Consulta [créditos y planes](https://briks.dev/es/docs/credits-and-plans). ### ¿Puedo crear un segundo sitio en Free? No. El plan Free incluye 1 proyecto. Pro y superiores incluyen más; consulta la tabla de planes en [créditos y planes](https://briks.dev/es/docs/credits-and-plans). ### Alguien más debería verlo antes de que se publique. Envíales la dirección de la vista previa. No necesitan una cuenta. Consulta [compartir una vista previa](https://briks.dev/es/docs/sharing-a-preview). ## Sigue leyendo - [Compilando **Empieza un nuevo proyecto** Cada opción de Nuevo proyecto, paso a paso: tipo de proyecto, brief, un sitio que te guste, marca, imágenes, ajustes de creación y el coste de empezar.](https://briks.dev/es/docs/new-project) - [Compilando **Cómo escribir un buen brief** Qué poner en un brief para acertar a la primera: negocio, público, páginas, acción principal, datos y tono, con seis ejemplos de antes y después.](https://briks.dev/es/docs/writing-a-brief) - [Trabajar en un proyecto **Hacer cambios** Cómo cambiar tu sitio escribiendo a Briks: qué decir, añadir imágenes, qué incluye y cuesta un cambio, páginas internas, pedidos en cola y corregir un fallo.](https://briks.dev/es/docs/making-changes) - [Publicación y dominios **Publicar en producción** Pasa un sitio de vista previa a producción: qué lee la revisión de lanzamiento, qué bloquea el lanzamiento, cómo corregir cada punto y volver a vista previa.](https://briks.dev/es/docs/publish-to-production) ¿Sigues atascado? Escribe a [hello@briks.dev](mailto:hello@briks.dev) con el nombre de tu proyecto y lo que esperabas ver. Una captura de pantalla ayuda.