How to Code a Website on GitHub- A Complete Beginner's Guide

What This Guide Actually Covers

You'll learn how to host a website on GitHub Pages for free. That's it. No fluff about version control or career development. Just the steps to get your code live on the internet.

GitHub Pages turns any repository into a live website. It's free, fast, and you don't need a server or hosting plan.

What Is GitHub Pages?

GitHub Pages is a free hosting service from GitHub. It takes files from your repository and publishes them as a website. You get a URL like username.github.io automatically.

It supports:

• Static HTML, CSS, and JavaScript
• Markdown files (converted to HTML)
• Jekyll themes

No backend. No database. Just files served directly.

Why Use GitHub for Your Website?

Three reasons and only three reasons matter:

• It's free. No hosting fees, no bandwidth limits that matter for personal sites.
• It's simple. Push code, site updates. No FTP, no cPanel.
• It's fast. Content Delivery Networks (CDN) serve your site globally.

If you want free static hosting, this is the straightforward path.

What You Need Before Starting

Make sure you have these ready:

• A computer with internet access
• A GitHub account (free tier works)
• Basic HTML/CSS knowledge
• A code editor (VS Code is free and works well)

That's it. No Git installed locally required for the simplest workflow.

How to Set Up Your GitHub Account

If you don't have an account yet:

1. Go to github.com
2. Click "Sign Up"
3. Pick a username you'll keep (this becomes part of your URL)
4. Verify your email

Your username matters. username.github.io is your default URL. Choose something you'd be okay showing a potential employer or client.

Creating Your First Repository

A repository (repo) is just a folder that GitHub tracks. Here's how to make one:

1. Click the "+" icon in the top right corner
2. Select "New repository"
3. Name it: username.github.io (replace "username" with your actual GitHub username)
4. Set it to Public
5. Click "Create repository"

Keep the name exactly right. GitHub Pages only works automatically with this naming convention for user sites.

Repository Settings for Your Site

After creating the repo:

1. Go to the repository's Settings
2. Scroll down to "GitHub Pages" section
3. Under "Source," select "Deploy from a branch"
4. Select "main" branch and "/ (root)" folder
5. Click Save

Your site won't be live yet—you need to add files first.

How to Upload Your Website Files

You have two options. Choose based on what you know.

Option 1: Upload Directly (Easiest for Beginners)

This works if you don't know Git commands:

1. In your repository, click "Add file" → "Upload files"
2. Drag your HTML, CSS, and image files into the upload area
3. Scroll down and click "Commit changes"

Your site goes live within a minute or two. Check username.github.io to see it.

Option 2: Use Git Commands (Better Long-Term)

If you want to update files from your terminal:

1. Open your terminal/command prompt
2. Clone the repo: git clone https://github.com/username/username.github.io.git
3. Add your files to that folder
4. Run these commands:

   git add .
   git commit -m "Initial commit"
   git push origin main

This workflow pays off when you make frequent changes.

The Minimum Files You Need

At absolute minimum, your repository needs an index.html file. That's it.

Better structure looks like this:

• index.html — your main page
• style.css — your styles
• script.js — your JavaScript (optional)
• images/ — folder for images

Keep filenames lowercase with no spaces. Use hyphens, not underscores.

Common GitHub Pages Mistakes

How to Use a Custom Domain (Optional)

If you own a domain and want it pointing to your GitHub site:

1. In your repo Settings → GitHub Pages → Custom domain
2. Enter your domain (e.g., mysite.com)
3. Add these DNS records at your domain registrar:
   • A record pointing to 185.199.108.153
   • CNAME record pointing to username.github.io
4. Wait up to 24 hours for DNS propagation
5. Enable "Enforce HTTPS" after verification

Custom domains require HTTPS now. GitHub handles the certificate automatically once DNS is correct.

GitHub Pages vs. Alternatives

GitHub Pages wins for developers who already use Git. Netlify wins for drag-and-drop simplicity. Traditional hosting wins if you need server-side code.

Getting Started Checklist

Here's your action list:

1. Create GitHub account with a professional username
2. Create new repository named username.github.io
3. Set repository to Public
4. Enable GitHub Pages in Settings
5. Upload an index.html file
6. Wait 2 minutes, check your live URL
7. Add CSS and more pages as needed

Do these steps in order. Don't skip to custom domains or advanced setups. Get a basic site working first.

What to Do Next

Once your basic site works, you can:

• Add more HTML pages and link between them
• Learn basic CSS to make it look decent
• Add a README.md file to document your project
• Explore Jekyll themes if you want a blog-style site

Don't overcomplicate this. A single index.html file is a valid website. Ship it first, improve it later.