> ## 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.

# Publiez le site

> Publiez un site d'ouverture de café et partagez un lien public pour que les gens le découvrent.

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 />

Vous avez transformé une idée de café en un plan de lancement et un site
d'ouverture. Rendez-le maintenant visible aux personnes que vous voulez
atteindre.

Avant de publier, vérifiez que l'histoire, l'aperçu du menu, l'emplacement,
et l'expérience d'inscription sont prêts pour un premier visiteur. La
publication crée un lien public que vous pouvez partager avec le quartier.

## Publiez le site d'ouverture

<Steps>
  <Step title="Choisissez un domaine et une visibilité">
    Sélectionnez **Publier**, choisissez une adresse disponible, et décidez
    qui peut accéder au site. Cet exemple utilise une adresse publique afin
    que toute personne disposant du lien puisse le visiter.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-publish-settings.png" alt="Panneau Publier de Replit avec un domaine disponible pour le site du café et la visibilité publique sélectionnée" />
  </Step>

  <Step title="Publiez le site">
    Passez en revue les paramètres, puis sélectionnez **Publier**. Replit
    prépare le site et exécute les vérifications nécessaires pour le rendre
    disponible.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/publishing-progress.png" alt="Progression de la publication Replit montrant les étapes de provisionnement, de vérifications de sécurité, de build, de bundle, et de promotion" />
  </Step>

  <Step title="Partagez le lien en direct">
    Une fois la publication terminée, copiez le lien en direct et partagez le
    site d'ouverture avec les personnes que vous voulez atteindre.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/site-is-live.png" alt="Confirmation de Replit que le site d'ouverture du café est en ligne, avec un bouton pour copier le lien" />
  </Step>
</Steps>

Votre conversation d'origine reste utile après la publication. Continuez à
utiliser la Routine pour examiner les nouvelles informations locales, puis
revenez au site quand il a besoin d'une mise à jour.

Découvrez comment [publier votre application](/publish-your-app).

Vous êtes maintenant passé d'une idée à une recherche, un contexte, un plan
récurrent, un site, et un résultat public. Utilisez le même schéma pour la
prochaine idée que vous voulez transformer en quelque chose de réel.