Creating a free website is simple with Netlify. This guide will show you how to organize your files, publish a website, update it, and even delete it when needed.
We’ll create a small example website called MySampleSite with HTML, CSS, JS, and an extra template page.
Step 1: Organize Your Website Files
Here’s how to arrange the files for MySampleSite:
MySampleSite/
│
├── index.html
├── about.html
├── contact.html
├── templates/
│ └── blog.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/
├── logo.png
└── banner.jpg
Step 2: Example Code for Each File
index.html – Homepage
<!DOCTYPE html>
<html>
<head>
<title>MySampleSite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<img src="images/logo.png" alt="Logo" class="logo">
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
<a href="templates/blog.html">Blog</a>
</nav>
</header>
<main>
<h1>Welcome to MySampleSite</h1>
<p>This is a sample website hosted on Netlify.</p>
<button onclick="showMessage()">Click Me</button>
</main>
<script src="js/script.js"></script>
</body>
</html>
about.html
<!DOCTYPE html>
<html>
<head>
<title>About - MySampleSite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>About Us</h1>
<p>This is a demo website to show how to organize files and deploy on Netlify.</p>
<a href="index.html">Back to Home</a>
</body>
</html>
contact.html
<!DOCTYPE html>
<html>
<head>
<title>Contact - MySampleSite</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Contact Us</h1>
<form>
<input type="text" placeholder="Your Name"><br>
<input type="email" placeholder="Email"><br>
<textarea placeholder="Message"></textarea><br>
<button type="submit">Send</button>
</form>
<a href="index.html">Back to Home</a>
</body>
</html>
templates/blog.html
<!DOCTYPE html>
<html>
<head>
<title>Blog - MySampleSite</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>Blog</h1>
<p>Welcome to the blog page. Add your posts here.</p>
<a href="../index.html">Back to Home</a>
</body>
</html>
css/style.css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: white;
padding: 10px;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
.logo {
width: 50px;
}
button {
padding: 10px 20px;
margin-top: 20px;
}
js/script.js
function showMessage() {
alert("Hello! This is MySampleSite.");
}
Images
-
images/logo.png→ small logo image -
images/banner.jpg→ optional banner
(You can use placeholder images from https://placeholder.com/ if you don’t have your own.)
Step 3: Publish on Netlify
-
Create a free Netlify account (https://www.netlify.com/).
-
Go to Add New Site → Deploy manually.
-
Drag and drop the MySampleSite folder.
-
Netlify will give a live URL for your website.
Step 4: Update Your Website
Whenever you make changes:
-
Update the local files.
-
Drag and drop the updated files into Netlify.
-
Your website updates automatically.
Step 5: Delete or Deactivate Website
To remove your website:
-
Go to your Site Dashboard.
-
Click Site Settings → Delete this site.
-
Confirm deletion.
⚠️ Deleting is permanent. Keep a backup if you want to redeploy later.
Step 6: Tips for Beginners
-
Use a consistent folder structure.
-
Always test your website locally.
-
Keep file paths clear (
css/style.css,js/script.js,images/logo.png). -
Start simple and gradually expand.
✅ Now, you have a complete MySampleSite with working HTML, CSS, JS, and a template page ready to upload to Netlify.
No comments:
Post a Comment