← Back to Chapters

GitHub Pages

? GitHub Pages

? Quick Overview

GitHub Pages is a service that allows you to host static websites directly from a GitHub repository. It's an easy and free way to deploy personal projects, portfolios, blogs, documentation, and other static content directly from a GitHub repository.

? Key Concepts

  • Free static hosting directly from GitHub
  • Automatic deployment from repository branches
  • Supports HTML, CSS, JavaScript, and Jekyll
  • Custom domain and HTTPS support

? Syntax / Theory

GitHub Pages works by taking files from a selected branch (usually main or master) and publishing them as a static website. Any HTML file named index.html becomes the entry point of the site.

? Code Example

? View Code Example
// Basic index.html file for GitHub Pages
<!DOCTYPE html>
<html>
<head>
<title>My GitHub Pages Site</title>
</head>
<body>
<h1>Hello GitHub Pages</h1>
</body>
</html>

? Live Output / Explanation

Once this file is pushed to the selected GitHub Pages branch, the website becomes accessible at a URL like https://username.github.io/repository-name/. Any changes pushed later are automatically reflected.

? Interactive / Visual Example

You can enhance GitHub Pages sites using CSS animations or JavaScript interactions such as theme toggles, sliders, or SVG graphics to make the static site feel dynamic.

? Use Cases

  • Personal portfolios
  • Project documentation
  • Blogs using Jekyll
  • Demo websites for frontend projects

? Tips & Best Practices

  • Keep your repository clean and well-organized
  • Use responsive design for mobile compatibility
  • Enable HTTPS for custom domains

? Try It Yourself

  • Create a repository and add an index.html file
  • Enable GitHub Pages from repository settings
  • Update the file and observe live changes