Lesson 30: Deploying the Website with GitHub Pages, Netlify, or Vercel

📌 Objective: Learn how to deploy a Bootstrap website using GitHub Pages, Netlify, and Vercel for free.


🔹 1. Introduction to Website Deployment

After building a website, you need to host it online so others can access it.

💡 Best Free Hosting Platforms:
✔️ GitHub Pages – Best for static sites, easy Git integration.
✔️ Netlify – Great for static & dynamic sites, supports continuous deployment.
✔️ Vercel – Best for Next.js & React projects, fast global CDN.


🔹 2. Deploying with GitHub Pages

GitHub Pages allows you to host static HTML, CSS, and JavaScript files directly from a GitHub repository.

1️⃣ Step 1: Push Your Website to GitHub

Create a New Repository on GitHub:

  1. Go to GitHub and click New Repository.
  2. Name the repository (e.g., my-bootstrap-website).
  3. Select Public and click Create Repository.

Upload Your Website via Git

sh
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourusername/my-bootstrap-website.git
git push -u origin main

🔹 What happens?

  • Your project is now on GitHub.

2️⃣ Step 2: Enable GitHub Pages

  1. Go to your repository on GitHub.
  2. Click SettingsPages.
  3. Under Source, select Deploy from branch.
  4. Choose main branch and click Save.
  5. GitHub generates a link:
    perl
    https://yourusername.github.io/my-bootstrap-website/

🔹 What happens?

  • Your website is live on GitHub Pages! 🎉

🔹 3. Deploying with Netlify

Netlify allows you to deploy a website with drag-and-drop or Git integration.

1️⃣ Step 1: Upload Files to Netlify

  1. Go to Netlify and sign up.
  2. Click New Site from Git.
  3. Choose GitHub and select your repository.
  4. Click Deploy Site.
  5. Your website will be hosted at:
    arduino
    https://your-site-name.netlify.app/

🔹 What happens?

  • Netlify automatically deploys your site and updates on each Git commit.

🔹 4. Deploying with Vercel

Vercel is best for modern web apps and frameworks.

1️⃣ Step 1: Deploy on Vercel

  1. Sign up at Vercel.
  2. Click New Project.
  3. Choose Import Git Repository.
  4. Select your Bootstrap project repository.
  5. Click Deploy.
  6. Your site will be hosted at:
    arduino
    https://your-project.vercel.app/

🔹 What happens?

  • Vercel deploys and provides automatic updates.

🔹 5. Custom Domains (Optional)

You can connect a custom domain to GitHub Pages, Netlify, or Vercel.

Example: Custom Domain on Netlify

  1. Go to NetlifySite Settings.
  2. Click Domain Management.
  3. Add a custom domain (e.g., mywebsite.com).

🔹 What happens?

  • Your site works with your domain name.

📝 Lesson Recap Quiz

🎯 Test your knowledge of website deployment.

📌 Multiple-Choice Questions (MCQs)

1️⃣ Which platform is best for hosting static sites?
a) GitHub Pages
b) Netlify
c) Vercel
d) All of the above

Correct Answer: d) All of the above


2️⃣ What command pushes your project to GitHub?
a) git deploy
b) git push origin main
c) git upload
d) git publish

Correct Answer: b) git push origin main


📌 True or False

3️⃣ Netlify can deploy directly from GitHub.
Answer: True

4️⃣ You must pay to use GitHub Pages.
Answer: False


🎯 Practical Challenge

✅ Deploy your Bootstrap website on GitHub Pages.
✅ Deploy the same website on Netlify or Vercel.
Connect a custom domain (Optional).
✅ Post your live website link in the discussion forum for feedback!


🎓 Lesson Summary

GitHub Pages, Netlify, and Vercel provide free hosting.
GitHub Pages is best for simple static sites.
Netlify & Vercel offer better automation & custom domains.
Deployment ensures your website is accessible to users worldwide.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *