Creating Pages and URLs

In Essepage, website URLs are defined by folders and page files inside the /public folder.

The path of the folder containing a page file becomes the URL of the corresponding web page. This allows you to see the entire page structure of your website in the file explorer without creating a separate routing configuration file.

For example, consider the following file structure:

/public
├── +page.essepage
├── about
│   └── +page.essepage
└── contact
    └── +page.essepage

Each page corresponds to the following URL:

The /public Folder: Where Your Website Begins

Web pages that visitors can access are organized around the project’s /public folder.

The default homepage file is:

/public/+page.essepage

This file is the homepage displayed when someone visits the project’s default site URL.

For example, if the project’s default site URL is:

https://espg.dev/my-website

The homepage URL is also:

https://espg.dev/my-website

Neither /public nor +page.essepage appears in the URL.

The /public folder is the starting point of your website, and its folder structure determines page URLs.

The Default Page File: +page.essepage

To create a standard web page in Essepage, use a file named +page.essepage.

+page.essepage

When creating a new page file, enter +page as the file name and press Enter. The editor automatically adds the .essepage extension.

The completed file name is:

+page.essepage

The name +page.essepage does not appear in the URL. Instead, the path of the folder containing the file becomes the URL.

/public/about/+page.essepage

In this example, the about folder determines the URL:

/about

To change the page URL, change the name or location of the folder containing +page.essepage, rather than renaming the page file itself.

+page.essepage identifies a page, while the folder name determines its URL.

Creating a New Page

Let’s create a new page in addition to the homepage.

Suppose you want to create an About page at:

/about

You need the following file structure:

/public
├── +page.essepage
└── about
    └── +page.essepage

Creating a Folder

1. Right-click the /public folder in the file explorer.
2. Select New Folder.
3. Enter about as the folder name and press Enter.

The following folder is now created inside /public:

/public/about

Creating a Page File

1. Right-click the new /public/about folder.
2. Select New File.
3. Enter +page as the file name and press Enter.
4. Open the generated +page.essepage file.
5. Add the following content:

<h1>About Us</h1>

<p>Learn more about our website.</p>

6. Save the file.

The completed file path is:

/public/about/+page.essepage

Once this page is published, it can be accessed at the /about path of your site.

Publishing and Checking the Page

The new +page.essepage file has not been published yet. A new page must be published before you can open it in Preview or view it on the public site.

1. Make sure the new +page.essepage file is saved.
2. Right-click the file.
3. Select Publish.
4. When publishing is complete, right-click the file again.
5. Select Preview to check the page in the development environment.
6. Select Open Page to check the published page.

To learn more about saving and publishing, see Save, Publish, and Apply.

Folder Structure and URLs

When you create multiple levels of folders under /public, the URL follows the same order.

For example, suppose you create a page for new products using the following structure:

/public
└── products
    └── new
        └── +page.essepage

The page URL is:

/products/new

You can add more pages using the same structure.

/public
├── +page.essepage
├── about
│   └── +page.essepage
├── products
│   ├── +page.essepage
│   ├── new
│   │   └── +page.essepage
│   └── popular
│       └── +page.essepage
└── contact
    └── +page.essepage

Each page corresponds to the following URL:

By looking at the folder structure in the file explorer, you can see which pages and URLs exist on the site.

Naming Files and Folders

You can choose file and folder names freely as long as they follow the naming rules.

Because page folder names become part of the URL, it is best to use short, descriptive names that reflect the page content.

Unicode characters such as Korean characters, Chinese characters, Japanese characters, and emoji can also be used in file and folder names.

For detailed naming rules, see File Naming Rules.

Renaming Files and Folders

You can rename files and folders in the file explorer.

1. Right-click the file or folder you want to rename.
2. Select Rename.
3. Enter the new name and press Enter.

Renaming a folder that contains a page file also changes the URL of that page.

For example, consider the following page:

/public/about/+page.essepage

If you rename the about folder to company, the page path changes to:

/company

Moving Files and Folders

You can move files and folders into another folder by dragging and dropping them.

If you move a page file or the folder containing it and its path changes, the page URL also changes.

For example, consider the following page:

/public/about/+page.essepage

If you move the about folder into a company folder, the file structure becomes:

/public/company/about/+page.essepage

The page path also changes to:

/company/about

If you rename or move the folder of a published page, check that the page opens correctly at its new URL. You must also update menus and links that use the previous URL.

Deleting Files and Folders

You can delete files and folders that are no longer needed from the file explorer.

1. Right-click the file or folder you want to delete.
2. Select Delete.

Before deleting a file or folder, check whether:

• It is used by a page on the public site
• Other pages link to it
• A layout or component uses it
• A CSS, JavaScript, or image file is connected to a page
• The folder contains any other files you still need

Deleting a folder also deletes all of its subfolders and files. Check the target carefully before deleting it.

Renaming or moving a folder that contains a published page changes its URL. Deleting a page file or a folder containing a page makes the previous URL unavailable.

When a Page Cannot Be Found

If a new page does not open or its URL is different from what you expected, check the following:

• The page file is inside the /public folder
• The file name is exactly +page.essepage
• The page file is inside the intended folder
• The page has been published for the first time
• The page is not hidden from the public site
• The folder name entered in the browser matches the actual folder name
• The capitalization of file and folder names matches

For example, if the published site URL is https://espg.dev/my-website, the URL for the following file:

/public/products/new/+page.essepage

Is:

https://espg.dev/my-website/products/new

Do not include /public or +page.essepage in the URL.

Next Steps

Now that you understand how to create pages and URLs, continue with the following guides:

• Learn about the contents and basic structure of a page file: Page Structure
• Connect pages with menus and links: Navigation and Links
• Create pages that use part of the URL as a value: Parameter Folders
• Create a page for addresses that do not exist: Custom 404 Pages
• Review the detailed rules for file and folder names: File Naming Rules