Git Notes

Hub Benefits of Git and GitHub - Why They Matter Git vs GitHub Version Control System What Is Git What Is GitHub Configure Git - User Identity and Settings Create GitHub Account - Sign Up Guide First Git Repository - Getting Started Install Git on Linux - Complete Setup Guide Install Git on macOS - Installation Guide Install Git on Windows - Step-by-Step Guide Git Add - Stage Changes Git Clone - Copy Remote Repositories Locally Git Commit - Save Changes Git Diff - Compare Changes in Your Repository Git Ignore - Exclude Files from Version Control Git Init - Initialize Repository Git Log - View Commit History Git Status - Check Repository State Git Fetch - Download Remote Changes Without Merging Git Pull - Fetch and Merge Remote Changes Git Push - Upload Local Commits to Remote Repository Git Remote - Manage Remote Repository Connections Local Repository - Understanding Your Git Working Environment Remote Repository - Collaborate Through Shared Repositories Sync Local and Remote - Keep Repositories in Harmony Amend Commit - Fix Last Commit Delete Branch - Clean Up Branches Git Reset - Move HEAD and Undo Commits Git Restore - Discard Changes Git Revert - Safely Undo Changes Recover Lost Commits - Reflog Guide Fork Repository GitHub Pages GitHub Profile Setup GitHub Repositories GitHub Stars and Watchers Repository Settings Code Reviews Git Clone Git Fetch Git Pull Git Push GitHub Issues Labels and Milestones Open Source Contributions GitHub Project Boards Pull Requests - Propose and Review Code Changes Team Collaboration with Git and GitHub Automated Testing with GitHub Actions CI/CD with GitHub Actions Deployment Automation with GitHub Actions Introduction to GitHub Actions GitHub Actions Runners GitHub Actions Workflows Enterprise Git Workflows - Scale Git for Large Organizations Feature Branch Workflow - Isolate Development Work GitFlow Workflow - Structured Release Management Monorepo Workflow - Manage Multiple Projects in One Repository Trunk-Based Development - Ship Code Fast and Safely Deployment Workflows GitHub Pages Deployment Netlify Deployment from GitHub Render Deployment from GitHub Vercel Deployment from GitHub Branch Protection Rules - Secure Your Git Branches Personal Access Tokens - Authenticate with GitHub Repository Security Best Practices Secret Scanning - Detect Leaked Credentials in Code Signed Commits - Verify Commit Authenticity with GPG SSH Keys - Secure Git Authentication Without Passwords Git Bisect - Find Bugs with Binary Search Git Cherry-Pick - Apply Specific Commits to Any Branch Git Hooks - Automate Workflows with Git Events Git Internals - Understanding How Git Works Under the Hood Git Stash - Temporarily Save Uncommitted Changes Git Submodules - Manage External Dependencies as Git Repos Git Tag - Mark Important Points in History Git Worktrees - Work on Multiple Branches Simultaneously Collaborative Web App Project Complete Team Workflow Project GitHub Actions Project - Build a CI/CD Pipeline Open Source Project Contribution - Guided Exercise Portfolio Project with Git - Showcase Your Skills Git Command Cheatsheet Git Interview Questions - Comprehensive Preparation Guide GitHub Interview Questions Scenario-Based Git Interview Questions Git Troubleshooting Guide Git Best Practices - Professional Development Habits Common Git Errors and Fixes - Quick Solutions Git Command Reference - Complete Command Guide Learning Resources - Continue Your Git & GitHub Education Branch Strategies - Choosing the Right Git Branching Model Create Branch in Git - Start New Development Lines Fast-Forward Merge in Git - Clean Linear History Git Branch Git Checkout Git Merge Git Rebase Merge Branches in Git - Combine Development Work Merge Conflicts - Resolve Git Conflicts Like a Pro Switch Branch in Git - Navigate Between Branches

GitHub Pages Deployment

GitHub Pages is a free static site hosting service provided by GitHub that publishes websites directly from a repository. It is perfect for project...

GitHub Pages is a free static site hosting service provided by GitHub that publishes websites directly from a repository. It is perfect for project documentation, personal portfolios, blogs, and any static website. The best part is that deployment happens automatically when you push to the configured branch — no separate hosting setup, no server management, no monthly bills.

