ローカルサーバーの起動

Page content

それはよくある現象で、原因はほぼこれです👇

👉 ローカルで index.html を直接開いている（file://）から

🎯 結論

Webstudioのエクスポートは
👉 **「サーバーで配信される前提」**で作られている

なので
👉 直接開くと崩れる

❗ 主な原因

① パスの問題（これが一番多い）

HTMLの中👇

<script src="/assets/main.js"></script>

👉 / は本来

  • https://example.com/assets/... を意味する

でもローカルだと👇

  • file:///assets/... を見に行く → 存在しない

👉 JS / CSSが読み込めない → 崩れる

② JavaScriptが動かない

  • 一部ブラウザ制限（CORSなど）

  • module読み込み失敗

👉 レイアウト崩壊

③ ルーティング前提（SPA）

  • 内部リンクが /about などになっている

  • file://では動かない

④ 画像・フォントのパス

  • 絶対パス指定

  • CDN前提

🚀 解決方法（これだけやればOK）

✅ 方法① ローカルサーバーで起動（推奨）

npx serve

または

npx http-server

👉 これで👇

http://localhost:3000

からアクセス

👉 完全に正常表示される

✅ 方法② Cloudflareにアップ

👉 Cloudflare Pagesにアップ

→ 本番環境と同じ挙動

✅ 方法③ VSCode使うなら

  • Live Server拡張

👉 右クリック → Open with Live Server

💡 なぜこうなるのか（本質）

最近のフロントエンドは👇

  • 絶対パス前提

  • CDN前提

  • サーバー前提

👉 file://は想定外

⚠️ よくある誤解

「HTML壊れてる？」

👉 ❌違う
👉 ✅ 開き方が違うだけ

🎯 まとめ

👉 ダメな開き方

  • index.htmlをダブルクリック

👉 正しい開き方

  • ローカルサーバー or Cloudflare

OK、最短で“今あるファイルをそのまま公開”する方法だけに絞ります👇
（Gitも設定も不要・30秒〜1分）

🚀 一瞬で公開する方法

👉 Cloudflare **Pagesの「Upload assets」**を使う

🧩 手順（コピペでOK）

① Cloudflareにログイン

👉 ダッシュボードへ

② Pagesを開く

  • 左メニュー → Workers & Pages

  • 「Pages」タブ

③ プロジェクト作成

👉 Create application（作成）

④ 「Upload assets」を選択

👉 これが最速ルート

（Git連携じゃない方）

⑤ ファイルをアップロード

👉 Webstudioで出力したフォルダ or ZIPをそのままドラッグ

  • index.html

  • assets/

  • その他全部

👉 フォルダ丸ごとが重要

⑥ デプロイ

👉 「Deploy」クリック

🎉 完了

  • 数秒でURL発行
    例：
    https://xxxx.pages.dev

👉 すぐ見れる

⚠️ ここだけ注意

❗ フォルダ構成

NG👇

dist/
  index.html

👉 distごとアップするとズレる

OK👇

index.html
assets/

👉 中身をアップ

💡 コツ（成功率100%）

  • ZIPでもOK

  • ルートにindex.htmlがある状態にする

🔥 この方法の強さ

  • Git不要

  • CLI不要

  • 設定ゼロ

  • 最速公開

👉 検証・試作に最強

🚀 次のステップ（必要なら）

  • 独自ドメイン設定

  • 自動デプロイ（Git連携）

  • Astroとの統合

👉 Webstudioで作ったデザインを活かしつつ、Astro + Cloudflareで運用する方法を最短で整理します。

🎯 結論（先に）

👉 やることはこれだけ

  1. Webstudio でHTMLを書き出す

  2. Astro に組み込む

  3. Cloudflare にデプロイ

👉 ＝デザインはWebstudio、運用はAstro

🚀 全体構成

Webstudio（デザイン）
↓
Astro（ページ管理・ルーティング）
↓
Cloudflare（公開）

🧩 STEP1：Webstudioから書き出し

  • 「Export」でZIPダウンロード

  • 中身👇

index.html
assets/

🧩 STEP2：Astroに取り込む

① プロジェクト作成

npm create astro@latest
cd プロジェクト名
npm install

② ファイル配置

HTML → Astroへ

src/pages/index.astro

中身👇（変換）

---
---

<html>
  <body>
    <!-- WebstudioのHTML貼り付け -->
  </body>
</html>

③ assets配置

public/assets/

👉 Webstudioのassetsをここにコピー

④ パス修正（重要）

WebstudioのHTML👇

<link href="/assets/style.css">

👉 そのままでOK（Astroはpublic配信）

🧩 STEP3：動作確認

npm run dev

👉 http://localhost:4321

🧩 STEP4：Cloudflareにデプロイ

方法①（おすすめ）

👉 GitHub連携 → Pages

方法②（最速）

👉 Pages「Upload assets」

⚡ 応用（ここから本番）

CMS連携

👉 Storyblok

npm install @storyblok/astro

👉 Webstudioの静的部分＋CMS動的化

コンポーネント化

HTMLを分割👇

Header.astro
Footer.astro

👉 再利用可能

💡 この構成の強み

  • デザイン：Webstudio（ノーコード）

  • 開発：Astro（高速）

  • 配信：Cloudflare（爆速）

👉 実務でかなり強い構成

⚠️ ハマりポイント

❌ そのまま貼ると崩れる

原因👇

  • JS依存

  • CSSパス

👉 assets確認

❌ script動かない

<script type="module">

👉 Astroの制約あり

🎯 まとめ

👉 一番シンプルな統合

  • Webstudio → HTML書き出し

  • Astroに貼る

  • Cloudflareにデプロイ

👉 これでOK