Building Websites

In the Quick Start, you edited the homepage and applied your changes to the live site.

This page explains how the projects, files, URLs, working versions, and publishing actions used in that process are connected.

In Essepage, you build a website by creating files and folders inside a project and writing code directly in your browser.

The code you write is saved in the development environment. After checking the result in Preview, you can use it to update the live site.

The overall process is:

Create a project → Organize files → Write code → Save and preview → Publish or apply changes

One Project Is One Website

To build a website with Essepage, you first create a project.

The Project Code you enter when creating the project becomes part of its default website address.

For example, if the project code is my-first-webpage, the default website address is:

https://espg.dev/my-first-webpage

A project can contain the following files that make up your website:

• Webpages
• Layouts
• Components
• CSS and JavaScript
• Images and other files
• Project settings

When you create a project, Essepage provides both a code editor for editing the website and a Site URL that visitors can open.

The public Folder Is the Starting Point of Your Website

Webpages provided to visitors are organized around the /public folder in your project.

For example, consider the following file structure:

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

Each file corresponds to the following page:

• /public/+page.essepage → The homepage of the website
• /public/about/+page.essepage → The page at /about

When you create folders and place page files inside them, the website addresses are generated from the folder structure.

This allows you to understand the overall structure of your website from the file explorer without creating a separate routing configuration file.

To learn more about page file types and how URLs are generated, see Pages and URLs.

Build Pages with Web Standards

Essepage uses standard web technologies such as HTML, CSS, and JavaScript.

You can write page content in HTML, add designs with CSS, and implement interactive behavior with JavaScript when needed. You can also add CSS frameworks and JavaScript libraries that you already use.

Because you build pages by writing code, you are free to create anything from a simple homepage to a multi-page website or a web application that uses external APIs.

The Development Environment and Live Site Are Separate

Essepage keeps the development environment where you work separate from the live site that visitors see.

When you edit code and save a file, the changes are stored in the working version in the development environment. You can check the result in Preview, but saving alone does not update the live site.

This allows you to save your work and review the result freely without changing the live site.

When your work is ready, you can apply it to the live site using one of the following actions:

• Publish: Publish a new page for the first time.
• Apply Changes: Apply saved changes to a page that has already been published.

The homepage created from a template is already published when the project is created. This is why the Quick Start uses Apply Changes after editing the homepage.

When you create a new page yourself, use Publish the first time. After that, use Apply Changes whenever you update it.

Save stores your work in the working version so that you can check it in Preview. Publish and Apply Changes update the live site that visitors see.

Check Your Work in Preview First

Preview shows how the saved working version will appear as a webpage.

After editing and saving your code, you can check the following without changing the live site:

• Page content and design
• Links and user interactions
• How the page appears at different screen sizes
• The result of applied layouts and components
• CSS and JavaScript changes

By reviewing the result in Preview before publishing or applying changes, you can prevent unfinished work from becoming visible to visitors.

Reuse Code with Layouts and Components

As a website grows, elements such as navigation menus, headers, footers, and other content are often repeated across multiple pages.

Essepage lets you separate this shared code into layouts and components.

• Layout: Defines the overall page structure shared by multiple pages.
• Component: Defines reusable elements such as navigation menus and buttons.

Managing shared code in one place means that you do not have to edit the same content separately on every page.

Saving a layout or component does not automatically update the published pages that use it. To reflect the change on the live site, apply each affected page.

When you need to apply a shared change to multiple published pages at once, you can use Apply All.

Hosting Is Included

Essepage provides a hosting service in addition to the environment used to build your website.

When you publish a page or apply changes, Essepage updates the live page so that visitors can see the new content.

You do not need to perform separate server-related tasks such as:

• Installing a web server
• Configuring deployment software
• Uploading files directly to a server
• Running build commands
• Connecting a separate hosting service

Published pages can be accessed through the project’s Site URL.

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

Essepage Workflow Summary

The basic workflow for building a website with Essepage is:

1. Create page files inside a project.
2. Build the pages with HTML, CSS, and JavaScript.
3. Save the files.
4. Check the result in Preview.
5. Publish new pages or apply changes to existing pages.
6. Check the final result on the published pages.

Once you understand this structure, you can manage your website using the same workflow even as it grows to include more pages, layouts, and components.

Organize your site with files and folders, check your work by saving and previewing, and then publish ready pages or apply their changes.

Next Steps

Now that you understand the basic way websites are built with Essepage, continue with one of the following guides:

• Learn about the code editor interface and features: Editor Basics
• Build a designed page: Build a Landing Page
• Learn how files and folders determine URLs: Pages and URLs
• Share common structures across multiple pages: Layouts and Components
• Learn how to publish and manage pages: Publishing and Site Management