How to Host a Simple HTML Website Using Netlify, GitHub, and Namecheap with SSL

 


How to Host a Simple HTML Website Using Netlify, GitHub, and Namecheap with SSL

Owning a custom domain like my-business-name.website (cost: USD 1.18 / INR 106.28) is just the first step. Hosting your website securely with SSL and making it accessible online requires a few more steps. This guide will walk you through hosting a simple HTML website using GitHub, Netlify, and Namecheap.

Step 1: Prepare Your Website

  1. Create a folder on your computer for your website, e.g., my-business-site.

  2. Inside the folder, create an HTML file (index.html) with your content:

<!DOCTYPE html>
<html>
  <head>
    <title>My Business Website</title>
  </head>
  <body>
    <h1>Welcome to My Business!</h1>
    <p>This is a simple HTML website hosted on Netlify.</p>
  </body>
</html>

  1. Optionally, add CSS (style.css) or JavaScript (script.js) files.

Folder structure example:

my-business-site/
├── index.html
├── style.css
└── script.js

Step 2: Upload Your Website Code to GitHub

  1. Create a GitHub account if you don’t have one: https://github.com.

  2. Click “New Repository” and name it, e.g., my-business-site.

  3. Open Git Bash or terminal on your computer and navigate to your website folder:

cd path/to/my-business-site

  1. Initialize Git, commit, and push your files to GitHub:

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<your-username>/my-business-site.git
git push -u origin main

  • Your website is now hosted on GitHub.

Step 3: Deploy Your Website on Netlify

  1. Sign up or log in to Netlify.

  2. Click “Add new site” → “Import from Git”.

  3. Choose GitHub and authorize Netlify to access your repositories.

  4. Select your repository (my-business-site).

  5. Configure deployment:

    • Build command: Leave empty for simple HTML.

    • Publish directory: . (root folder containing index.html)

  6. Click Deploy site.

  • Netlify will assign a temporary URL like https://random-name.netlify.app.

Step 4: Configure Your Namecheap Domain

  1. Log in to Namecheap → Domain List → Manage → Advanced DNS.

  2. Add a CNAME record:

Host Value (Target) TTL
www your-netlify-site.netlify.app Automatic

  1. Optional: Set up URL redirect to redirect my-business-name.website (root domain) to www.my-business-name.website.

Step 5: Add Custom Domain on Netlify

  1. Go to your Netlify site → Domain settings → Add custom domain.

  2. Enter www.my-business-name.website.

  3. Netlify will verify the DNS settings and link your domain.

Step 6: Enable SSL (HTTPS)

  1. In Netlify → Domain settings → HTTPS → Click “Provision certificate”.

  2. Netlify uses Let’s Encrypt to provide a free SSL certificate.

  3. Wait a few minutes. Your website will now be accessible securely:

https://www.my-business-name.website

Step 7: Test Your Website

  1. Open your browser and visit your domain.

  2. Verify:

    • Website loads correctly.

    • https:// is active and secure.

    • All links, images, and CSS are working.

Optional: Configure Root Domain

To make your site accessible without www:

  1. Add an A record in Namecheap pointing to Netlify’s IP addresses (found in Netlify domain settings).

  2. Alternatively, keep www as primary and redirect root domain to www.

Summary

  • GitHub: Stores website code.

  • Netlify: Deploys and hosts your website, provides SSL.

  • Namecheap: Provides the domain name and DNS management.

  • SSL Certificate: Ensures secure HTTPS connection.

Following these steps, your simple HTML website is now live, secure, and accessible via your custom domain.


Comments

Post a Comment