Publish your site — HTML & CSS Foundations

Put your homepage on the public web for free with GitHub Pages, and check it like a professional.

Why this matters

A site on your laptop is practice; a site with a public URL is a portfolio piece. Hiring managers for front-end, UI and design roles want links they can click, and a live homepage is the first link most beginners can show. It also completes the journey from the first lesson: now your files are on a server, answering other people's HTTP requests.

The good news: a static site (HTML, CSS, images and optional JavaScript, with no server code) can be hosted free, with HTTPS, and without a credit card.

Your options

Host	How you publish	Good for
GitHub Pages	push files to a GitHub repository	portfolio sites, project pages; your code is visible too
Netlify or Cloudflare Pages	drag and drop a folder, or connect a Git repository	quick deploys, previews of each change
Codeberg Pages and others	similar Git-based publishing	alternatives to GitHub

All of them have free tiers for small static sites. This lesson uses GitHub Pages, because a GitHub profile is useful in its own right for developer jobs, and you will use Git and GitHub throughout your career (see the Git & the Command Line course). Free tiers and their limits change, so read the current terms on each provider's own site before you rely on one. Checked on 2026-10-23.

Prepare your files

Put your site in one folder. The home page must be named index.html; web servers serve that file when someone visits the folder's URL.
Use relative paths for your own files: href="styles.css", src="images/me.jpg". Paths like C:\Users\sam\Desktop\me.jpg only work on your machine.
File names on most servers are case-sensitive: Me.JPG and me.jpg are different files. Lowercase names with hyphens (about-me.html) avoid surprises.
Remove anything private: your home address, phone number, unfinished notes in comments and any password or key. Everything you publish, including your HTML comments and file history in a public repository, can be read by anyone.

Publish with GitHub Pages

Create a free GitHub account if you do not have one, and turn on two-factor authentication in your account settings.
Create a new public repository, for example homepage.
Upload your files: on the repository page choose Add file > Upload files, drag in index.html, your CSS and your images, and commit. (If you know Git, git push works too.)
Go to Settings > Pages. Under Build and deployment, choose Deploy from a branch, select the main branch and the / (root) folder, and save.
Wait a minute or two. The Pages settings show your URL, usually https://<username>.github.io/homepage/. A repository named exactly <username>.github.io is served at https://<username>.github.io/ instead.

Every time you commit a change to main, the site rebuilds automatically. GitHub's own documentation at docs.github.com/pages has the current screens and limits.

Check it like a professional

Publishing is not the end. Run through this checklist on the live URL:

Validate: paste the URL into validator.w3.org and fix any errors.
Accessibility: run Lighthouse (Accessibility category) or the WAVE checker, then do a keyboard-only pass with Tab.
Responsive: open the URL on a real phone and in device mode at several widths; zoom to 200%.
Network: open the Network tab and reload. Every file should return 200; a 404 means a wrong or case-mismatched path.
Share preview: your <title> and a <meta name="description" content="..."> are what appear in search results and many link previews.

Custom domains (optional)

You can point a domain you own, such as samrivera.dev, at GitHub Pages or Netlify. Domains cost money every year, and you set them up with DNS records at your domain registrar (the DNS from the first lesson). A free github.io address is perfectly fine for a first portfolio.

Taking it down

To unpublish, return to Settings > Pages and unpublish the site, or delete the repository. Remember that copies may survive in search caches for a while, which is one more reason never to publish anything private.

Common mistakes

No index.html, or a home page called Index.html or home.html, so the URL shows a 404.
Absolute paths to your own computer and case mismatches, which cause broken images and missing CSS.
Publishing secrets or personal details in a public repository.
Never checking the live site after publishing.

Quick recap

Static sites host free with HTTPS on GitHub Pages, Netlify, Cloudflare Pages and similar services.
Name the home page index.html, use relative lowercase paths, and remove private details.
On GitHub: public repository, upload files, Settings > Pages > deploy from main.
Validate, test accessibility, test on a phone and check the Network tab on the live URL.

Try it

Open the Do tab and publish your homepage, then add the live link to your profile or CV.