How to Build and Deploy a Simple Website on GitHub Pages

If you’re a new developer or freelancer on Afriancer.com, showcasing your work online is essential. The good news? You don’t need to pay for hosting or buy a domain to publish your first site.

With GitHub Pages, you can build and host a static website for free in just a few steps. In this guide, you'll learn how to go from a basic HTML file to a live site in minutes.

🚀 What is GitHub Pages?

GitHub Pages is a free service from GitHub that lets you host websites directly from a GitHub repository. It's perfect for:

• Portfolios

• Project demos

• Documentation sites

• Resume websites

🧱 Step-by-Step: Build and Deploy Your Site

✅ Step 1: Create a GitHub Account

If you don’t already have one, go to github.com and sign up. It’s free.

✅ Step 2: Create a New Repository

1. Click the “+” icon in the top-right and select “New repository”

2. Name it something like my-portfolio

3. Make it public

4. Check the box to "Initialize with a README" (optional)

✅ Step 3: Add Your Website Files

You can either:

• Upload files directly (HTML, CSS, JS), or

• Clone the repo using Git and push your code:

bashCopyEditgit clone https://github.com/your-username/my-portfolio.git cd my-portfolio # Add your index.html and other files here git add . git commit -m "Add website files" git push origin main

Your root folder must include a file named index.html.

✅ Step 4: Enable GitHub Pages

1. Go to your repository on GitHub

2. Click Settings → Pages

3. Under "Source", select main branch (or docs/ folder if that's where your files are)

4. Click "Save"

GitHub will generate a live URL like:

perlCopyEdithttps://your-username.github.io/my-portfolio

Your website is now live! 🎉

🖼️ Pro Tips

• Make sure your index.html is at the root level of your repo

• Use .css and .js files in the same directory or link from CDN

• Always push to GitHub to update your live site

✨ Why Use GitHub Pages?

• Free and reliable hosting

• Great for portfolios, client demos, and landing pages

• Helps you learn version control (Git), which is in high demand

💼 Want to impress clients on Afriancer.com? Share a GitHub Pages link to show live projects.

🔚 Final Thought

With GitHub Pages, launching your own website is simple, fast, and completely free. It’s one of the best ways to start your web development journey — and build your freelance profile while you're at it.

👉 Ready to showcase your skills and attract clients?
Join Afriancer.com today and start growing your digital career.