What GitHub Pages Supports

GitHub Pages serves static content — HTML, CSS, JavaScript, images, and fonts. It does not run server-side code (no Node.js, Python, or PHP). However, with static site generators and frontend frameworks that produce static builds, you can create sophisticated websites.

Common uses for GitHub Pages:

Personal portfolio websites
Project documentation sites
Technical blogs (using Jekyll, Hugo, or Gatsby)
Landing pages for open source projects
Frontend-only web applications (React, Vue, Angular builds)

Setting Up GitHub Pages

Method 1: Repository Settings

Go to your repository on GitHub
Navigate to Settings → Pages
Under "Source," select a branch (usually main or gh-pages)
Choose the root folder (/ or /docs)
Click Save

Your site will be available at https://username.github.io/repository-name/.

Method 2: GitHub Actions Workflow

For more control over the build process:

Example

# .github/workflows/deploy-pages.yml name: Deploy to GitHub Pages on: push: branches: [main] permissions: contents: read pages: write id-token: write jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: '20' - name: Install dependencies run: npm ci - name: Build site run: npm run build - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: './dist' deploy: needs: build runs-on: ubuntu-latest environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4

Deploying a React Application

Build your React app and deploy the output:

bash example

# In your React project
npm run build
# This creates a 'build' or 'dist' folder with static files

Configure your package.json:

json example

