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

# Publish the site

> Publish a coffee shop opening site and share a public link for people to discover it.

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

You have turned a coffee-shop idea into a launch plan and an opening site. Now
make it visible to the people you want to reach.

Before you publish, check that the story, menu preview, location, and sign-up
experience are ready for a first-time visitor. Publishing creates a public link
you can share with the neighborhood.

## Publish the opening site

<Steps>
  <Step title="Choose a domain and visibility">
    Select **Publish**, choose an available address, and decide who can access
    the site. This example uses a public address so anyone with the link can
    visit it.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-publish-settings.png" alt="Replit Publish panel with an available coffee shop site domain and public visibility selected" />
  </Step>

  <Step title="Publish the site">
    Review the settings, then select **Publish**. Replit prepares the site and
    runs the checks needed to make it available.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/publishing-progress.png" alt="Replit publishing progress showing provision, security checks, build, bundle, and promote stages" />
  </Step>

  <Step title="Share the live link">
    When publishing finishes, copy the live link and share the opening site
    with the people you want to reach.

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/site-is-live.png" alt="Replit confirmation that the coffee shop opening site is live with a copy link button" />
  </Step>
</Steps>

Your original conversation remains useful after publishing. Continue using the
Routine to review new local information, then return to the site when it needs
an update.

Learn how to [publish your app](/publish-your-app).

You have now moved from an idea to research, context, a recurring plan, a site,
and a public result. Use the same pattern for the next idea you want to turn
into something real.