このチュートリアルでは、ホーム、自己紹介、プロジェクトの各ページで構成される個人サイトを作ります。
複数のページを作成してメニューでつなぎ、すべてのページで使用するヘッダーとフッターをレイアウトで管理します。
このチュートリアルで作るサイトには、次の内容が含まれます。
- ホームページ
- 自分について紹介するページ
- 制作物を紹介するプロジェクトページ
- 3つのページをつなぐメニュー
- すべてのページで使用する共通のヘッダーとフッター
この手順を通して、EssepageでファイルとURLがどのようにつながるのか、レイアウトを使って共通コードを管理するにはどうすればよいのかを学びます。
全体のコード
このチュートリアルを最後まで進めると、以下のようなページが完成します。
始める前に、完成したページとコード全体を軽く確認してみましょう。今の段階ですべてのコードを理解する必要はありません。コードを一つずつ書いたり修正したりしながら、それぞれの部分がどのような役割を持つのかを学びます
はじめる前に
Essepageにログインし、Blank（空のテンプレート）を選択して新しいプロジェクトを作成してください。
プロジェクトを作成すると、次のホームページファイルが生成されます。
/public
└── +page.essepage/public/+page.essepageは、Webサイトの標準ホームページです。
プロジェクトダッシュボードでコードエディター（Code Editor）を選択し、エディターを開いてください。
1. Webサイトのファイル構成を確認する
このチュートリアルを完了すると、/publicフォルダーは次のような構成になります。
/public
├── +layout.essepage
├── +page.essepage
├── about
│ └── +page.essepage
└── projects
└── +page.essepage各ページファイルは、次のURLに対応します。
/public/+page.essepage→//public/about/+page.essepage→/about/public/projects/+page.essepage→/projects
Essepageでは、/publicフォルダー内にフォルダーを作成し、その中に+page.essepageファイルを配置すると、フォルダー名に応じてページのURLが作られます。
個別のルーティング設定を書かなくても、ファイルとフォルダーを使って複数ページのWebサイトを作成できます。
2. 共通レイアウトを作る
ホーム、自己紹介、プロジェクトの各ページには、同じメニューとフッターを表示します。
すべてのページに同じコードを書くと、メニューを変更するたびにすべてのファイルを編集しなければなりません。Essepageでは、このような共通部分をレイアウト（Layout）として作成できます。
ファイルエクスプローラーの/publicフォルダー内に、次のファイルを作成してください。
/public/+layout.essepage+layout.essepageは、同じフォルダーとその配下のフォルダーにあるページへレイアウトを適用する特別なファイルです。
次のコードを貼り付けてください。
<head>
<title>My Personal Website</title>
<style>
body {
margin: 0;
padding: 0;
color: #333;
font-family: Arial, sans-serif;
}
header {
padding: 1rem;
background-color: #2c3e50;
text-align: center;
}
header a {
margin: 0 10px;
color: white;
font-weight: bold;
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
footer {
padding: 2rem;
color: #666;
font-size: 0.8rem;
text-align: center;
}
</style>
</head>
<header>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/projects">Projects</a>
</header>
<main>
<essepage-slot></essepage-slot>
</main>
<footer>
© My Personal Website. Built with Essepage.
</footer>ファイルを保存してください。
- WindowsまたはLinux：
Ctrl + S - macOS：
Cmd + S
このレイアウトには、すべてのページで使用するメニュー、スタイル、フッターが含まれています。
<essepage-slot>の役割
レイアウトで最も重要な部分は、次のコードです。
<essepage-slot></essepage-slot><essepage-slot>は、各ページの内容を表示する位置を指定します。
たとえば、ホームページのコードは<essepage-slot>の位置に入り、その外側にあるレイアウトのヘッダーとフッターは、すべてのページに共通して表示されます。
共通ヘッダー
+
現在のページの内容
+
共通フッターレイアウトファイルは、訪問者が直接開くページではないため、個別に公開する必要はありません。レイアウトの変更は、そのレイアウトを使用するページを公開または適用するときに反映されます。
3. ホームページを作る
続いて、レイアウト内に表示する各ページの内容を作成します。
ファイルエクスプローラーで、次のファイルを開いてください。
/public/+page.essepage既存のコードを削除し、次のコードを貼り付けてください。
<h1>Hello! I'm developer John Doe. 🚀</h1>
<p>Welcome to my personal website.</p>
<p>
Click the menu above to learn more about me
or explore the projects I've worked on.
</p>ファイルを保存すると、右側のプレビュー画面にホームページが表示されます。
メニューとフッターはすでに+layout.essepageに記述されているため、ホームページのファイルには、このページだけで使用する内容を記述します。
4. 自己紹介ページを作る
次に、自分について紹介するページを作ります。
/publicフォルダー内に、次のフォルダーを作成してください。
aboutaboutフォルダー内に、次のファイルを作成します。
+page.essepage完成したファイルの場所は次のとおりです。
/public/about/+page.essepageファイルを開き、次のコードを貼り付けてください。
<h1>About Me 👤</h1>
<p>
I enjoy creating interactive and visually appealing websites.
</p>
<h3>Technologies I Use</h3>
<ul>
<li>HTML / CSS</li>
<li>JavaScript</li>
<li>Essepage ❤️</li>
</ul>ファイルを保存してください。
このファイルは、次のURLのページになります。
/aboutレイアウトに記述したAboutメニューのリンク先も/aboutなので、メニューを選択するとこのページへ移動します。
5. プロジェクトページを作る
続いて、自分の制作物を紹介するページを追加します。
/publicフォルダー内に、次のフォルダーを作成してください。
projectsprojectsフォルダー内に+page.essepageファイルを作成します。
/public/projects/+page.essepageファイルを開き、次のコードを貼り付けてください。
<h1>My Projects 💻</h1>
<div
style="
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
"
>
<h2>Landing Page</h2>
<p>
This is a stylish landing page I created
while learning Essepage for the first time.
</p>
</div>
<div
style="
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
"
>
<h2>Personal Website</h2>
<p>
This is the website you’re looking at right now!
</p>
</div>ファイルを保存してください。
このファイルは、次のURLのページになります。
/projectsレイアウトのProjectsメニューを選択すると、このページへ移動します。
6. 新しいページを公開する
プロジェクトの作成時に生成されたホームページはすでに公開されていますが、新しく作成した自己紹介ページとプロジェクトページは、まだ公開されていません。
新しいページをWebサイトで開くには、最初に公開（Publish）する必要があります。
次の2つのファイルを、それぞれ公開してください。
/public/about/+page.essepage
/public/projects/+page.essepage各ファイルを公開する手順は次のとおりです。
- ファイルエクスプローラーで
+page.essepageファイルを右クリックします。 - 公開（Publish）を選択します。
- もう一方のページファイルも同じ方法で公開します。
公開（Publish）は、新しいページを初めて公開するときに使用します。公開したページを後から編集すると、メニューは変更を適用（Apply Changes）に変わります。
7. プレビューでページの移動を確認する
メニューを使って、3つのページが正しくつながっているか確認します。
右側のプレビュー画面上部にあるホームアイコンを選択し、ホームページを開いてください。
次の項目を順番に確認します。
- ホームページに
Hello! I'm developer John Doe.と表示されることを確認します。 - 上部のメニューで
Aboutを選択します。 - URLが
/aboutに変わり、自己紹介ページが表示されることを確認します。 - 上部のメニューで
Projectsを選択します。 - URLが
/projectsに変わり、プロジェクトページが表示されることを確認します。 - ページを移動しても、上部のメニューと下部のフッターが変わらないことを確認します。
メニューとフッターはレイアウトから読み込まれ、中央の内容だけが各ページの内容に切り替わります。
8. すべての変更を適用する
すべてのページがプレビューで正しく表示されたら、保存した変更を公開サイトに反映します。
今回はホームページだけでなく、複数のページで使用するレイアウトも変更しました。このように、共通レイアウトの変更を複数のページへまとめて反映するときは、すべて適用（Apply All）を使用すると便利です。
エディター上部のすべて適用（Apply All）を選択してください。
すべて適用を実行すると、保存された変更が現在公開されているすべてのページに再適用されます。
適用が完了したら、次のいずれかの方法で公開サイトを確認できます。
- エディターでページ（Page）→ ホームページを開く（Open Homepage）を選択する
- プロジェクトダッシュボードのサイトURL（Site URL）を開く
- 各ページファイルでページを開く（Open Page）を選択する
公開サイトでメニューを選択し、ホーム、自己紹介、プロジェクトの各ページが正しく開くことを確認してください。
変更を適用した後、キャッシュの更新に最大1分ほどかかる場合があります。公開ページに以前の内容が表示される場合は、少し待ってから再読み込みしてください。
Webサイトが完成しました
ここまでに、次の作業を行いました。
- ホーム、自己紹介、プロジェクトページの作成
- フォルダーとページファイルを使ったURLの構成
- メニューを使った複数ページの接続
- レイアウトを使った共通ヘッダーとフッターの作成
<essepage-slot>によるページ内容の表示位置の指定- 新しく作成したページの公開
- すべて適用による複数ページへの変更の反映
このチュートリアルでは、レイアウトを使って各ページ固有の内容とサイト全体の共通部分を分けました。この構成を使えば、ページ数が増えてもメニューとフッターを1か所で管理できます。
次は、サンプルの名前、自己紹介、プロジェクトの内容を自分の情報に置き換えてみてください。メニュー項目を追加し、新しいフォルダーとページファイルを作成すれば、さらに多くのページをつなげられます。
次のステップ
個人サイトが完成したら、次のドキュメントへ進んでください。
- 会社や店舗を紹介するサイトを作る：小規模ビジネスサイトを作る
- ファイルとURLのつながりを詳しく学ぶ：ページとURLの構成
- レイアウトと再利用できる要素について学ぶ：レイアウトとコンポーネント
- ページを公開して管理する方法を学ぶ：公開とサイト管理