> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Publique o site

> Publique um site de abertura de cafeteria e compartilhe um link público para as pessoas descobrirem.

export const PublishSiteCover = () => <div className="chat-mkt" role="img" aria-label="A frosted publishing panel with a public link for a finished site" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "min(620px, 80%)",
  minHeight: "inherit",
  placeItems: "center",
  margin: "auto"
}}>
        <div style={{
  display: "grid",
  width: "100%",
  gap: "clamp(14px, 2.4vw, 22px)",
  padding: "clamp(18px, 3vw, 28px)",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: 24,
  background: "linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,.13))",
  boxShadow: "0 20px 40px rgba(55,27,18,.22)",
  backdropFilter: "blur(7px)"
}}>
          <div style={{
  display: "flex",
  justifyContent: "space-between",
  gap: 10
}}>
            <span style={{
  width: "36%",
  height: 9,
  borderRadius: 99,
  background: "rgba(255,255,255,.78)"
}} />
            <span style={{
  width: 18,
  height: 18,
  border: "1px solid rgba(255,255,255,.72)",
  borderRadius: 999
}} />
          </div>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 10,
  padding: "clamp(11px, 1.8vw, 15px)",
  border: "1px solid rgba(255,255,255,.58)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)"
}}>
            <span style={{
  width: 18,
  height: 18,
  border: "2px solid rgba(255,255,255,.88)",
  borderRadius: 6,
  transform: "rotate(-45deg)"
}} />
            <span style={{
  width: "60%",
  height: 7,
  borderRadius: 99,
  background: "rgba(255,255,255,.74)"
}} />
            <span style={{
  width: 48,
  height: 22,
  marginLeft: "auto",
  borderRadius: 7,
  background: "rgba(255,255,255,.88)"
}} />
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
  gap: 7
}}>
            {[0, 1, 2, 3].map(stage => <span key={stage} style={{
  height: 8,
  borderRadius: 99,
  background: stage < 3 ? "rgba(255,255,255,.82)" : "rgba(255,255,255,.36)"
}} />)}
          </div>
        </div>
      </div>
    </div>
  </div>;

export const CoffeeShopScreenshotFrame = ({src, alt}) => <div style={{
  margin: "28px 0",
  overflow: "hidden",
  borderRadius: "24px",
  background: "radial-gradient(circle at 50% -18%, rgba(255,255,255,.82), transparent 42%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)",
  boxShadow: "0 16px 32px rgba(112,36,13,.18)"
}}>
    <div style={{
  padding: "clamp(10px, 2vw, 18px)",
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%, rgba(111,24,0,.2))"
}}>
      <a href={src} target="_blank" rel="noreferrer" aria-label={`Open ${alt} at full size`} style={{
  display: "block",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.62)",
  borderRadius: "16px",
  background: "rgba(255,255,255,.96)",
  boxShadow: "0 12px 28px rgba(55,27,18,.2)",
  cursor: "zoom-in"
}}>
        <img src={src} alt={alt} style={{
  display: "block",
  width: "100%",
  height: "auto"
}} />
      </a>
    </div>
  </div>;

<PublishSiteCover />

Você transformou a ideia de uma cafeteria em um plano de lançamento e um site
de abertura. Agora torne-o visível para as pessoas que você quer alcançar.

Antes de publicar, verifique se a história, a prévia do cardápio, a
localização e a experiência de inscrição estão prontas para um visitante de
primeira vez. A publicação cria um link público que você pode compartilhar
com a vizinhança.

## Publique o site de abertura

<Steps>
  <Step title="Escolha um domínio e a visibilidade">
    Selecione **Publish**, escolha um endereço disponível e decida quem pode
    acessar o site. Este exemplo usa um endereço público, então qualquer
    pessoa com o link pode visitá-lo.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-publish-settings.png" alt="Painel Publish do Replit com um domínio disponível para o site da cafeteria e visibilidade pública selecionada" />
  </Step>

  <Step title="Publique o site">
    Revise as configurações e, em seguida, selecione **Publish**. O Replit
    prepara o site e executa as verificações necessárias para disponibilizá-lo.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/publishing-progress.png" alt="Progresso de publicação do Replit mostrando os estágios de provisionamento, verificações de segurança, build, empacotamento e promoção" />
  </Step>

  <Step title="Compartilhe o link ao vivo">
    Quando a publicação terminar, copie o link ao vivo e compartilhe o site
    de abertura com as pessoas que você quer alcançar.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/site-is-live.png" alt="Confirmação do Replit de que o site de abertura da cafeteria está ao vivo, com um botão para copiar o link" />
  </Step>
</Steps>

Sua conversa original continua útil depois da publicação. Continue usando a
Rotina para revisar novas informações locais e volte ao site quando ele
precisar de uma atualização.

Saiba como [publicar seu aplicativo](/publish-your-app).

Você agora passou de uma ideia para pesquisa, contexto, um plano recorrente,
um site e um resultado público. Use o mesmo padrão para a próxima ideia que
você quiser transformar em algo real.