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

# サイトを公開する

> コーヒーショップのオープニングサイトを公開し、公開リンクを共有して人々に見つけてもらいましょう。

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

コーヒーショップのアイデアを、ローンチプランとオープニングサイトへと形にしてきました。次は、
届けたい人たちの目に触れるようにしましょう。

公開する前に、ストーリー、メニューのプレビュー、所在地、サインアップ体験が、初めて訪れる人に
とって十分な状態か確認しましょう。公開すると、近隣の人たちと共有できる公開リンクが作成されます。

## オープニングサイトを公開する

<Steps>
  <Step title="ドメインと公開範囲を選択する">
    **Publish** を選択し、利用可能なアドレスを選び、サイトに誰がアクセスできるかを決定します。
    この例では、リンクを持つ誰もが訪問できるように公開アドレスを使用しています。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/choose-publish-settings.png" alt="利用可能なコーヒーショップサイトのドメインと公開設定が選択された Replit の Publish パネル" />
  </Step>

  <Step title="サイトを公開する">
    設定を確認したら、**Publish** を選択します。Replit がサイトを準備し、公開に必要な
    チェックを実行します。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/publishing-progress.png" alt="プロビジョニング、セキュリティチェック、ビルド、バンドル、プロモートの各段階を示す Replit の公開進行状況" />
  </Step>

  <Step title="公開リンクを共有する">
    公開が完了したら、公開リンクをコピーして、届けたい人たちにオープニングサイトを
    共有しましょう。

    <CoffeeShopScreenshotFrame src="/images/coffee-shop-launch/site-is-live.png" alt="コーヒーショップのオープニングサイトが公開されたことを示す Replit の確認画面とリンクをコピーするボタン" />
  </Step>
</Steps>

公開後も、最初の会話は引き続き役立ちます。ルーティンを使って新しい地域情報を確認し続け、
サイトの更新が必要になったら戻ってきましょう。

[アプリを公開する方法](/publish-your-app)について学びましょう。

ここまでで、アイデアからリサーチ、コンテキスト、定期的なプラン、サイト、そして公開された
成果へと進んできました。次に実現したいアイデアにも、同じパターンを活用してください。
