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

Popular posts from this blog

Differences Between Ubuntu 24.04.2 LTS and Ubuntu 25.04

Differences Between Ubuntu 24.04.2 LTS and Ubuntu 25.04 Ubuntu 24.04.2 LTS is part of the Ubuntu 24.04 LTS series , and it will be the second point release in that LTS series. As an LTS release, Ubuntu 24.04.2 will receive long-term support for 5 years, ensuring stability, security updates, and backports of important features throughout its support lifecycle (up to 2034). Key Features of Ubuntu 24.04.2 LTS (Desktop & Server) : LTS Support : Full support for 5 years (until 2029) with extended support for 5 more years (until 2034). GNOME 44 : Modern, polished desktop environment with features like Wayland improvements, better multi-monitor support, and increased performance. Linux Kernel 6.x : Enhanced hardware support, including support for newer CPUs, GPUs, and other devices. Security Enhancements : Updates for AppArmor , SELinux , and automatic security updates to ensure the system remains secure over time. Cloud & Server Features : Improved support fo...
Read more

Kapardak Bhasma: A Comprehensive Review and use

Image
cowrie shells Kapardak Bhasma: A Comprehensive Review Introduction Kapardak Bhasma, also known as Kapardika Bhasma, is an Ayurvedic calcined preparation obtained from cowrie shells ( Cypraea moneta Linn. ). It is a well-documented mineral formulation used in Ayurvedic medicine for treating various ailments, particularly digestive disorders, respiratory conditions, and metabolic imbalances. Kapardak Bhasma is classified under Sudha Varga , a group of medicinal substances derived from marine sources. Sources and Identification Kapardak (cowrie shell) is a small, glossy, convoluted shell found in marine environments. It comes in various sizes and colors and has been traditionally used in Ayurveda for its medicinal properties. According to classical Ayurvedic texts, Kapardak is categorized into three varieties based on weight: Sardha Niska (4.5 gm) – Superior quality Niska (3 gm) – Medium quality Padona Niska (2.5 gm) – Inferior quality Preparation of Kapardak Bhasma The preparation of Ka...
Read more

Vanga Bhasma: A Traditional Ayurvedic Metallic Formulation and use

Image
Raw Tin Vanga Bhasma: A Traditional Ayurvedic Metallic Formulation Introduction Vanga Bhasma is a well-known Ayurvedic preparation made from tin (Vanga). It has been extensively used in traditional medicine for treating various ailments, including diabetes, respiratory issues, genitourinary disorders, and digestive problems. The preparation of Vanga Bhasma follows rigorous purification and incineration methods to ensure safety and efficacy. Preparation of Vanga Bhasma The preparation of Vanga Bhasma involves the following key steps: Shodhana (Purification) : Raw tin is purified using herbal extracts such as lemon juice or other acidic mediums. The process removes impurities and enhances the bioavailability of the metal. Marana (Incineration Process) : The purified tin is triturated with herbal ingredients and subjected to controlled heating cycles (Puta system). This process converts tin into a fine, bio-absorbable ash. Analytical Standardization : Modern techniques such as X-ray dif...
Read more