コードペンからライブサイトへ3つの簡単なステップで：EdgeOne Pagesでデプロイ
Ethan Mercer
すべての開発者は、この感覚を知っています：CodePenで素晴らしいものを作ったばかり—おそらく見事なCSSアニメーション、インタラクティブなJavaScriptウィジェット、または美しいランディングページのプロトタイプです。今、それを世界と共有したいと思っています。単なるPenとしてではなく、実際のスタンドアロンウェブサイトとして。
従来のデプロイメントでは、Gitとの格闘、ビルドツールの設定、または複雑なホスティングプラットフォームのナビゲーションが必要でした。しかし、EdgeOne Pagesを使えば、CodePenから本番環境のサイトまでわずか30秒で実現できます。
30秒プレビュー
詳細に入る前に、このプロセスがどれほど簡単かを見てみましょう。全体のワークフローはたった3つのアクションで構成されています：エクスポート → ドラッグ → デプロイ。
それだけです。ターミナルコマンド、設定ファイル、アカウント手間は一切ありません。この段落を読む時間で、すでに最初のサイトをデプロイできていたかもしれません。
私たちは登録不要の完全無料サービスを提供しており、すぐにエンタープライズグレードのインフラストラクチャによってサポートされる強力な機能を体験でき、使用制限にすぐに達する心配なく無料利用枠を楽しむことができます。
公開するための3つのステップ
ステップ1：CodePenプロジェクトをエクスポートする
まず、あなたのCodePen作品に移動します。エディターの右下隅に「Export」ボタンがあります。それをクリックして、ドロップダウンメニューから「Export .zip」を選択します。
CodePenはすべてを整然としたZIPにまとめます。
重要：ダウンロード後、アーカイブを解凍して distフォルダに入り、index.htmlがルートレベルにあることを確認してください。EdgeOne Pagesは最上位フォルダで見つかるHTMLファイルを自動的に提供するため、適切なファイル構造が重要です。
ステップ2：ドラッグ＆ドロップの魔法
ブラウザを開き、Pages Dropにアクセスします。大きなドロップゾーンがある、シンプルで直感的なインターフェースが表示されます。
「dist」フォルダをドロップゾーンにドラッグするだけです。プラットフォームは即座に：
- ファイルをスキャンする
- プレビューサムネイルを生成する
- プロジェクト構造を検証する
- デプロイメントの準備をする
視覚的なフィードバックは即座に得られます—ファイルがリアルタイムで処理されるのを見ることができ、すべてが正しくできます。
ステップ3：ワンクリックデプロイ
ここで魔法が起こります。2つのオプションがあります：
- クイックデプロイ：自動生成されたURLで「Deploy」ボタンをクリックするだけ
- カスタムサブドメイン：デプロイする前に「my-awesome-pen」のような記憶に残る名前を入力する
「Deploy」をクリックすると、約10秒以内にライブURLが表示されます：
https://my-awesome-pen.edgeone.app
おめでとうございます！あなたのサイトはインターネット上でライブになり、HTTPSで安全に保護され、CDNを通じてグローバルに配信され、誰とでも共有。
結論
わずか30秒で、どんなCodePen作品も本番環境対応のウェブサイトに変えることができます。エンタープライズグレードのホスティング、グローバルCDN配信、自動HTTPS対応—すべて無料です。ターミナルコマンド、設定ファイル、クレジットカードは一切不要です。経験豊富な開発者で摩擦のないデプロイオプションを探している方でも、CodePenを超えて最初のステップを踏み出す初心者でも、EdgeOne Pagesはあなたの創造性と世界の間の障壁を取り除きます。デプロイする準備はできましたか？Pages Dropにアクセスして、あなたの作品を共有する方法がどれほど簡単かをご自身でお確かめください。