Web Development
How to host an HTML website on GitHub Pages
Learn how to create a basic HTML website and host it for free on the internet using GitHub Pages.
Building an HTML website on your own computer is great, but until you host it on the internet, no one else can see it. One of the best, most reliable, and 100% free ways to host a static website (HTML, CSS, JavaScript) is by using GitHub Pages.
In this extensive guide, we will walk through the entire process step by step. We will cover creating the necessary folders on Mac, Linux, and Windows, writing your first HTML file, and uploading it to GitHub to make it live.
Step 1: Create a Folder for Your Website
The first thing you need is a dedicated folder on your computer where all your website files will live. You can do this by right-clicking on your desktop and creating a new folder, but using the terminal (or command prompt) is faster and essential to learn.
For Mac and Linux
Open your Terminal application and run the following commands to create a folder on your Desktop and move into it:
cd ~/Desktop
mkdir my-website
cd my-website
For Windows
Open Command Prompt or PowerShell and run these commands to create a folder on your Desktop:
cd Desktop
mkdir my-website
cd my-website
Step 2: Create an HTML File (index.html)
A website needs an entry point. Web servers automatically look for a file named index.html to display when someone visits your URL. Let's create it.
You can open the my-website folder in your favorite text editor (like Visual Studio Code, Notepad, or TextEdit), create a new file, and save it as index.html.
Paste the following simple HTML code into your index.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 Awesome Website</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first website hosted on GitHub Pages.</p>
</body>
</html>
Save the file. If you double-click index.html now, it will open in your browser, but the URL will start with file:///. This means it is only visible to you.
Step 3: Create a GitHub Repository
To use GitHub Pages, you need a free GitHub account. Once you are logged in:
- Click the + icon in the top right corner of GitHub and select New repository.
- In the "Repository name" field, type
my-website. - Make sure the repository is set to Public (GitHub Pages is only free for public repositories).
- Leave everything else as default and click the Create repository button.
Step 4: Upload Your Files to GitHub
After creating the repository, GitHub will show you a page with instructions. If you are comfortable with the command line and Git, you can push your code via the terminal. However, the easiest way for beginners is to use GitHub's web interface:
- On your new repository page, click the "uploading an existing file" link.
- Drag and drop your
index.htmlfile into the box on the screen. - Scroll down to the "Commit changes" section and click the green Commit changes button.
Your index.html file is now safely stored on GitHub!
Step 5: Enable GitHub Pages
Now for the magic. We need to tell GitHub to take that HTML file and serve it as a live website.
- In your GitHub repository, click on the Settings tab (the gear icon near the top).
- In the left sidebar, click on Pages.
- Under the "Build and deployment" section, look for Source and ensure it is set to "Deploy from a branch".
- Under "Branch", change the dropdown from "None" to main (or master), and click Save.
That's it! It usually takes about 1-2 minutes for GitHub to build your site. Once it is ready, you will see a banner at the top of the Pages settings screen saying: "Your site is live at https://YOUR-USERNAME.github.io/my-website/"
Next Steps
Now that you have a live website, you can start adding more complex features to it. For example, if you want to add a contact form or registration form to your new static site, you don't need a server! You can just write the HTML and use a backend service to capture the data.
Check out our step-by-step guide on how to create a registration form in HTML to add a working form to your new GitHub Pages site.