📌 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:
- Go to GitHub and click New Repository.
- Name the repository (e.g.,
my-bootstrap-website
). - Select Public and click Create Repository.
✅ Upload Your Website via Git
🔹 What happens?
- Your project is now on GitHub.
2️⃣ Step 2: Enable GitHub Pages
- Go to your repository on GitHub.
- Click Settings → Pages.
- Under Source, select Deploy from branch.
- Choose main branch and click Save.
- GitHub generates a link:
🔹 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
- Go to Netlify and sign up.
- Click New Site from Git.
- Choose GitHub and select your repository.
- Click Deploy Site.
- Your website will be hosted at:
🔹 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
- Sign up at Vercel.
- Click New Project.
- Choose Import Git Repository.
- Select your Bootstrap project repository.
- Click Deploy.
- Your site will be hosted at:
🔹 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
- Go to Netlify → Site Settings.
- Click Domain Management.
- 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.
Leave a Reply