Build a Static Website

July 16, 2026 · View on GitHub

Create a project directory:

mkdir my-first-site
cd my-first-site

Create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="My first website">
  <title>My First Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">
    <p class="eyebrow">Hello, Internet</p>
    <h1>My first website is online.</h1>
    <p>This page is served from my own domain.</p>
    <a href="about.html">About this site</a>
  </main>
</body>
</html>

Create styles.css

:root {
  color-scheme: light dark;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  place-items: center;
  background: #0f172a;
  color: #e2e8f0;
}

.card {
  width: min(38rem, calc(100% - 3rem));
  padding: 3rem;
  border: 1px solid #334155;
  border-radius: 1.5rem;
  background: #111827;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 30%);
}

.eyebrow {
  color: #38bdf8;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

a {
  color: #7dd3fc;
}

Create about.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>About | My First Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="card">
    <h1>About this site</h1>
    <p>I built this site to learn domains, DNS, HTTP, and HTTPS.</p>
    <a href="index.html">Return home</a>
  </main>
</body>
</html>

Check the Project

my-first-site/
├── about.html
├── index.html
└── styles.css

Use relative links so the pages also work when served from a test directory. Avoid placing passwords, API keys, private documents, source maps containing secrets, or configuration backups in the public site directory.

Add Basic Project Files

Create .gitignore if tools generate local files:

.DS_Store
*.log
.env

Never commit .env files or credentials merely because they are ignored locally. Check staged files before every commit.

Continue to Test the Website Locally.