Essepage（エスページ）を使って、いかにスピーディにWebサイトを構築・公開できるかを確認してみましょう。
Step 1. 準備
プロジェクトを始めるために、まずはアカウントにログインします。
アカウントをお持ちでない場合は、先に新規登録を行ってください。
Step 2. プロジェクトの作成
Essepageでは、テンプレートを使用して簡単かつ迅速にプロジェクトを開始できます。
- テンプレートの選択
ログイン後、[新規プロジェクト] ボタンをクリックし、目的に合った基本テンプレートを選択します。
- プロジェクト情報の入力
プロジェクトの「タイトル」と、WebサイトのURLとして使用される「固有のプロジェクトコード」を入力し、[プロジェクトを作成] をクリックします。
Step 3. ダッシュボードの確認
プロジェクトが作成されると、ダッシュボードに移動します。ここでは以下の2点を確認してください。
- サイトURL: プロジェクト作成と同時に生成された、実際のWebサイトのURLです。
- コードエディタ: Essepage内蔵の開発環境（エディタ）を起動します。
Step 4. ホームページの編集
[コードエディタ] ボタンをクリックしてエディタを開き、ホームページのファイルを編集します。
- 左側のファイルエクスプローラーからホームページファイルをクリックし、ソースコードを開きます。
/public/+page.essepage- ファイルが開いたら、既存のコードをすべて削除し、以下の簡単なコードを入力してみてください。
<h1>Hello, Essepage!</h1>
<p>This is my first page.</p>
Step 5. プレビュー
ファイルを保存すると、入力したコードが実際のWebページでどのように表示されるかを、右側のプレビュー画面で即座に確認できます。
プレビューは以下の2つの方法で実行できます。
- キーボードを使用:
Cmd + S(Mac) またはCtrl + S(Windows) を押してファイルを保存すると、右側のプレビュー画面が直ちに更新されます。 - マウスを使用: 左側のファイルエクスプローラーで該当ファイルを右クリックし、[プレビュー] メニューを選択することでも確認可能です。
Step 6. 変更の適用（本番環境への反映）
プレビューで作業内容を確認したら、実際のWebサイトにパブリッシュ（デプロイ）します。
- 左側のファイルエクスプローラーで該当ファイルを右クリックし、[変更を適用] メニューをクリックして、作業内容を実際のページに反映させます。
💡 ご注意
変更を適用した後、サーバーのキャッシュが更新され、実際の画面に反映されるまで最大1分程度かかる場合があります。
Step 7. 実際のページの確認
最後に、編集した内容が実際のページに正しく反映されているか確認します。
- 左側のファイルエクスプローラーで該当ファイルを右クリックし、[ページを開く] メニューをクリックすると、別タブが開き実際のWebサイトを確認できます。
- または、サイトのURLに直接アクセスするか、すでに開いている場合はページをリロード（再読み込み）して確認することも可能です。
🎉 おめでとうございます！
最初のWebページを作成し、無事に公開することができました。Essepageの様々な機能を活用して、さらに素晴らしいWebサイトを作成してみましょう！
📺 動画ガイド
テキストよりも動画をご希望ですか？ 以下の動画から全体の流れをご確認いただけます。