Code Examples
Static Website Example: Complete Code, File Tree, and How to Deploy It
A complete static website example you can copy: index.html, about.html, and style.css for a small bookstore, the minimal file tree, how static hosting works, deployment steps, and a static vs dynamic comparison.
This page is a complete static website example: a small folder of plain files — two HTML pages and one shared stylesheet — that you can copy, run on your own computer, and publish to the web. Because nothing runs on a server, this is one of the simplest ways to put a site online. It is part of the code examples library, and the single-file variant of the same idea is the HTML website example.
What is a static website
A static website is a set of files served exactly as they are stored. When a visitor asks for a page, the host reads the file from disk and sends it back. No application code runs and no database is queried, so every visitor receives the same files.
The flow is identical for every request:
Browser requests https://harborlight.example/
│
▼
Host or CDN reads the file (index.html) from storage
│
▼
Host sends that exact file back, unchanged
│
▼
Browser loads the HTML, fetches style.css, and renders the page
Because the response is just a file, a static site can be cached and served from a content delivery network anywhere in the world. To change something, you edit the file and re-upload it — there is no database to update. That is the key difference from a dynamic website, where the server builds the page on every request; the comparison table later on this page spells out the two sides.
The complete static website example
Below is a complete, runnable static site: a small business site for a fictional bookstore called Harbor Light Books. Copy the three files into one folder, open index.html in a browser, and you have a working website — no build tools and no server required.
Here is the file tree, so you can see what belongs in the folder:
my-site/
├── index.html ← the home page
├── about.html ← a second page that shares the same look
└── style.css ← one stylesheet used by every page
index.html
The home page holds the site header, a headline, a short list, and the footer. It links to the stylesheet with style.css and to the second page with about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Harbor Light Books — Independent Bookstore</title>
<meta name="description" content="Harbor Light Books is an independent bookstore on the harbor in Port Townsend, Washington. New releases, local authors, and a weekly reading series." />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<div class="container">
<p class="brand">Harbor Light Books</p>
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<div class="container">
<h1>Books for the salt air</h1>
<p>An independent bookstore on the harbor, stocking new releases, local authors, and well-loved classics.</p>
</div>
</section>
<section class="container">
<h2>New this week</h2>
<ul class="book-list">
<li><span class="book-title">The Tide at Morning</span> — Elinora Hayes</li>
<li><span class="book-title">Beacon House</span> — S. M. Calder</li>
<li><span class="book-title">Wild Harvest</span> — Noor Ashraf</li>
</ul>
</section>
</main>
<footer class="site-footer">
<div class="container">
<p>Harbor Light Books · 12 Water Street, Port Townsend, WA · Open Tue–Sat, 10:00–18:00</p>
</div>
</footer>
</body>
</html>
about.html
The second page uses the same header, footer, and stylesheet, so it looks like part of the same site:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>About — Harbor Light Books</title>
<meta name="description" content="About Harbor Light Books: an independent bookstore on the harbor in Port Townsend, Washington." />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<div class="container">
<p class="brand">Harbor Light Books</p>
<nav aria-label="Main">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<h1>About the store</h1>
<p>Harbor Light Books opened in 2016 as a single room of shelves above the pier. Today it stocks a curated mix of new releases, local authors, and used favorites.</p>
<p>We host a free reading series each week and a children's story hour on Saturdays. You can reach us at hello@harborlight.example.</p>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>Harbor Light Books · 12 Water Street, Port Townsend, WA · Open Tue–Sat, 10:00–18:00</p>
</div>
</footer>
</body>
</html>
style.css
One stylesheet is linked from both pages, so the look of the whole site lives in a single file:
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.6;
color: #243b3a;
background: #fbf9f4;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
.site-header {
background: #153e3d;
color: #f5f1e8;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding-top: 14px;
padding-bottom: 14px;
}
.brand {
margin: 0;
font-size: 1.25rem;
font-weight: bold;
}
.site-header nav ul {
display: flex;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
.site-header nav a {
color: #f5f1e8;
text-decoration: none;
}
.site-header nav a:hover,
.site-header nav a:focus {
text-decoration: underline;
}
.hero {
background: #2a6f6e;
color: #ffffff;
text-align: center;
padding: 56px 0;
}
.hero h1 {
margin: 0 0 10px;
font-size: 2.2rem;
}
.hero p {
margin: 0 auto;
max-width: 560px;
font-size: 1.1rem;
}
h2 {
color: #2a6f6e;
}
.book-list {
list-style: none;
padding: 0;
}
.book-list li {
padding: 8px 0;
border-bottom: 1px solid #e2dccb;
}
.book-title {
font-weight: bold;
}
.site-footer {
background: #153e3d;
color: #cfe0dd;
text-align: center;
padding: 18px 0;
font-size: 0.9rem;
}
What the example looks like
Before you copy it, here is a sketch of how the home page renders in a browser — the header and navigation, the headline, the book list, and the footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
body { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: #f3f4f6; padding: 24px; }
.window { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.12); overflow: hidden; }
.titlebar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #e5e7eb; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.r { background: #fca5a5; } .y { background: #fcd34d; } .g { background: #86efac; }
.url { flex: 1; text-align: center; font-size: 12px; color: #6b7280; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 999px; padding: 3px 10px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #153e3d; padding: 12px 18px; }
.brand { color: #f5f1e8; font-size: 13px; }
.nav { display: flex; gap: 14px; }
.nav span { color: #f5f1e8; font-size: 11px; }
.hero { background: #2a6f6e; color: #fff; text-align: center; padding: 44px 18px; }
.hero h1 { margin: 0 0 8px; font-size: 20px; }
.hero p { margin: 0 auto; font-size: 11px; max-width: 460px; }
.content { padding: 24px 18px; }
.content h2 { font-size: 13px; margin: 0 0 10px; color: #2a6f6e; }
.row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f3f4f6; font-size: 11px; }
.footer { background: #153e3d; color: #cfe0dd; text-align: center; padding: 14px; font-size: 10px; }
</style>
</head>
<body>
<div class="window">
<div class="titlebar"><span class="dot r"></span><span class="dot y"></span><span class="dot g"></span><span class="url">https://harborlight.example/</span></div>
<div class="header">
<span class="brand">Harbor Light Books</span>
<div class="nav"><span>Home</span><span>About</span></div>
</div>
<div class="hero"><h1>Books for the salt air</h1><p>A sketch of the rendered home page: headline, new-releases list, and footer.</p></div>
<div class="content">
<h2>New this week</h2>
<div class="row"><span>The Tide at Morning</span><span>Elinora Hayes</span></div>
<div class="row"><span>Beacon House</span><span>S. M. Calder</span></div>
<div class="row"><span>Wild Harvest</span><span>Noor Ashraf</span></div>
</div>
<div class="footer">Harbor Light Books · 12 Water Street, Port Townsend, WA</div>
</div>
</body>
</html>
The mockup is only a picture of the layout; the three files above are what produce it.
How the files fit together
Static pages talk to each other with relative links. From the folder:
my-site/
├── index.html ← shown when a visitor lands on the site root
├── about.html ← reachable from index.html via the navigation
└── style.css ← linked from the head of both pages
Because index.html and about.html live in the same folder, each page can link to the other with just a filename, and the stylesheet is found the same way. Keep the three files together and the site keeps working after you upload the folder — that is the whole idea of a static site. How those filenames map to web addresses is explained on the website URL examples page, and how pages join into a navigation is covered in the website structure examples page.
How to deploy a static website
Static files can live almost anywhere, because the host does not need to run any application code. A typical publish flow is:
- Put
index.html,about.html, andstyle.cssin one folder. - Open the folder on your own computer to confirm the site works.
- Create an account on a static host, then upload or push the folder.
- The host returns a public URL; that URL is your live site.
- Change a file, re-upload it, and the update is live.
The steps stay the same whether you use a drag-and-drop host, a git-based service, or an object store — the content is just files. Copy this checklist and use it each time:
# Deploy a static website checklist
## Prepare the files
- [ ] All pages and the stylesheet live in one folder
- [ ] Links use relative paths (about.html, style.css)
- [ ] Every page has a unique title and meta description
- [ ] The site opens from disk: double-click index.html and check every page
## Publish
- [ ] Upload or push the folder to a static host
- [ ] The host assigns a public URL
- [ ] Open the URL and check the home page
## Check after launch
- [ ] Every page loads
- [ ] Internal links and the stylesheet resolve
- [ ] The page title and description read correctly in a browser tab
Static vs dynamic websites
| Aspect | Static website | Dynamic website |
|---|---|---|
| What the server does | Sends the stored file as-is | Runs application code and builds the response |
| Work on each request | None — the file is already written | Queries databases, renders templates, executes logic |
| Changing content | Edit a file, then re-upload or rebuild | Edit in the CMS; the next visitor sees the change |
| Great for | Small business sites, portfolios, documentation, landing pages | Online stores with carts, member areas, news and comment sections |
| Built with | HTML, CSS, JavaScript; static site generators | Server frameworks and databases, for example WordPress, Rails, Django |
| Hosting | Any static host or CDN | An application server with a database |
If a site must store user data, handle logins, or build pages from a database on every visit, it is dynamic. If the content is fixed and mostly read-only, static is usually the simpler choice. For a small business site that mainly announces opening hours and prices, the example on this page is enough. The HTML website example shows the one-file version of the same idea, and the responsive website example shows how to make it adapt to phones.
Blank static site starter
The same structure with the content removed. Copy the folder layout, save the files below, and replace every [ ... ] with your own details:
my-site/
├── index.html ← your home page
├── about.html ← an optional second page
└── style.css ← your styles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[Your site name]</title>
<meta name="description" content="[One or two sentences about your site]" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav aria-label="Main">
<!-- Your navigation links -->
</nav>
</header>
<main>
<!-- Your page content -->
</main>
<footer>
<!-- Copyright and contact details -->
</footer>
</body>
</html>
* { box-sizing: border-box; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.6;
}
header,
footer {
padding: 16px 20px;
background: #153e3d;
color: #f5f1e8;
}
main {
max-width: 900px;
margin: 0 auto;
padding: 24px 20px;
}
nav ul {
display: flex;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
}
nav a {
color: inherit;
}
FAQ
Frequently asked questions
What is a static website?
What is the difference between a static and a dynamic website?
Do static websites need a database?
Can I use this static website example for my own site?
How do I deploy a static website?
Is a static website fast?
When should I choose a dynamic website instead?
What to do next
A static site is the simplest way to publish on the web. To see the single-file version of the same idea, look at the HTML website example; to make your pages adapt to any screen, the responsive website example adds media queries. The website structure examples page shows how pages and navigation fit together, and all of the site's copyable documents live in the templates library.