Web code

Update
News channel for coding related:
Subscribe for new tutorials and tips.
Home

How to Deploy an HTML, CSS & JavaScript Website for Free Using GitHub Pages

How to Deploy an HTML, CSS & JavaScript Website for Free Using GitHub Pages

Building a website with HTML, CSS, and JavaScript is only the first part of web development. Once your website is ready, the next step is to make it available on the internet so that other people can access it.



You do not always need to purchase web hosting to publish a simple frontend website. If your project contains HTML, CSS, JavaScript, images, and other static files, you can host it using GitHub Pages.

In this tutorial, we will go through the complete process of deploying a website using GitHub Pages. This guide is written for beginners, so every important step is explained in detail.

What You Will Learn

  1. What GitHub Pages is
  2. How to prepare an HTML, CSS and JavaScript project
  3. How to create a GitHub repository
  4. How to upload website files
  5. How to configure GitHub Pages
  6. How to get your website's public URL
  7. How to update your website after deployment
  8. How to fix common deployment problems
  9. How to connect a custom domain

What Is GitHub Pages?

GitHub Pages is a website hosting service provided by GitHub. It allows you to publish static files stored in a GitHub repository as a website.

A static website is a website where the main files are delivered to the visitor without requiring a traditional server-side application to generate the page. HTML, CSS, JavaScript, images, fonts, and similar frontend resources can be used in a GitHub Pages project.

For example, if you have created a portfolio using HTML and CSS, you can upload the project to GitHub and use GitHub Pages to make it accessible through a public web address.

GitHub Pages is particularly useful for:

  • Personal portfolio websites
  • Resume websites
  • Landing pages
  • Documentation websites
  • Frontend projects
  • Student projects
  • Small JavaScript applications
  • Static blogs

What Do You Need Before Starting?

Before deploying your website, you should have the following:

  • A GitHub account
  • An HTML, CSS and JavaScript project
  • A web browser
  • An internet connection

You do not need advanced Git knowledge if you are using GitHub's web interface to upload your files.

Step 1: Prepare Your Website

The first step is to make sure that your website works correctly before uploading it to GitHub.

A simple website might have the following structure: 

my-website/
│
├── index.html
├── style.css
├── script.js
│
└── images/
    ├── logo.png
    └── background.jpg

The most important file here is index.html. This file usually acts as the main page of your website.

You should also make sure that the paths used inside your HTML file correctly point to your CSS, JavaScript, and image files.

Example HTML File

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>This website is hosted using GitHub Pages.</p>

    <button onclick="showMessage()">Click Me</button>

    <script src="script.js"></script>

</body>

</html>

Example CSS File

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

Example JavaScript File

function showMessage() {
    alert("Hello! Welcome to my website.");
}

Before continuing, open index.html directly in your browser and test the website. Make sure the CSS is loading, buttons are working, and images are displaying correctly.

Important:

Fix errors in your project before deploying it. Deployment does not automatically correct broken file paths or JavaScript errors.

Step 2: Create a GitHub Account

If you already have a GitHub account, you can skip this step.

If you do not have one, open GitHub in your browser and create an account.

Visit GitHub

After creating your account, log in to your GitHub account.

Step 3: Create a New Repository

A repository is a place where your project files are stored on GitHub. For this tutorial, we will create a repository specifically for our website.

After logging into GitHub, follow these steps:

  1. Click the + button in the top-right corner.
  2. Select New repository.
  3. Enter a name for your repository.
  4. Choose Public.
  5. Optionally add a description.
  6. Click Create repository.

For example: 

my-website

After creating the repository, GitHub will open the repository page. This is where we will upload our website files.

Step 4: Upload Your Website Files

Now we need to upload the files from your website project to the GitHub repository.

Inside the repository, select:

Add file → Upload files

Select the files from your website project. For example:

  • index.html
  • style.css
  • script.js
  • Images
  • Other required files

After uploading, your repository should look similar to this: 

