Deploying Your Site Live (GitHub Pages & Netlify)
Turn your folder of HTML files into a real website on the internet with its own URL — the moment your coursework becomes a portfolio you can share with anyone.
What you will learn
- Explain what “deploying” and “hosting” mean
- Publish a static site free with GitHub Pages
- Publish a static site free with Netlify by drag-and-drop
What does “deploy” mean?
So far your pages live on your own computer — only you can see them. Deploying (also called hosting or “going live”) means copying your files onto a server — a computer that is always on and connected to the internet — so that anyone, anywhere, can open your site through a normal web address (URL).
Because an HTML/CSS/JavaScript site is just files (no database, no server-side code), it is called a static site, and static sites can be hosted free on services like GitHub Pages and Netlify. This is the final step that turns “a folder on my laptop” into “a website I can put on my CV”.
Note: A static site is one made only of files the browser reads directly — HTML, CSS, images, client-side JavaScript. It has no back-end doing work per visitor, which is exactly why it can be hosted for free. Your home page must be named index.html so the host knows which file to open first.
Two easy, free hosts
| Host | Best when | How you publish |
|---|---|---|
| GitHub Pages | Your code is already on GitHub | Flip a setting on your repo |
| Netlify | You want the fastest possible start | Drag your folder onto the website |
| Vercel / Cloudflare Pages | Alternatives, same idea | Connect a repo or drag a folder |
Option A — GitHub Pages (from a repo)
If you finished the Git & GitHub lesson and pushed a project, GitHub can host it for free straight from your repository. There is nothing new to upload — you just turn the feature on.
- Make sure your site is pushed to a GitHub repo and the home page is named
index.html. - On the repository page, click Settings.
- In the left sidebar choose Pages.
- Under Branch, pick
mainand the/ (root)folder, then click Save. - Wait about a minute, refresh, and GitHub shows your live URL at the top of the Pages screen.
Your site appears at an address shaped like this — share it with anyone:
https://yourname.github.io/my-site/Note: Output:
Visiting that URL in any browser shows your real, live website. The pattern is always https://<your-github-username>.github.io/<repository-name>/.
Tip: To update a GitHub Pages site, just push new commits (git add . → git commit → git push). GitHub rebuilds the live site automatically within a minute or two — you never re-do the Settings step.
Option B — Netlify (drag and drop)
Netlify is the fastest way to see your site online — no Git required. You literally drag your project folder onto a web page.
- Go to
netlify.comand sign up free. - Find the “drag and drop your site folder here” drop zone (look for “Deploy manually” / “Sites”).
- Drag the whole folder that contains your
index.htmlonto it. - Netlify uploads it and, in seconds, gives you a live URL like
https://sunny-otter-12ab34.netlify.app. - Click Site settings → Change site name to rename it to something tidier.
Note: Output: Netlify shows “Your site is live” with a clickable URL. Open it and your site loads from the internet, served to anyone you share the link with.
Watch out: Drag the folder, not a single file. If you drag only index.html, your images and CSS (which live in sibling files) will be missing and the site will look broken. The whole folder keeps every file and its paths intact.
After it is live: a quick checklist
- Open the live URL on your phone, not just your laptop, to catch mobile issues.
- Click every link and check every image actually loads (broken images usually mean a wrong file path).
- Run the live URL through the W3C Validator (Validate by URI) to confirm clean markup.
- Send the link to a friend and ask them to open it — proof it truly works for other people.
Watch out: File paths and capitalisation matter once you are online. Your computer may treat Logo.PNG and logo.png as the same file; many servers do not. If an image works locally but breaks live, check the exact filename and the path are spelled identically.
Tip: Both hosts let you add a custom domain (like yourname.com) later — you buy the domain and point it at the host. For now, the free .github.io or .netlify.app URL is perfect for a portfolio and costs nothing.
Q. Why can an HTML/CSS/JavaScript site be hosted for free on GitHub Pages or Netlify?
✍️ Practice
- Deploy your Personal Profile Page with EITHER GitHub Pages or Netlify and open the live URL on your phone.
- After it is live, change a heading in your code, redeploy (push or re-drag), and confirm the change appears at the same URL.
- Run your live URL through validator.w3.org using “Validate by URI”.
🏠 Homework
- Get one project fully live and share the URL with two people. Write down the URL — it is the centrepiece of your portfolio and the link you give to employers.