How to Deploy a Website with GitHub Pages

If you already have a static website, just HTML, CSS, and maybe a bit of JavaScript and it’s on GitHub, GitHub Pages makes it easy to put it live on the internet without needing any extra tools or hosting service. It’s completely free and works well for personal projects, portfolios, small demos, or simple landing pages.

Once it’s set up, anyone can visit your site using a link like https://yourusername.github.io/your-repo-name/ You don’t need to buy a domain or pay for hosting.

Here’s how to get your site up and running in a few steps.

Step 1: Go to the Repository on GitHub

Open the GitHub repository that contains your static site. Make sure your main HTML file is named index.html and is located in the root of the repo (not in a subfolder unless you're using a docs folder intentionally).

Step 2: Open the Pages Settings

1. On the repository page, click the Settings tab.

2. In the left sidebar, scroll down and click on Pages (under “Code and automation”).

3. Under Source, you’ll see a dropdown labeled “None” or whatever the current setup is.
   Click it and select:

   • Branch: Choose main (or master, depending on your repo)

   • Folder: Choose / (root) if your index.html is in the root folder
     Or choose /docs if your files are inside a folder named docs

4. Click Save.

Step 3: Wait for the Deployment Link

Once you save, GitHub will process your site. After a few seconds, refresh and you will see this

Click the link to view your website. If it doesn’t load right away, give it a minute or two and refresh.

Notes to Keep in Mind

• GitHub Pages only works for static files. That means HTML, CSS, JavaScript. It won’t run any backend code like Node.js or PHP.

• Make sure your index.html is correctly placed. GitHub looks for it in the root or docs folder depending on what you selected.

• If your CSS or JS files aren’t loading, double-check your file paths. Use relative paths like ./style.css, not absolute ones.