File-Based Thinking

Building the Web the Way You're Used To

"How can we make web development as easy as possible?"

This was the question that kept me up at night when first designing Essepage. After tossing around countless ideas, the conclusion was surprisingly simple.

"What if we brought a familiar tool like VSCode directly into the browser?"

Of course, we can’t cram every single VSCode feature into a browser. Instead, we decided to extract the core experience specifically tailored for 'web page development'. As we fleshed out this idea, it naturally evolved into an environment that revolves entirely around a 'file system'. (Though, behind the scenes, it's a web service, so everything is safely stored in a database! 😄)

If you're a developer, you already know how to organize folders and files. Even when we all wrote our very first lines of HTML, we started by creating a folder and putting a file inside it.

"What if you could build a website online using the exact same mental model you use on your local machine, without having to learn complex new concepts?"

I couldn't think of a better starting point than that.

So, if you’re comfortable with an IDE like VSCode, or if you’ve ever built an HTML file on your computer, you’ll feel right at home building web pages with Essepage.

Your Files and Folders ARE Your URLs

When you create a project in Essepage, it instantly gets a unique web address like https://espg.dev/your-project-name.

Building on this base URL, the folders you create literally become your website's paths, and the files inside them become the page content. There are no complex routing configuration files to mess with.

For example, let's say your project URL is https://espg.dev/mysite and you want to create an "About" page. Don't overthink it. Just structure it like this:

• 📁 Folder: /public/about
• 📄 File: +page.essepage

(Resulting URL: https://espg.dev/mysite/about)

💡 Of course, you can also connect a custom domain. Your URL would then simply become https://yourdomain.com/about.

And when you want to link to it in your navigation menu, simply use a standard relative path pointing to the folder inside /public.

<a href="/about">About Us</a>

A Few Special Essepage Rules

To provide this familiar experience while injecting Essepage's powerful features, we established a few lightweight, special rules.

• The Default File: +page.essepage
  This is the base file that holds the actual content for a given folder. It acts exactly like an index.html file—it opens automatically without needing the file name in the URL.
  The very first screen of your site is handled by the /public/+page.essepage file, which is automatically generated when you create a project.

• The Magic Extension: .essepage
  Files with this extension are written just like normal HTML, but they unlock all of Essepage's convenient features, like Layouts and Slots. If you create a new file and skip the extension, Essepage is smart enough to append .essepage for you.

💡 There are a few more handy rules, but we'll cover those in a separate chapter.

Start Building with Familiarity

When building with Essepage, you don't need to adopt a database-centric mindset like you would with a traditional CMS. You just need to embrace File-Based Thinking—working comfortably with the files and folders you already know.

Instead of struggling to learn new, abstract concepts, we want you to dive straight into the joy of creating, using the intuitive approach you've always used.