Publish your first page

In this tutorial you'll put a live "Hello, world" page online on Flexweg in under ten minutes. No code editor, no terminal — everything happens in your browser.

Before you start

You need a free Flexweg account. Create one here — it takes about a minute. Once you're logged in, Flexweg automatically creates a blank site for you and opens its management interface.

Step 1 — Meet your site

At the top of your site's interface, Flexweg shows the URL where your site is reachable. For a new account it looks like this:

https://4dp6g1d6.flexweg.com/

The random part (4dp6g1d6) is a unique subdomain assigned by Flexweg so your site works immediately, without any setup on your side. It's not the prettiest URL, but it's fully functional — you can share it, bookmark it, or open it from any device.

You can change it in two ways, from the site settings:

Customize the subdomain — replace 4dp6g1d6 with a readable name of your choice:
```
https://mysite.flexweg.com/
```
Connect your own domain — point a domain you already own (e.g. mybrand.com) to your Flexweg site:
```
https://www.mybrand.com/
```

Both are optional. For the rest of this tutorial we'll use the default URL — every step works the same regardless of which domain is active.

Step 2 — Create your first file

On the left of the interface is your file tree. It's empty for a new site, and at the top of that tree you'll find two buttons:

New file — create a single HTML, CSS, JS, image, or other supported asset.
New folder — create a folder to group related files.

Click New file. A dialog opens with three fields:

Filename — the name of the file, including its extension (.html, .css, etc.).
Location — the folder in the tree where the file should be placed. The default is the site root (/).
Content — a code editor where you can type or paste directly, or a drag-and-drop area where you can drop a file from your computer.

Filename and location decide the URL

Flexweg's hosting is explained in Site architecture. The shortest summary: a file named index.html at the root is served at your site's home page. Every other file is served at its matching path.

Fill in the dialog

Filename: index.html
Location: leave it at the root (/)
Content: paste the HTML below into the editor

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Ultra Sleek</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            overflow: hidden;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 20px;
            padding: 50px 80px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            text-align: center;
            transform: translateY(0);
            transition: transform 0.3s ease;
        }

        .glass-card:hover {
            transform: translateY(-10px);
        }

        h1 {
            font-size: 4rem;
            color: white;
            letter-spacing: 2px;
            text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            margin-bottom: 10px;
        }

        p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.2rem;
            font-weight: 300;
        }

        .blob {
            position: absolute;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            z-index: -1;
            animation: move 20s infinite alternate;
        }

        @keyframes move {
            from { transform: translate(-100px, -100px); }
            to { transform: translate(100px, 100px); }
        }
    </style>
</head>
<body>

    <div class="blob"></div>

    <div class="glass-card">
        <h1>Hello World</h1>
        <p>The future starts here.</p>
    </div>

</body>
</html>

What this file contains

This is a single self-contained HTML document. It has three parts, all inside the same file:

Structure (HTML tags like <h1> and <p>) — what the page says.
Style (the <style> block) — how the page looks: the animated gradient background, the frosted-glass card.
Animation — defined with CSS @keyframes, no JavaScript required.

Having everything in one file is perfectly fine for a single page. In the next tutorial we'll split the styles into their own file so multiple pages can share them.

Step 3 — Save and publish

Click Save and publish. Flexweg does three things in that order:

Validates the file — makes sure the extension is allowed (see Supported file types).
Writes the file into your site's tree at the location you chose.
Publishes it — the file is immediately accessible at the URL computed from its path.

Because you named the file index.html and placed it at the root, the new page now lives at the home page of your site — the URL shown at the top of the interface.

Open that URL in a new tab. You should see an animated gradient background with a frosted-glass card in the middle that says "Hello World — The future starts here."

Fast feedback loop

Every time you change a file and click Save and publish, the new version is live in seconds. Switch between your editor tab and the live site tab, hit refresh, see the change. This is your workflow for everything you'll build on Flexweg.

Step 4 — Edit your page later

Back in the file tree, index.html now appears as an item. Hover over the row and an Edit button appears on the right.

Click Edit. A full-screen editor opens with two views you can switch between at any time:

Visual — a WYSIWYG preview (What You See Is What You Get). You can click the heading or the paragraph directly and retype the text, as if you were working in a word processor. Use this when you only want to update content (text, images, links).
Code — the raw HTML of the file. Use this when you want full control: tweak the CSS, add new sections, paste in a snippet you found elsewhere.

When you're happy with your changes, click Save and publish inside the editor. The live page updates within seconds.

What you just learned

Flexweg gives you a working site the moment you sign up — no installation, no deploy pipeline.
Files map to URLs: index.html at the root is served as the home page. Every other file is served at the path matching its location in the tree.
The New file dialog accepts both pasted code and drag-and-drop of files from your computer.
Every file is editable later through a visual editor (for text changes) or a code editor (for full control).

Next step

Right now, every style lives inside index.html via a <style> tag. That's fine for a single page — but as soon as you build a second page, you'll want to reuse those styles instead of copying them. The next tutorial walks through that:

Share styles across pages →

Before you start​

Step 1 — Meet your site​

Step 2 — Create your first file​

Fill in the dialog​

Step 3 — Save and publish​

Step 4 — Edit your page later​

What you just learned​

Next step​