クイックスタートでは、トップページを編集し、変更内容を公開サイトに適用しました。
このページでは、その過程で使用したプロジェクト、ファイルとURL、作業用バージョン、公開と変更の適用がどのようにつながっているかを説明します。
Essepageでは、プロジェクト内にファイルやフォルダーを作成し、ブラウザ上でコードを記述してWebサイトを構成します。
作成したコードは開発環境に保存されます。プレビューで結果を確認した後、公開サイトに反映できます。
全体の流れは次のとおりです。
プロジェクトを作成 → ファイルを構成 → コードを記述 → 保存してプレビュー → 公開または変更を適用
1つのプロジェクトが1つのWebサイトになります
EssepageでWebサイトを作成するときは、最初にプロジェクトを作成します。
プロジェクトの作成時に入力するプロジェクトコード（Project Code）は、標準のサイトアドレスの一部として使用されます。
たとえば、プロジェクトコードが my-first-webpage の場合、標準のサイトアドレスは次のようになります。
https://espg.dev/my-first-webpageプロジェクトには、Webサイトを構成する次のようなファイルを保存できます。
- Webページ
- レイアウト
- コンポーネント
- CSSとJavaScript
- 画像やその他のファイル
- プロジェクト設定
プロジェクトを作成すると、Webサイトを編集するためのコードエディターと、訪問者がアクセスできるサイトURLが提供されます。
publicフォルダーがWebサイトの起点になります
訪問者に提供されるWebページは、プロジェクトの /public フォルダーを中心に構成されます。
たとえば、次のようなファイル構成があるとします。
/public
├── +page.essepage
└── about
└── +page.essepage各ファイルは次のページに対応します。
/public/+page.essepage→ Webサイトのトップページ/public/about/+page.essepage→/aboutアドレスのページ
フォルダーを作成し、その中にページファイルを配置すると、フォルダー構成に基づいてWebサイトのアドレスも作成されます。
そのため、個別のルーティング設定ファイルを作成しなくても、ファイルエクスプローラーからWebサイト全体の構成を確認できます。
ページファイルの種類やURLが作成される詳しいルールについては、ページとURLを参照してください。
Web標準技術でページを作成します
Essepageでは、HTML、CSS、JavaScriptなどのWeb標準技術を使用します。
ページの内容をHTMLで記述し、CSSでデザインを追加し、必要に応じてJavaScriptで動作を実装できます。これまで使用していたCSSフレームワークやJavaScriptライブラリをプロジェクトに追加することもできます。
コードを記述してページを作成するため、シンプルなトップページから複数ページで構成されるWebサイト、外部APIを使用するWebアプリケーションまで自由に作成できます。
開発環境と公開サイトは分かれています
Essepageでは、作業を行う開発環境と訪問者に表示される公開サイトが分かれています。
コードを編集してファイルを保存すると、変更内容が開発環境の作業用バージョンに保存されます。結果はプレビューで確認できますが、保存するだけでは公開サイトは更新されません。
そのため、公開サイトを変更せずに作業内容を自由に保存して確認できます。
作業が完了したら、次の操作を使用して公開サイトに反映します。
- 公開（Publish）：まだ公開されていない新しいページを初めて公開します。
- 変更を適用（Apply Changes）：すでに公開されているページに、保存した変更内容を反映します。
プロジェクトの作成時にテンプレートから作られたトップページは、すでに公開されています。そのため、クイックスタートではトップページを編集した後に変更を適用しました。
新しいページを自分で作成した場合は、最初に公開を使用し、それ以降の編集には変更を適用を使用します。
保存は作業内容を作業用バージョンに保管し、プレビューで確認するための操作です。公開と変更を適用は、訪問者に表示される公開サイトを更新する操作です。
最初にプレビューで確認します
プレビューでは、保存した作業用バージョンがWebページとしてどのように表示されるかを確認できます。
コードを編集して保存すると、公開サイトを変更せずに次の内容を確認できます。
- ページの内容とデザイン
- リンクやユーザー操作
- 画面サイズごとの表示
- レイアウトやコンポーネントが適用された結果
- CSSとJavaScriptの変更内容
公開または変更の適用を行う前にプレビューで十分に確認することで、作業途中の内容が訪問者に表示されるのを防げます。
レイアウトとコンポーネントでコードを再利用します
Webサイトが大きくなると、ナビゲーションメニュー、ヘッダー、フッターなどの要素を複数のページで繰り返し使用するようになります。
Essepageでは、このような共通コードをレイアウトとコンポーネントに分けて管理できます。
- レイアウト（Layout）：複数のページで共有する、ページ全体の構造を定義します。
- コンポーネント（Component）：ナビゲーションメニューやボタンなど、繰り返し使用する要素を定義します。
共通コードを1か所で管理すれば、同じ内容をページごとに繰り返し修正する必要がありません。
レイアウトやコンポーネントを保存しても、それを使用している公開ページが自動的に更新されるわけではありません。公開サイトに反映するには、影響を受けるページをそれぞれ適用します。
複数の公開ページに共通の変更内容をまとめて反映する場合は、すべて適用（Apply All）を使用できます。
ホスティングサービスも含まれています
Essepageは、Webサイトの制作環境だけでなく、公開サイトを提供するためのホスティングサービスも提供します。
ページを公開したり変更内容を適用したりすると、Essepageがその内容を公開ページに反映し、訪問者が閲覧できる状態にします。
そのため、次のようなサーバー関連の作業を別途行う必要はありません。
- Webサーバーをインストールする
- デプロイ用ソフトウェアを設定する
- サーバーにファイルを直接アップロードする
- ビルドコマンドを実行する
- 別のホスティングサービスを接続する
公開されたページには、プロジェクトのサイトURLからアクセスできます。
変更を適用した直後は、キャッシュが更新されるまで最大1分程度かかる場合があります。公開ページに以前の内容が表示される場合は、少し待ってから再読み込みしてください。
Essepageの作業の流れ
EssepageでWebサイトを作成する基本的な流れは次のとおりです。
- プロジェクト内にページファイルを作成します。
- HTML、CSS、JavaScriptでページを記述します。
- ファイルを保存します。
- プレビューで結果を確認します。
- 新しいページは公開し、既存ページの変更内容は適用します。
- 公開されたページで最終結果を確認します。
この仕組みを理解すれば、ページが増えたり、レイアウトやコンポーネントを使用したりしても、同じ流れでWebサイトを管理できます。
ファイルとフォルダーでサイトを構成し、保存とプレビューで作業内容を確認してから、準備が完了したページを公開するか変更内容を適用します。
次のステップ
EssepageでWebサイトを作る基本的な流れを理解したら、次のドキュメントに進んでください。
- コードエディターの画面と機能を確認する：エディターの基本操作
- デザインされたページを作成する：ランディングページを作成する
- ファイルやフォルダーからURLが作られる仕組みを学ぶ：ページとURL
- 複数のページで共通構造を使用する：レイアウトとコンポーネント
- ページの公開と管理方法を学ぶ：公開とサイト管理