Quartz 4

How to Host Your Website for Free with Github

5 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🌐 Bonus Lesson: Hosting Your HTML Portfolio Website Online with GitHub Pages

📌 Lesson Objective

In this bonus lesson, you’ll learn:

  • What web hosting is and how it works.

  • Why hosting is essential for real-world web development.

  • How to host your HTML portfolio project online using GitHub Pages, a free and reliable hosting solution.

  • How to make your site accessible to anyone in the world through a live URL.

By the end, your portfolio website will be live on the internet, ready to be shared with friends, family, employers, and fellow developers.

🌍 What is Web Hosting?

📖 Definition:

Web Hosting is the process of putting your website (HTML, images, files, etc.) on a web server that’s connected to the Internet, making it accessible 24/7 from anywhere in the world.

🔍 Why Web Hosting Matters:

  • Without hosting, only you can see your site (on your local computer).

  • Hosting allows everyone else (like someone in the U.S., India, or Brazil) to access your site via a URL (web address).

  • It’s crucial if you want to:

    • Share your work with others

    • Build a professional presence

    • Apply for web dev jobs or freelance gigs

🖥️ Local vs. Hosted Websites

TypeDescription
LocalFiles are stored on your own computer. Only you can open them using your browser.
HostedFiles are stored on a web server. Anyone with the URL can visit your site online.

When you build projects on your own device, it’s local development. Web hosting turns it into a live website.

📦 What is a Web Server?

A web server is just a special computer that’s always connected to the Internet. It:

  • Stores your site files (like index.html, images, etc.)

  • Waits for users to request those files

  • Sends the correct web pages to users’ browsers

GitHub Pages gives us access to such servers for free.

🛠️ Steps to Host Your Portfolio with GitHub Pages

Let’s now walk through the step-by-step guide to publish your portfolio online using GitHub.

✅ Step 1: Create a GitHub Account

  1. Go to https://github.com

  2. Click Sign up if you don’t already have an account.

  3. If you do, just Sign in.

✅ Step 2: Create a New Repository

  1. Click the ➕ icon (top-right of GitHub UI).

  2. Select New repository.

  3. Fill in the details:

    • Repository name: html-portfolio

    • Description: (optional) e.g., “My first portfolio website built with HTML”

    • Choose Public

    • ✅ Check the box that says Add a README file

  4. Click Create repository

🔑 The README file helps initialize your repository and allows file uploads through the browser UI.

✅ Step 3: Upload Your Project Files

  1. Inside your new repo, click the Add file button → select Upload files.

  2. Navigate to your HTML portfolio folder (on your computer).

  3. Important: Only upload the contents of the folder, not the folder itself. For example, upload:

    • index.html

    • about.html

    • contact.html

    • assets/ (with images)

    • public/ (with birthday-invite.html, movie-ranking.html)

✅ Tip: Before uploading, double-check that:

  • Your main home page is named index.html.

  • All project files are complete and up to date.

  • All screenshots are placed inside assets/images/.

  1. After selecting files, click Commit changes at the bottom.

✅ Step 4: Configure GitHub Pages Hosting

  1. Once files are uploaded, go to the Settings tab of your repo.

  2. Scroll down to the Pages section in the sidebar.

  3. Under Source, select:

    • Branch: main

    • Folder: / (root)

  4. Click Save

GitHub will begin publishing your site in the background.

🕒 Wait for Deployment

  • It may take 1 to 10 minutes for GitHub to deploy your site.

  • Refresh the Pages section periodically.

  • Eventually, you’ll see a message like:

✅ Your site is live at https://your-username.github.io/html-portfolio/

Click the link to open your live website!

⚠️ Common Issues to Avoid

❌ Problem✅ Solution
Uploaded the wrong folderOnly upload the contents, not the parent folder
Homepage not loadingEnsure your main file is named index.html, all lowercase
Project not rendering properlyDouble-check image paths and relative links
“No server available” errorRefresh the page after waiting a few minutes
Files missingRe-upload and ensure commit changes was clicked

🧪 Test Your Website

  1. Open the link provided by GitHub Pages.

  2. Click each project link to test navigation.

  3. Make sure images load and all links work.

  4. Visit from your phone or another device to confirm it’s accessible publicly.

🌐 Share Your Website

Now that your site is live, copy the link and:

  • Share it with your friends and family

  • Post in your course Q&A or discussion forums

  • Add it to your resume or LinkedIn profile

  • Impress future clients or employers!

Example:

https://janedoe.github.io/html-portfolio/

🧑‍🎨 What’s Next?

Now that your HTML-only site is live, it’s time to:

  • Learn CSS to make your site look amazing

  • Add styles, colors, fonts, and layout control

  • Build modern, professional-looking websites

💡 Styling is covered in the next section of your course, where you’ll learn how to transform your plain HTML into stunning web pages.

🎯 Summary

StepAction
1Sign in to GitHub
2Create a public repo named html-portfolio
3Upload your HTML files, images, and folders
4Commit the changes
5Go to Settings → Pages
6Set source to main branch
7Wait for deployment, then visit your live site

📘 Bonus: What is GitHub Pages?

GitHub Pages is a free service provided by GitHub that lets you host static websites directly from your GitHub repository. It:

  • Supports only HTML, CSS, JS (no backend)

  • Is perfect for portfolios, documentation, and simple projects

  • Has a free subdomain like yourusername.github.io

References

Graph View

Backlinks