TopicTrick Logo
Topictrick
DevOpsGitHub

GitHub Pages: Hosting Your Static Website

TT
TopicTrick Team
•
GitHub Pages: Hosting Your Static Website
← Back to GitHub Mastery

GitHub Pages: Hosting Your Static Website

1. User/Org vs. Project Pages

  • User/Org Page: yourname.github.io. Every account gets exactly ONE. It must be in a repo named yourname.github.io. Best for your personal Portfolio or Blog.
  • Project Page: yourname.github.io/project-name. You can have an INFINITE number of these. Best for landing pages and technical documentation for your specific code libraries.

2. The 60-Second Deployment

  1. Branch: Go to Settings -> Pages.
  2. Source: Select the main branch (or a specific /docs folder).
  3. Click Save: In about 1 minute, your site is live at the URL GitHub provides.

3. Custom Domains and SSL

A professional website doesn't use a github.io link.

  1. Buy a domain: (e.g., yourname.com).
  2. DNS Records: Point your domain to GitHub's IP addresses ($185.199.108.153$, etc.).
  3. SSL: GitHub provides Free HTTPS (via Let's Encrypt). You never have to worry about the "Not Secure" warning in Chrome ever again.

4. Modern Frameworks and GitHub Actions

While GitHub Pages was built for simple HTML, you can use it for React, Astro, or Vue.

  • The Problem: GitHub doesn't know how to "Build" a React app.
  • The Solution: GitHub Actions. You write a tiny YAML script (Module 280) that automatically runs npm build and then sends the results to the gh-pages branch. This is the ultimate "Push to Deploy" workflow.

Frequently Asked Questions

Is it really free? Yes. There are no hidden costs. However, it is only for "Static" sites. If you need a database (SQL) or a backend (PHP/Python), you cannot use GitHub Pages alone; you would need something like Netlify or Vercel which can handle server-side functions.

Can I use it for commercial sites? Yes, but with limits. You cannot use it to run a massive e-commerce store or a high-traffic advertising site. For a personal brand, a portfolio, or an open-source landing page, it is the perfect solution.

Key Takeaway

GitHub Pages is the "Ultimate Shortcut" for web deployment. By mastering the distinction between User and Project pages and integrating modern GitHub Actions builders, you gain the ability to ship beautiful, professional websites to the world for the price of zero dollars and zero management time.

Read next: Introduction to GitHub Actions: Automation Redefined →

Part of the GitHub Mastery Course — engineering the host.