Section 6: Deploying for Maximum Performance
You have built a complete, multi-page business website using nothing but HTML and CSS. It is structured, semantic, responsive, and accessible. But right now, it only exists on your computer. Nobody else can see it. In this section, we change that permanently. We will take everything inside your business-site folder and put it on the live internet, with a real URL, a secure HTTPS connection, and a global content delivery network all for free, in under five minutes.
We will use Netlify, the most beginner-friendly and professional-grade static hosting platform available today. It is the same platform used by startups, agencies, and Fortune 500 companies to host fast, static websites. And the free tier is genuinely unlimited for personal and small business projects.
Step 1: What Is Static Hosting and Why It Matters
A static website is a collection of pre-built files — HTML, CSS, and images — that the server sends directly to the browser, exactly as they are. There is no database query, no server-side code, nothing to process. The file goes straight from the server to the user.
That is why static sites are fast. There is nothing in between the file and the visitor. And because everything we have built in this series is pure HTML and CSS, no server logic, no database, our site is a perfect static website.
What a CDN Does for Your Site
A CDN, known as a Content Delivery Network, stores copies of your website files on servers spread across the world. When a visitor in Lagos opens your site, they get the files from the nearest server, not from one data centre in the United States. This alone cuts load time dramatically for international visitors.
Netlify automatically puts your site on their global CDN the moment you deploy. No configuration required. Your site loads fast everywhere, on day one.
Step 2: Add a Custom 404 Page
When a visitor lands on a page that does not exist, a broken link, or a mistyped URL, they see a 404 error. By default, Netlify shows a plain, branded error screen. A professional website shows a helpful, styled 404 page that keeps visitors on your site.
Create the 404 Page
Create a new file in your project root named 404.html. Then, copy and paste the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Not Found | Your Business Name</title>
<link rel="stylesheet" href="css/styles.css" />
<style>
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
text-align: center;
padding: 2rem;
}
.error-code {
font-size: clamp(5rem, 20vw, 10rem);
font-weight: 900;
color: var(--primary-color);
line-height: 1;
margin-bottom: 1rem;
}
.error-page h1 { font-size: 1.8rem; margin-bottom: 1rem; }
.error-page p { color: #64748b; margin-bottom: 2rem; }
</style>
</head>
<body>
<header class="site-header">
<!--
The checkbox MUST come first in the DOM.
CSS can only reach LATER siblings with the ~ combinator.
-->
<input
type="checkbox"
id="menu-toggle"
class="menu-checkbox"
aria-hidden="true"
/>
<!-- The visible nav bar row -->
<div class="nav-inner">
<!-- Clickable logo goes here -->
<a href="index.html" class="logo">Kmacims EAT</a>
<!-- Desktop navigation — hidden on mobile via CSS -->
<ul class="nav-links desktop-nav">
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<!--
The hamburger label.
`for` must match the checkbox `id` exactly.
The three <span> elements become the animated bars.
`aria-label` gives screen readers a meaningful name.
`role="button"` and `tabindex="0"` ensure keyboard reachability.
-->
<label
for="menu-toggle"
class="menu-label"
aria-label="Toggle navigation menu"
role="button"
tabindex="0"
>
<span></span>
<span></span>
<span></span>
</label>
</div><!-- /.nav-inner -->
<!--
The sliding mobile menu panel.
It is a SIBLING of .nav-inner — this is what makes the CSS trick possible.
It is invisible by default (max-height: 0) and expands when
the checkbox above it is :checked.
-->
<nav class="mobile-menu" aria-label="Mobile navigation">
<ul>
<li><a href="index.html" aria-current="page">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="error-page">
<div class="error-code">404</div>
<h1>Page Not Found</h1>
<p>The page you are looking for has moved or does not exist.</p>
<a href="index.html" class="cta-button">Back to Home</a>
</section>
</main>
<footer class="site-footer" aria-label="Site footer">
<!-- Main Grid: Four Columns-->
<div class="footer-inner">
<!-- Column 1: Brand -->
<div class="footer-brand">
<a href="index.html" class="footer-logo">Kmacims EAT</a>
<p>
Professional web solutions built with clean, native technologies.
Fast, accessible, and designed to grow with your business.
</p>
<div class="footer-social">
<a href="https://linkedin.com" class="social-link"
aria-label="Follow us on LinkedIn"
target="_blank" rel="noopener noreferrer">in</a>
<a href="https://x.com" class="social-link"
aria-label="Follow us on X"
target="_blank" rel="noopener noreferrer">𝕏</a>
<a href="https://instagram.com" class="social-link"
aria-label="Follow us on Instagram"
target="_blank" rel="noopener noreferrer">◎</a>
<a href="https://github.com" class="social-link"
aria-label="Visit our GitHub"
target="_blank" rel="noopener noreferrer">⌥</a>
</div>
</div>
<!-- Column 2: Company navigation -->
<nav class="footer-col" aria-label="Company links">
<h4>Company</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- Column 3: Services navigation -->
<nav class="footer-col" aria-label="Services links">
<h4>Services</h4>
<ul>
<li><a href="services.html#web-design">Web Design</a></li>
<li><a href="services.html#development">Development</a></li>
<li><a href="services.html#consulting">Consulting</a></li>
<li><a href="services.html#seo">SEO & Analytics</a></li>
</ul>
</nav>
<!-- Column 4: Contact details -->
<div class="footer-col">
<h4>Contact</h4>
<address>
<div class="contact-item">
<span aria-hidden="true">📍</span>
<span>Old Umuahia, Umuahia,
Abia State, Nigeria</span>
</div>
<div class="contact-item">
<span aria-hidden="true">📞</span>
<a href="tel:+2348037321869">+234 803 732 1869</a>
</div>
<div class="contact-item">
<span aria-hidden="true">✉️</span>
<a href="mailto:hello@kmacims.com">contact@kmacims.com.ng</a>
</div>
</address>
</div>
</div><!-- /.footer-inner -->
<!-- Bottom Bar -->
<div class="footer-bottom">
<p>© 2026 Kmacims Web Solutions. All rights reserved.</p>
<ul class="footer-legal">
<li><a href="privacy.html">Privacy Policy</a></li>
<li><a href="terms.html">Terms of Use</a></li>
<li><a href="cookies.html">Cookie Policy</a></li>
</ul>
</div><!-- /.footer-bottom -->
</footer>
</body>
</html>
Netlify detects any file named 404.html in your project root and automatically serves it for all missing pages. No configuration file needed.
Step 3: Prepare Your Project for Deployment
Before deploying, do a quick checklist. Open your project folder and confirm the following four things.
1. Folder Structure Is Clean
Your project folder should look exactly like this and nothing else:
- Business-site
- Index.html
- About.html
- Services.html
- Contact.html
- Css/
- Styles.css
- Images/
- hero-bg.jpg
- why-choose-us.jpg
- about-team.jpg
- og-image.png
2. All Links Use Relative Paths
Open each HTML file and confirm that the stylesheet link reads href=”css/styles.css” and that image sources read src=”images/filename.jpg”. Absolute paths like C:/Users/YourName/Desktop/… will break on any server. Relative paths work everywhere.
3. Your og:image URL Uses Your Real Domain
In the <head> of each page, the og:image tag should reference https://www.yourdomain.com/images/og-image.jpg. For now, leave the placeholder domain in place. We will update it with your real Netlify URL after deploying in Step 5.
4. Images Are Optimised
Keep each image under 300KB if possible. Large images are the single most common cause of slow websites. If you have not resized your images yet, free tools like Squoosh (squoosh.app) or TinyPNG (tinypng.com) can compress them in seconds, directly in the browser, with no software to install.
Step 4: Deploy to Netlify (Drag and Drop)
This is the fastest deployment method. No command line. No Git. No configuration files. Just drag your folder into a browser window. Follow these steps.
Create a Free Netlify Account
- Go to netlify.com and click Sign up.
- Sign up with GitHub. This is recommended. If you do not have a GitHub account, sign up using your email address. With a GitHub account, you can perform continuous deployment. This means every time you save your files to GitHub, Netlify automatically detects the change and redeploys your site.
- If you used an email, verify your email address if prompted.
- You will land on your Netlify dashboard. Leave it open.
- On your Netlify dashboard, scroll down until you see a section that reads: “Want to deploy a new site without connecting to Git? Drag and drop your site output folder here.”
- Open your file explorer or Finder. Drag the entire business-site folder and drop it directly onto that zone in the browser.
- Netlify uploads your files. This takes 10 to 30 seconds.
- When the upload finishes, Netlify generates a random URL for your site.
- Click that URL. Your business website is now live on the internet, with HTTPS enabled and accessible from any device worldwide.
Step 5: Update Your og:image URLs
Now that your site is live and you have your real URL, go back to the <head> of all four HTML pages. Find the og:url and og:image tags and replace the placeholder domain with your actual domain.
The fastest way to do this in VS Code is with Find and Replace across all files. Press Ctrl + Shift + H (in Windows) or Cmd + Shift + H (in Mac) to open Find and Replace across all files. Then, find www.kmacims.com.ng or yourdomain.com, and replace with your-actual-netlify-domain.netlify.app (or your custom domain).
When you are done, verify your live site by doing the following: run PageSpeed Insights (pagespeed.web.dev) for live URL performance score, test your form submission, and test with a mobile device.
Conclusion
From a blank folder to a live, production-grade business website — built with nothing but HTML, CSS, and the modern browser platform.
We’ve proven that frameworks are a choice, not a requirement. The native web is fast, capable, and ready for real client work without adding a single dependency.
Everything you’ve built here — the semantic structure, the performance optimizations, the CSS architecture, the animations — transfers directly to any professional project you take on.
If this series helped you, subscribe, like, and share — it genuinely helps this channel reach developers and designers who need to see that the web platform is more powerful than they think.