{
  "homepage": "https://username.github.io/my-react-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Install the deployment package:

bash example

npm install --save-dev gh-pages
npm run deploy

This pushes your build folder to the gh-pages branch, which GitHub Pages serves.

Custom Domains

You can use your own domain name instead of the default github.io URL:

Purchase a domain from a registrar
Add a CNAME file to your repository containing your domain:

Example

www.yourdomain.com

Configure DNS records with your registrar:

Type	CNAME
Name	www
Value	username.github.io
Type	A
Name	@

Enable HTTPS in repository settings (GitHub provides free SSL certificates)

Jekyll Integration

GitHub Pages has built-in support for Jekyll, a static site generator:

bash example

# Create a simple Jekyll site
mkdir my-blog && cd my-blog
git init

# Create _config.yml
cat > _config.yml << EOF
title: My Developer Blog
description: Writing about code and technology
theme: minima
EOF

# Create your first post
mkdir _posts
cat > _posts/2024-01-15-hello-world.md << EOF
Welcome to my blog! This is my first post.
EOF

git add .
git commit -m "Initial Jekyll site"
git push origin main

GitHub automatically builds Jekyll sites — no GitHub Actions workflow needed.

Troubleshooting Common Issues

Site shows a 404:

Verify the source branch and folder in Settings → Pages
Check that index.html exists in the root of your published folder
Wait a few minutes — deployment is not instant

CSS and JavaScript not loading:

Check your base URL. For project pages, paths must be relative or include the repository name
In React: set homepage in package.json
In Vite: set base: '/repo-name/' in vite.config.js

Build failures:

Check the Actions tab for build logs
Ensure your dependencies are properly listed in package.json
Test the build locally before pushing: npm run build

Custom domain not working:

DNS propagation takes up to 48 hours
Verify CNAME file is in the published branch
Check DNS records with: dig www.yourdomain.com

Environment Variables for Builds

For builds that need environment variables:

yaml example

steps:
  - name: Build
    run: npm run build
    env:
      REACT_APP_API_URL: https://api.production.com
      VITE_GA_ID: G-XXXXXXXXXX

Never put secrets in frontend builds — everything in the output is visible to users.

Key Takeaways

GitHub Pages provides free, automated hosting for static websites directly from your repository. It supports custom domains with HTTPS, integrates with static site generators, and deploys automatically on push. For any project that produces static output — documentation, portfolios, blogs, or frontend applications — GitHub Pages eliminates the need for external hosting services and keeps your deployment workflow entirely within GitHub.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for GitHub Pages Deployment.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this Git & GitHub topic.

Search Terms

git-github, git & github, git, github, deployment, pages, github pages deployment

Related Git & GitHub Topics

Continue learning this concept

DeploymentDeployment WorkflowsDeployment workflows define how your code travels from a developer\DeploymentNetlify Deployment from GitHubNetlify is a cloud platform that automates the build and deployment of web applications directly from your GitHub repository. Every time you push code,...DeploymentRender Deployment from GitHubRender is a modern cloud platform that deploys web applications, APIs, databases, and background workers directly from GitHub repositories. Unlike platforms...DeploymentVercel Deployment from GitHubVercel is a cloud platform built by the creators of Next.js, optimized for frontend frameworks and serverless functions. It provides the fastest path from a...Github ActionsDeployment Automation with GitHub ActionsDeployment automation removes the human from the deployment process, replacing manual steps with reliable, repeatable workflows. With GitHub Actions, you...Github FundamentalsGitHub PagesGitHub Pages is a free hosting service that turns your GitHub repository into a live website. It serves static content directly from your repository, making...

PreviousDeployment Workflows NextNetlify Deployment from GitHub

Git Notes

GitHub Pages Deployment

GitHub Pages is a free static site hosting service provided by GitHub that publishes websites directly from a repository. It is perfect for project...

What GitHub Pages Supports

Common uses for GitHub Pages:

Personal portfolio websites
Project documentation sites
Technical blogs (using Jekyll, Hugo, or Gatsby)
Landing pages for open source projects
Frontend-only web applications (React, Vue, Angular builds)

Setting Up GitHub Pages

Method 1: Repository Settings

Go to your repository on GitHub
Navigate to Settings → Pages
Under "Source," select a branch (usually main or gh-pages)
Choose the root folder (/ or /docs)
Click Save

Your site will be available at https://username.github.io/repository-name/.

Method 2: GitHub Actions Workflow

For more control over the build process:

Example

Deploying a React Application

Build your React app and deploy the output:

bash example

# In your React project
npm run build
# This creates a 'build' or 'dist' folder with static files

Configure your package.json:

json example

{
  "homepage": "https://username.github.io/my-react-app",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Install the deployment package:

bash example

npm install --save-dev gh-pages
npm run deploy

This pushes your build folder to the gh-pages branch, which GitHub Pages serves.

Custom Domains

You can use your own domain name instead of the default github.io URL:

Purchase a domain from a registrar
Add a CNAME file to your repository containing your domain:

Example

www.yourdomain.com

Configure DNS records with your registrar:

Type	CNAME
Name	www
Value	username.github.io
Type	A
Name	@

Enable HTTPS in repository settings (GitHub provides free SSL certificates)

Jekyll Integration

GitHub Pages has built-in support for Jekyll, a static site generator:

bash example

# Create a simple Jekyll site
mkdir my-blog && cd my-blog
git init

# Create _config.yml
cat > _config.yml << EOF
title: My Developer Blog
description: Writing about code and technology
theme: minima
EOF

# Create your first post
mkdir _posts
cat > _posts/2024-01-15-hello-world.md << EOF
Welcome to my blog! This is my first post.
EOF

git add .
git commit -m "Initial Jekyll site"
git push origin main

GitHub automatically builds Jekyll sites — no GitHub Actions workflow needed.

Troubleshooting Common Issues

Site shows a 404:

Verify the source branch and folder in Settings → Pages
Check that index.html exists in the root of your published folder
Wait a few minutes — deployment is not instant

CSS and JavaScript not loading:

Check your base URL. For project pages, paths must be relative or include the repository name
In React: set homepage in package.json
In Vite: set base: '/repo-name/' in vite.config.js

Build failures:

Check the Actions tab for build logs
Ensure your dependencies are properly listed in package.json
Test the build locally before pushing: npm run build

Custom domain not working:

DNS propagation takes up to 48 hours
Verify CNAME file is in the published branch
Check DNS records with: dig www.yourdomain.com

Environment Variables for Builds

For builds that need environment variables:

yaml example

steps:
  - name: Build
    run: npm run build
    env:
      REACT_APP_API_URL: https://api.production.com
      VITE_GA_ID: G-XXXXXXXXXX

Never put secrets in frontend builds — everything in the output is visible to users.

Key Takeaways

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for GitHub Pages Deployment.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this Git & GitHub topic.

Search Terms

git-github, git & github, git, github, deployment, pages, github pages deployment

Related Git & GitHub Topics

Continue learning this concept

PreviousDeployment Workflows NextNetlify Deployment from GitHub