Build a Personal Website

In this tutorial, you will build a personal website with Home, About, and Projects pages.

You will create multiple pages, connect them with a navigation menu, and use a layout to manage the header and footer shared by every page.

The website you build in this tutorial will include:

A Home page
An About page that introduces you
A Projects page that showcases your work
A navigation menu connecting all three pages
A shared header and footer used across the entire site

Through this process, you will learn how files are connected to URLs in Essepage and how to manage shared code with a layout.

Full Code

When you finish this tutorial, you will have a page like the one below.

Before you begin, take a quick look at the completed page and the full source code. You do not need to understand all of the code yet. As you write and modify the code step by step, you will learn what each part does.

Before You Begin

When you create the project, the following homepage file is generated:

/public
└── +page.essepage

/public/+page.essepage is the default homepage of the website.

From the project dashboard, select Code Editor to open the editor.

1. Understand the Website’s File Structure

When you complete this tutorial, the /public folder will have the following structure:

/public
├── +layout.essepage
├── +page.essepage
├── about
│   └── +page.essepage
└── projects
    └── +page.essepage

Each page file corresponds to the following URL:

/public/+page.essepage → /
/public/about/+page.essepage → /about
/public/projects/+page.essepage → /projects

In Essepage, you can create a folder inside /public and place a +page.essepage file in it. The page URL is then generated from the folder name.

This allows you to build a multi-page website using files and folders without writing a separate routing configuration.

2. Create a Shared Layout

The Home, About, and Projects pages will all use the same navigation menu and footer.

If you repeat the same code on every page, you must edit every file whenever the menu changes. Essepage lets you place these shared parts in a Layout.

Create the following file inside the /public folder in the file explorer:

/public/+layout.essepage

+layout.essepage is a special file that applies a layout to pages in the same folder and all of its subfolders.

Paste the following code:

<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>

Save the file.

Windows or Linux: Ctrl + S
macOS: Cmd + S

This layout contains the navigation menu, styles, and footer shared by every page.

The Role of `<essepage-slot>`

The most important part of the layout is the following code:

<essepage-slot></essepage-slot>

<essepage-slot> specifies where the content of each page will appear.

For example, the Home page code is inserted at the position of <essepage-slot>, while the header and footer outside it are displayed on every page.

Shared header
    +
Current page content
    +
Shared footer

A layout file is not a page that visitors can open directly, so it does not need to be published separately. Changes to the layout are included when you publish or apply pages that use it.

3. Create the Home Page

Now you will write the content of each page that appears inside the layout.

Open the following file in the file explorer:

/public/+page.essepage

Delete the existing code and paste the following:

<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>

Save the file. The Home page will appear in the preview on the right.

Because the navigation menu and footer are already defined in +layout.essepage, the Home page file only needs to contain the content unique to this page.

4. Create the About Page

Next, create a page that introduces you.

Create the following folder inside /public:

about

Create the following file inside the about folder:

+page.essepage

The completed file path is:

/public/about/+page.essepage

Open the file and paste the following code:

<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>

Save the file.

This file becomes the page at the following URL:

/about

The About link in the layout also points to /about, so selecting it opens this page.

5. Create the Projects Page

Now add a page that showcases your work.

Create the following folder inside /public:

projects

Create a +page.essepage file inside the projects folder:

/public/projects/+page.essepage

Open the file and paste the following code:

<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>

Save the file.

This file becomes the page at the following URL:

/projects

Selecting Projects in the layout opens this page.

6. Publish the New Pages

The homepage created with the project is already published, but the new About and Projects pages have not been published yet.

Before you can open a new page on the website, you must Publish it.

Publish each of the following files:

/public/about/+page.essepage
/public/projects/+page.essepage

To publish each file:

Right-click the +page.essepage file in the file explorer.
Select Publish.
Repeat the same process for the other page file.

Publish is used when making a new page public for the first time. After the page has been published, the menu changes to Apply Changes when you edit it later.

Now check that the navigation menu correctly connects all three pages.

Select the Home icon at the top of the preview pane on the right to open the homepage.

Check the following in order:

Confirm that Hello! I'm developer John Doe. appears on the Home page.
Select About from the navigation menu.
Confirm that the URL changes to /about and the About page appears.
Select Projects from the navigation menu.
Confirm that the URL changes to /projects and the Projects page appears.
Confirm that the header and footer remain the same as you move between pages.

The navigation menu and footer come from the layout, while only the content in the middle changes for each page.

8. Apply All Changes

If every page appears correctly in the preview, apply the saved changes to the public site.

In this tutorial, you changed not only the homepage but also the layout used by multiple pages. When you need to apply changes to a shared layout across several pages, Apply All is convenient.

Select Apply All at the top of the editor.

Apply All reapplies the saved changes to every page that is currently published.

After the process is complete, you can open the public website using any of the following methods:

Select Page → Open Homepage in the editor.
Open the Site URL from the project dashboard.
Select Open Page from an individual page file.

On the public website, use the navigation menu and confirm that the Home, About, and Projects pages all open correctly.

It may take up to one minute for the cache to update after applying changes. If the public page still shows the previous content, wait a moment and refresh it.

Your Website Is Ready

So far, you have:

Created Home, About, and Projects pages
Created URLs using folders and page files
Connected multiple pages with a navigation menu
Created a shared header and footer with a layout
Used <essepage-slot> to specify where page content appears
Published newly created pages
Applied changes to multiple pages with Apply All

In this tutorial, you used a layout to separate the content unique to each page from the parts shared across the website. This structure lets you manage the navigation menu and footer in one place, even as the number of pages grows.

Now replace the name, introduction, and project information in the example with your own. You can connect more pages by adding menu items and creating new folders and page files.

Next Steps

After completing your personal website, continue with one of the following documents:

To build a website for a company or store: Build a Small Business Website
To learn more about how files are connected to URLs: Pages and URLs
To learn more about layouts and reusable elements: Layouts and Components
To learn how to publish and manage pages: Publishing and Site Management

Languages

On this page

Title

Full Code

Before You Begin

1. Understand the Website’s File Structure

2. Create a Shared Layout

The Role of `<essepage-slot>`

3. Create the Home Page

4. Create the About Page

5. Create the Projects Page

6. Publish the New Pages

7. Test Page Navigation in the Preview

8. Apply All Changes

Your Website Is Ready

Next Steps

On this page

Languages

On this page

Title

Build a Personal Website

Full Code

Before You Begin

1. Understand the Website’s File Structure

2. Create a Shared Layout

The Role of <essepage-slot>

3. Create the Home Page

4. Create the About Page

5. Create the Projects Page

6. Publish the New Pages

7. Test Page Navigation in the Preview

8. Apply All Changes

Your Website Is Ready

Next Steps

On this page

The Role of `<essepage-slot>`