Web Development Hub | Deploy on GitHub Pages

Deploy Your Website on GitHub Pages

A comprehensive guide with real-time examples, practice layouts, and everything you need to host your website for free using GitHub Pages.

Get Started

🚀

What is GitHub Pages?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website.

                    // Key Features:

                    • Free hosting for static websites

                    • Custom domain support

                    • SSL encryption (HTTPS)

                    • Automatic deployment from GitHub

                    • Jekyll integration for blogs

It's perfect for personal portfolios, project documentation, blogs, and any static website. You can host up to one site per GitHub account and unlimited project sites.

📝

Step-by-Step Deployment Guide

1 Create a GitHub Account

If you don't have one already, sign up for a free account at github.com.

Free Quick Setup

2 Create a New Repository

Create a new repository with name username.github.io (replace "username" with your GitHub username).

                        // Repository must be public

                        // Name format: username.github.io

                        For user "johndoe":

                        Repository name: johndoe.github.io

3 Upload Your Website Files

Add your HTML, CSS, JavaScript, and other assets to the repository. Your main page should be named index.html.

                        // Basic file structure:

                        index.html

                        style.css

                        script.js

                        images/ // folder for images

                        README.md // optional documentation

4 Configure GitHub Pages

Go to repository Settings → Pages → Source, select your branch (usually "main") and folder (usually "/root"), then save.

Settings Pages Deploy

5 Wait for Deployment

GitHub will build and deploy your site. This usually takes 1-2 minutes. You'll see a green checkmark when it's live.

                        // Your site will be available at:

                        https://username.github.io

6 Custom Domain (Optional)

Add a custom domain in the Pages settings and configure DNS records with your domain registrar.

Custom Domain DNS HTTPS

💡

Real-Time Examples & Practice

Example 1: Personal Portfolio

View Example ↗

A simple portfolio website with responsive design, project showcase, and contact form.

                    <!-- Sample portfolio structure -->

                    <div class="portfolio">

                      <header>John Doe</header>

                      <section class="projects">

                        <!-- Projects here -->

                      </section>

                    </div>

Example 2: Documentation Site

GitHub Docs ↗

Create technical documentation using GitHub Pages with Jekyll or simple HTML/CSS.

Documentation Jekyll Markdown

Example 3: Interactive Tutorial

This page itself is an example of a website that can be deployed on GitHub Pages! It includes:

Responsive design for desktop and mobile
Day/Night mode toggle
Adjustable font sizes
SEO optimization with meta tags
Clean, accessible code structure

🔧

Practice Layout

Interactive Practice Area

Try modifying the code below and see the changes in real-time:

HTML Practice

<div class="practice-box">
    <h3>Your Title Here</h3>
    <p>This is a paragraph you can customize.</p>
    <button class="btn">Click Me</button>
</div>