Getting Started with GitHub Pages

Published: November 15, 2024 Read time: 5 min Author: Abid Hasan

What is GitHub Pages?

GitHub Pages is a free static site hosting service provided by GitHub. It's perfect for hosting your portfolio, documentation, or any static website. You can deploy directly from your GitHub repository with zero configuration.

Why Use GitHub Pages?

  • Free Hosting: No monthly fees or limitations
  • Custom Domain Support: Use your own domain name
  • SSL/HTTPS: Automatic HTTPS certificate
  • Version Control: Built-in git version control
  • Easy Deployment: Push to GitHub and your site goes live

Getting Started: Step by Step

Step 1: Create a Repository

First, create a new repository on GitHub. If you want your site at username.github.io, name your repository exactly that. Otherwise, name it anything and your site will be at username.github.io/repository-name.

Step 2: Enable GitHub Pages

Go to your repository settings, scroll down to the "Pages" section, and select which branch to deploy from (usually main or docs).

Step 3: Create Your Content

Add an index.html file to your repository. This will be your homepage: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Portfolio</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to my portfolio.</p>
</body>
</html>

Step 4: Add a Custom Domain

Create a CNAME file in your repository with your domain name: 

yourdomain.com

Then, update your domain's DNS settings to point to GitHub Pages. Add these DNS records:

  • A records: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153
  • CNAME record: username.github.io

Best Practices

  • Keep your HTML semantic and accessible
  • Use CSS for styling and responsive design
  • Optimize images for web performance
  • Make sure your site is mobile-friendly
  • Test your site before deploying

Conclusion

GitHub Pages is an excellent choice for hosting your portfolio or static website. It's free, reliable, and integrates seamlessly with your GitHub workflow. Start building today and show the world your projects!

← Back to Blog Next Post →