Deploying Web Projects for Free using GitHub Pages

Building a frontend web application is exciting, but sharing it with friends, recruiters, and clients requires hosting. GitHub Pages is a free, blazing-fast static website hosting service integrated directly into GitHub repositories.

1. What is GitHub Pages?

GitHub Pages takes HTML, CSS, JavaScript, images, and static assets straight from a branch in your repository and publishes them live to the internet:

• Free hosting: Zero monthly hosting fees.
• Automated SSL: Free HTTPS certificates included out of the box.
• Custom Domains: Supports connecting your own domain (e.g. portfolio.sumitsharma.dev).
• Default URL Format:

2. Deploying a Basic Website in 3 Steps

If your repository contains standard static files (index.html, styles.css, app.js):

Step 1: Ensure index.html is at the Root

GitHub Pages looks for index.html as the default entry point of your site.

Step 2: Push Your Code to GitHub

Step 3: Enable GitHub Pages in Repository Settings

1. 1
   On GitHub, navigate to your repository -> Click Settings.
2. 2
   In the left sidebar under "Code and automation", click Pages.
3. 3
   Under Build and deployment:

• Source: Deploy from a branch.
• Branch: Select main and folder /(root).
• Click Save.

1. 1
   Within 60 seconds, GitHub Actions builds and deploys your site! A green banner displays your live URL:

Your site is live at https://sumit-msk.github.io/my-portfolio/.

3. Deploying React / Vite / Next.js Export Builds

For modern frontend frameworks that compile into a dist/ or out/ folder:

Using GitHub Actions (Modern Workflow):

1. 1
   In Pages Settings, change Source to GitHub Actions.
2. 2
   Select the Static HTML or Next.js suggested template.
3. 3
   GitHub automatically creates a .github/workflows/deploy.yml workflow that builds and deploys your application on every push!

4. Configuring a Custom Domain

Want your project to run on mycoolapp.com instead of .github.io?

1. 1
   In GitHub Pages settings, enter your domain under Custom domain (e.g. www.mycoolapp.com).
2. 2
   Log into your DNS provider (GoDaddy, Namecheap, Cloudflare).
3. 3
   Create a CNAME record:

• Host: www
• Target / Value: <your-username>.github.io

1. 1
   Check Enforce HTTPS on GitHub for automatic SSL encryption.