How to Host Your Website on Netlify for Free.

Host Your Website for Free on Netlify with HTML, CSS, Bootstrap, and JavaScript.

Introduction

Hosting a website can sound complicated, but with platforms like Netlify, it’s super easy (and free!). In this post, I'll walk you through the steps to host your static website on Netlify. If you have a website built with HTML, CSS, Bootstrap, and JavaScript, this is a great solution to make it live on the internet.

Why Netlify?

Netlify provides:

• Free hosting for static sites (perfect for HTML, CSS, and JS projects)
• Simple deployment through drag-and-drop or Git
• Automatic builds and continuous deployment for GitHub/GitLab/Bitbucket projects
• Free SSL (so your site is secure with HTTPS)

Step 1: Prepare Your Website Files

First, make sure your website is ready to go. Have all files (HTML, CSS, JavaScript, and images) organized in a folder.

/my-website
  ├── index.html
  ├── styles.css
  ├── script.js
  ├── /images

Step 2: Create a Netlify Account

1. Go to Netlify.
2. Sign up for a free account using your email, GitHub, GitLab, or Bitbucket.

Step 3: Start a New Site & Deploy

You have two main options to deploy your site: Drag-and-Drop or Link with Git.

Option 1: Drag-and-Drop Deployment.

1. From your Netlify dashboard, click on "Add new site".
2. Select "Import an existing project".
3. Choose Drag and drop your site folder here.
4. Drag the entire folder of your website (from Step 1) into the box.

Netlify will start uploading and deploying your website. Once it’s done, you’ll see a link to view your live site! 🎉

Option 2: Link Your Site from GitHub

1. Ensure your website is in a GitHub repository (public repositories are best for free hosting).
2. In Netlify, click on "New site from Git".
3. Choose GitHub as the provider and authorize Netlify to access your GitHub account.
4. Select your website repository, and then click "Deploy Site".

Netlify will now handle everything, including automatic updates whenever you push changes to GitHub.

Step 4: Access Your Live Website

Once deployed, Netlify provides a unique URL for your site (something like your-site-name.netlify.app). You can also customize this URL in the Site Settings.

Example:
Imagine you have a portfolio site with index.html, style.css, and script.js files. After deploying, Netlify will give you a live link like this: https://myportfolio.netlify.app

Step 5: Optional - Custom Domain

Want to use your custom domain? No problem!

In your site’s Settings on Netlify, go to Domain management.
Add your custom domain (e.g.,www.mywebsite.com) and follow the setup instructions.

Netlify provides a free SSL certificate for your custom domain too!

That's it! With just a few simple steps, you now have a live website hosted for free on Netlify. This is a fantastic option for developers who need a quick, reliable way to showcase static sites.

Example HTML, CSS, JS Website Hosted on Netlify
Here’s a basic website to test out these instructions. Visit My Demo Site Sudhanshu Developer.

Let me know in the comments if you found this guide helpful or if you faced any issues! 😊

Happy Coding!