--- title: "Seu primeiro site, do início ao fim | Briks" url: https://briks.dev/pt-br/docs/your-first-site description: "Acompanhe uma pequena padaria de New project até uma prévia em briks.live, uma primeira mudança no chat e Publish em produção, com cada tela mostrada em ordem." last_updated: 2026-10-08 --- # Seu primeiro site, do início ao fim Este passo a passo acompanha uma empresa desde um espaço de trabalho vazio até um site público, para você ver cada tela uma vez antes de fazer o seu. O exemplo é a Larder Lane, uma pequena padaria em York, criada com os 50 créditos do plano Free. 9 min de leitura Conferido com o estúdio em 8 de outubro de 2026 ## Antes de começar Deixe três coisas à mão: o nome do negócio, um parágrafo sobre ele e uma lista aproximada de páginas. O Sam, que cuida da Larder Lane, quer um site que mostre o pão, aceite encomendas para sábado e diga às pessoas onde fica a loja e quando ela abre. Sam está no plano Free, então tem 50 créditos e espaço para 1 projeto. Um site novo reserva 50 enquanto é construído, por isso ele começa com o saldo cheio e não gasta nada com outra coisa antes. Como primeiro site de um espaço de trabalho Free, ele é construído por inteiro mesmo que precise de mais do que Sam tem. ## Primeiro passo: descreva o negócio Onde 1. Projects 2. New project Você também pode começar pela caixa de texto na Home e pressionar **Continue**. Nos dois casos, você chega a uma configuração curta em sete etapas: **What are you making?**, **Describe it**, **Show what you like**, **Your brand**, **Pictures**, **How it is built** e **Review and create**. Uma lista ao lado mostra onde você está, e **Back** e **Next** levam de uma etapa a outra. O que você digita fica guardado neste navegador até a criação começar, então você pode sair e voltar. 1. Escolha o tipo e dê um nome Onde: What are you making? Sam escolhe **Website** e digita `Larder Lane` em **Business or project name**. O nome também vira o primeiro endereço do site. 2. Escreva a descrição Onde: Describe it O campo aceita até 25.000 caracteres e exige pelo menos dez. Você pode digitar ou falar. O painel abaixo dele lista o que uma boa descrição diz: para quem é e onde, o que oferece ou faz, qual deve ser o clima, e as páginas ou funções de que precisa. 3. Pular as etapas opcionais Onde: Show what you like, Your brand Os dois são marcados como **Optional** e, sem nada preenchido, o botão mostra **Skip**. Sam não tem sites que queira seguir nem cores definidas, então pula os dois e deixa o Briks escolher. 4. Manter as imagens incluídas Onde: Pictures A primeira opção, marcada como **Included**, pega imagens adequadas da biblioteca do estúdio e desenha as que faltarem, sem cobrança pelas imagens. As outras opções desenham todas as imagens do zero e acrescentam à criação um preço por imagem. 5. Veja como ele é construído Onde: How it is built **Ask about what is unclear before building** está ativado; deixe assim. Sam deixa as chaves de aprovação e **Check the published site** desativadas. 6. Revisar e criar Onde: Review and create Cada escolha é listada com um caminho de volta para alterá-la. A nota abaixo diz que o novo projeto reserva 50 créditos enquanto é construído, qual é o seu saldo e que a primeira versão leva alguns minutos. Quando um projeto como esse costuma exigir mais do que você tem, uma linha abaixo dá a estimativa. Sam aperta **Build it**. Briefing do Sam Larder Lane, York > Uma pequena padaria de bairro em York, aberta de quarta a sábado. Pão de fermentação natural, pão de centeio e doces assados no local todas as manhãs. As pessoas podem encomendar pães para retirar no sábado por um formulário simples: nome, telefone, o que desejam e um horário de retirada. Páginas: início, nossos pães, encomendas, visite-nos com horário de funcionamento e como chegar, e uma breve história sobre nós dois. Tom acolhedor e direto. Creme e verde-escuro, fotos grandes e honestas de pão. Por que um formulário e não uma loja Sam pede pré-encomendas por um formulário, e não pagamento online, porque quer começar de forma simples: o cliente paga no balcão. Para receber pagamentos online mais tarde, ele conectaria o próprio processador de pagamentos em **Settings**, **Payments** e pediria isso em uma mudança. Deixe as etapas de aprovação desativadas com 50 créditos **Approve the words before building**, **Choose the look from three directions** e **Choose the hero from four wireframes** pausam a construção até você decidir. Continuar após uma delas reserva de novo até 50 créditos, ou o que seu saldo tiver, até 5, e cada parte é cobrada pelo seu trabalho. Com 50 créditos, uma construção com várias paradas pode deixar seu saldo baixo; veja [aprovar durante a construção](https://briks.dev/pt-br/docs/approval-steps). ## Passo dois: responda às perguntas O projeto abre na aba **Studio**, com a conversa à esquerda e a prévia à direita. Antes de planejar qualquer coisa, Briks prepara algumas perguntas; o rótulo acima da prévia diz 'Waiting for your answers'. Todos os detalhes estão em [perguntas antes de construir](https://briks.dev/pt-br/docs/questions-before-building). 1. Marque as páginas Onde: Studio A Briks sugere páginas a partir do seu briefing. **Home** vem marcada como **Always**. Marque ou desmarque as outras e acrescente as suas no campo que diz 'Add a page, for example Careers'. Um site pode começar com até 10 páginas, e cada página marcada é construída por completo. 2. Responda às outras perguntas Onde: Studio Cada uma tem uma opção marcada como **Recommended**, já selecionada. Mude as que estiverem erradas ou escolha **Something else** para escrever sua própria resposta. 3. Enviar suas respostas Onde: Studio Pressione **Continue**. **Decide for me** adota todas as respostas recomendadas. Você também pode digitar suas respostas com suas próprias palavras na caixa abaixo da conversa. O que o Sam escolheu > Sam manteve Home, Our bread, Pre-orders, Visit us e Our story, e acrescentou `Wholesale` para as três cafeterias que ele abastece. Uma pergunta era como as encomendas antecipadas deveriam ser recebidas; ele manteve a resposta recomendada. Seis páginas, depois Continuar. A construção começou na hora. ## Passo três: acompanhe a criação A conversa mostra cada etapa conforme ela acontece, como **Planning the site and its pictures**, **Designing and building**, **Verifying build** e **Publishing**. A primeira versão leva alguns minutos. Você pode sair da página enquanto ela roda; a construção continua e o resultado estará esperando quando você voltar. [Acompanhar uma construção](https://briks.dev/pt-br/docs/watching-a-build) explica cada etapa. Quando o site é publicado, a prévia é preenchida e o rótulo acima dela muda para **Live preview**. Os botões acima da prévia permitem ver o site nas larguras de desktop, tablet e celular, recarregá-lo, abri-lo em tela cheia ou em uma nova aba no endereço próprio, para você navegar por todas as páginas como um visitante. Mudou de ideia no meio da criação? **Stop** encerra uma construção em andamento antes de publicar, então o site continua como estava. Você paga apenas pelo trabalho feito até a parada. Se uma construção aguarda créditos Em sites seguintes, ou em um plano pago, uma construção cujo restante costuma levar mais créditos do que você tem para depois de planejada. A conversa diz **Waiting for credits**, com a estimativa e o que você tem, e o plano é mantido. Pressione **Get credits** e depois **Resume building** quando os tiver; ela nunca continua sozinha. Veja [créditos e planos](https://briks.dev/pt-br/docs/credits-and-plans). ## Passo quatro: abra a prévia A primeira publicação é uma prévia em um endereço formado a partir do nome do projeto, aqui `larder-lane.briks.live`. Se esse nome já estiver em uso, alguns caracteres são adicionados ao final. Um Owner ou Admin pode alterá-lo depois; veja [o endereço do seu site](https://briks.dev/pt-br/docs/site-address). Uma prévia é um site real e funcionando, que qualquer pessoa com o endereço pode abrir. Ela difere da produção em dois pontos: os mecanismos de busca são instruídos a ignorá-la, e as mensagens enviadas pelos formulários ficam guardadas no estúdio, mas não são enviadas por e-mail para você. - Leia todas as páginas no seu próprio celular, não só no painel de prévia. - Abra o menu e confirme que cada página que você marcou está lá. - Envie uma pré-encomenda de teste pelo formulário e depois encontre-a em **Forms** do projeto. Onde 1. Projects 2. Larder Lane 3. Settings 4. Forms ## Passo cinco: faça uma mudança Sam percebe que o horário de funcionamento está baixo demais na página Visit us, e que a foto da página inicial mostra croissants, quando ele é conhecido pelo pão de fermentação natural. Ele escreve uma mensagem na caixa abaixo da conversa, a que diz 'Change the hero, add a page, adjust the colours…'. 1. Escreva a alteração Onde: Studio Diga o que mudar e onde, em palavras simples. Uma mensagem pode reunir várias mudanças relacionadas, com até 6.000 caracteres e até seis imagens ou vídeos anexados. 2. Decida com base em uma verificação Onde: Studio Abaixo da caixa, **Check the site after this change** verifica o site publicado em quatro tamanhos de tela e conserta o que aparece quebrado. Isso acrescenta alguns minutos e alguns créditos, então deixe desativado em mudanças pequenas como esta. 3. Enviar Onde: Studio Aperte o botão de envio, **Send**. Uma alteração reserva 5 créditos enquanto é executada. Se uma criação já estiver em andamento, o botão vira **Queue**: a mensagem espera e é executada quando essa criação terminar. A mudança da Sam > Em Visit us, coloque o horário de funcionamento no topo, em letras grandes: quarta a sábado, das 8h às 14h. Na página inicial, troque a foto grande por um close de pães de fermentação natural sobre uma tábua de madeira. O Briks criou a alteração e a publicou no mesmo endereço, e a prévia foi recarregada. A versão anterior ficou nas versões do projeto, caso Sam quisesse recuperá-la. Dica Se você digitar uma pergunta em vez de uma alteração, como 'quais páginas têm formulário?', a resposta vem na conversa, sem construção e sem reter nada. Veja [fazer perguntas](https://briks.dev/pt-br/docs/asking-questions) e [fazer alterações](https://briks.dev/pt-br/docs/making-changes). ## Passo seis: publique em produção A produção torna o site totalmente público: os mecanismos de busca podem listá-lo, e as mensagens dos formulários chegam por e-mail para você. 1. Clique em Publish Onde: Top bar Depois que um site é publicado, a barra superior mostra **Preview** e um botão **Publish**. Aperte-o. 2. Leia a caixa de diálogo Onde: Publish to production Ele explica o que muda. O Briks verifica o site antes, incluindo os links, e se algo precisar de correção, nada muda e o estúdio diz o que é. 3. Confirmar Onde: Publish to production Pressione **Publish to production**. Quando terminar, o botão na barra superior mostra **In production**. Publicar em produção e voltar com **Back to preview** não consomem créditos. Quando o site está em produção, cada alteração que você envia também é publicada lá. Mais em [publicar em produção](https://briks.dev/pt-br/docs/publish-to-production). ## Passo sete: seu próprio domínio No plano Free, o site fica no endereço `briks.live`, que também funciona em produção. Conectar um domínio próprio, como `larderlane.co.uk`, começa no plano Starter. Onde 1. Projects 2. Larder Lane 3. Settings 4. Domain Ali você digita o domínio em **Your domain** e clica em **Connect domain**. Depois adiciona três registros na empresa onde comprou o domínio. Registros são configurações curtas que dizem à internet para onde seu domínio aponta: aqui um registro A, um CNAME para `www` apontando para `edge.briks.live` e um registro TXT chamado `_briks` que prova que o domínio é seu. O Briks os verifica de novo a cada 2 minutos e emite o certificado de segurança para você. [Conecte seu domínio](https://briks.dev/pt-br/docs/custom-domains) explica passo a passo. ## Se algo der errado ### A criação falhou. Fui cobrado? Não. Uma solicitação que falha não é cobrada, e a reserva volta ao seu saldo. O projeto mostra **Needs attention**; leia a última mensagem da conversa e envie sua próxima mensagem para continuar. ### Não tenho créditos suficientes para uma mudança. O estúdio diz o que a alteração envolve e qual é o seu saldo, e nada é iniciado. Uma alteração que adiciona páginas também pode ser recusada quando costuma custar mais do que você tem, com a estimativa. Seu site continua no ar. Um Owner pode mudar para um plano com mais créditos pela janela que se abre, ou em **Billing**. Veja [créditos e planos](https://briks.dev/pt-br/docs/credits-and-plans). ### Posso criar um segundo site no Free? Não. O plano Free inclui 1 projeto. O Pro e os superiores incluem mais; veja a tabela de planos em [créditos e planos](https://briks.dev/pt-br/docs/credits-and-plans). ### Outra pessoa deve ver antes de ir ao ar. Envie a eles o endereço da prévia. Eles não precisam de conta. Veja [como compartilhar uma prévia](https://briks.dev/pt-br/docs/sharing-a-preview). ## Leia a seguir - [Construindo **Comece um novo projeto** Cada escolha na página Novo projeto, passo a passo: tipo de projeto, briefing, um site de que você gosta, marca, imagens, opções de criação e o custo inicial.](https://briks.dev/pt-br/docs/new-project) - [Construindo **Como escrever um bom briefing** O que colocar em um briefing para a primeira versão acertar: negócio, público, páginas, ação principal, fatos e tom, com seis exemplos de antes e depois.](https://briks.dev/pt-br/docs/writing-a-brief) - [Trabalhando em um projeto **Como fazer alterações no site** Como mudar seu site escrevendo ao Briks: o que dizer, imagens, o que uma mudança inclui e custa, páginas internas, pedidos na fila e como corrigir um erro.](https://briks.dev/pt-br/docs/making-changes) - [Publicação e domínios **Publicar em produção** Leve um site do Briks da prévia à produção: o que a verificação de lançamento lê, o que bloqueia um lançamento, como corrigir cada item e como voltar à prévia.](https://briks.dev/pt-br/docs/publish-to-production) Ainda travado? Escreva para [hello@briks.dev](mailto:hello@briks.dev) com o nome do seu projeto e o que você esperava ver. Uma captura de tela ajuda.