my-website/
│
├── index.html
├── style.css
├── script.js
└── images/

Why Is index.html Important?

When someone visits your website, the server needs an entry page to display. For a simple static website, this is normally index.html.

Make sure the filename is exactly: 

index.html

Avoid accidentally using: 

Index.html
index.htm
home.html

Step 5: Commit the Uploaded Files

After selecting your files, GitHub will show a commit section. A commit records the changes made to your repository.

You can use a message such as: 

Initial website upload

Then click Commit changes.

Your website files are now stored inside the repository.

Step 6: Enable GitHub Pages

Now we need to enable GitHub Pages for the repository.

Open your repository and go to:

Settings → Pages

Find the Build and deployment section.

Select: 

Source: Deploy from a branch

Branch: main

Folder: / (root)

Click Save.

GitHub will now start deploying your website.

Step 7: Get Your Live Website URL

After GitHub Pages finishes deploying the repository, GitHub will provide a public URL for your website.

A project website generally uses a URL similar to: 

https://USERNAME.github.io/REPOSITORY-NAME/

For example: 

https://example.github.io/my-website/

Open this address in your browser to check the published website.

Your website is now online.

You can share the GitHub Pages URL with other people.

Step 8: Update Your Website

You can update your website whenever you make changes to your HTML, CSS, or JavaScript files.

For example, change: 

<h1>Welcome to My Website</h1>

to: 

<h1>Welcome to My New Website</h1>

Upload the updated file to GitHub and commit the changes. GitHub Pages will automatically publish the updated version.

Basic Workflow

Edit Website
      ↓
Save Changes
      ↓
Upload to GitHub
      ↓
Commit Changes
      ↓
GitHub Pages
      ↓
Updated Website

Common Problems and Solutions

1. 404 Page Not Found

If your website displays a 404 error, first check whether index.html is present in the correct publishing location.

Also check the selected branch and folder in the GitHub Pages settings.

2. CSS Is Not Loading

Make sure your HTML contains the correct stylesheet path: 

<link rel="stylesheet" href="style.css">

Also make sure style.css is uploaded to the repository.

3. JavaScript Is Not Working

Check that the JavaScript file is correctly connected: 

<script src="script.js"></script>

If it still does not work, open the browser developer console and check for JavaScript errors.

4. Images Are Not Showing

Check the image path carefully. For example, if the image is inside an images folder: 

<img src="images/logo.png" alt="Logo">

The folder name, filename, extension, and capitalization must match the actual file stored in your repository.

Can You Use a Custom Domain?

Yes. You can connect a custom domain to a GitHub Pages website.

For example, instead of: 

https://username.github.io/my-website/

you could use: 

www.example.com

You can configure this from:

Repository → Settings → Pages → Custom domain

You will also need to configure DNS records with your domain provider. A custom domain is optional; you can continue using the GitHub Pages address if you do not want to purchase a domain.

Can GitHub Pages Host PHP or Node.js?

GitHub Pages is designed for static websites. It works well with HTML, CSS, JavaScript, images, fonts, and other static resources.

It is not traditional server-side hosting for applications that require PHP, a Node.js server, or another backend runtime.

Technology Supported
HTML Yes
CSS Yes
JavaScript Yes
Images Yes
PHP No
Node.js Server No

Conclusion

GitHub Pages is a simple option for publishing static HTML, CSS, and JavaScript websites without using traditional web hosting.

The complete process is straightforward: 

HTML + CSS + JavaScript
          ↓
    GitHub Repository
          ↓
      Upload Files
          ↓
    Enable GitHub Pages
          ↓
      Live Website

Once you understand this process, you can use GitHub Pages for portfolios, landing pages, documentation, frontend projects, student projects, and many other static websites.

The most important things to remember are to keep your files organized, use the correct file paths, make sure index.html is in the correct location, and test the website after deployment.

Official GitHub Pages Resources

GitHub Pages Documentation

GitHub Pages Quickstart