docs

Guides

Building your first site

A friendly walkthrough from empty folder to a real, public URL.

Building your first site

This guide walks through making a real, public website with Div. By the end you'll have a single-page personal site at your-name.div.so and a workflow you can repeat for every future project.

#What you'll need

  • Div installed (Installation)
  • A code editor (anything works — VS Code, Sublime, Vim, even TextEdit)
  • An email address you can check

#1. Scaffold

div new portfolio

A new folder appears with a starter index.html, and the dev server starts:

http://localhost:3000

Your default browser opens to that URL. Keep this terminal running — it's your dev server. We'll use a second terminal for everything else.

#2. Make it yours

Open portfolio/index.html in your editor. The starter is intentionally minimal so it's easy to throw away. Replace it with something like:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tony Lea — portfolio</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Hi, I'm Tony.</h1>
    <p>I make websites for fun ideas.</p>
    <ul>
      <li><a href="https://github.com/tonylea">GitHub</a></li>
      <li><a href="mailto:tony@example.com">Email</a></li>
    </ul>
  </main>
</body>
</html>

Save the file. Your browser tab reloads automatically.

Now create portfolio/styles.css:

:root { color-scheme: light dark; }

body {
  font-family: ui-sans-serif, system-ui, sans-serif;
  max-width: 32rem;
  margin: 4rem auto;
  padding: 0 1rem;
  line-height: 1.6;
}

h1 { margin-bottom: 0.25rem; }
ul { padding: 0; list-style: none; }
li + li { margin-top: 0.5rem; }
a { color: inherit; }

Save. The page reloads. You have a portfolio.

#3. Add an image

Drop a profile picture into the folder as me.jpg. Reference it from index.html:

<img src="me.jpg" alt="Tony Lea" width="120">

Save. Reload. Done. There's no asset pipeline, no import, no require. The file is in the folder; the browser can fetch it. The web is good, actually.

#4. Skim the structure

portfolio/
├── div.json
├── index.html
├── me.jpg
└── styles.css

That's it. The whole website fits in one folder. No package.json for the website itself. No dist/. No build output.

#5. Deploy

Open a second terminal (leave div start running in the first), cd into portfolio, and run:

div deploy

Enter your email at the prompt:

What email should we send your link to: you@example.com
✓ Sent! Check your inbox to deploy portfolio-a4f9d2.div.so

Note the URL. You'll see it again in your inbox in just a moment.

#6. Click the verification link

Check your email. There's a "Claim your subdomain" message with a button. Click it.

You'll be redirected to your live website at portfolio-a4f9d2.div.so. Anyone in the world can now visit it. (Send it to a friend! Tell your mom! It's real.)

#7. Update

Back in your editor, change something — maybe add a project to the list. Save.

Then in your deploy terminal:

div deploy

This time there's no email prompt. The CLI uses the saved credentials:

✓ Updated portfolio-a4f9d2.div.so

Refresh the live URL — you'll see the change within a few seconds.

#What you have now

  • A real website at a real URL.
  • A folder you can keep editing locally.
  • A repeatable two-step loop: edit + div deploy.
  • Saved credentials in ~/.config/div/auth.json so you never get re-prompted.

That's the whole gig. Now go make something cool.

#Next steps