11. Deploying to GitHub Pages

One of GitHub's most amazing features is **GitHub Pages**. It allows you to host static web sites (HTML, CSS, JavaScript, images) directly from a GitHub repository for **absolutely free**. It is the perfect way to publish portfolios, landing pages, documentation sites, or small client demos.

1. Preparing Your Site for Deployment

GitHub Pages only hosts static files. This means it **cannot** host server-side applications (like PHP, Node.js, Express, or Python backends) or dynamic database connections.

To deploy:

• Ensure your repository root contains an entry file named exactly index.html.
• Ensure all file path links (CSS, JS, images) are **relative** paths (e.g., use ./styles.css instead of absolute paths).

2. Deploying a Branch (Step-by-Step)

The easiest way to deploy is directly from your default branch (e.g., main):

1. Commit and push your static web files to your GitHub repository.
2. Navigate to your repository on GitHub and click the Settings tab.
3. In the left-hand sidebar menu under "Code and automation", click "Pages".
4. Under "Build and deployment", set the Source to "Deploy from a branch".
5. Under "Branch", select your branch (e.g., main) and the directory (usually / (root)).
6. Click the green "Save" button.

Within a minute, a banner will appear at the top of the Pages settings page showing your live URL, which follows this structure:

3. Using a Custom Domain

If you want to use your own professional domain (e.g., www.myportfoliosite.com) instead of the default github.io address:

1. Go back to your repository **Settings > Pages**.
2. Under "Custom domain", type your domain name and click **Save**.
3. Go to your Domain Registrar dashboard (e.g., GoDaddy, Namecheap) and configure your DNS settings:
   • Add an CNAME Record pointing to username.github.io.
   • Or add A Records pointing to GitHub Pages IP addresses:

     185.199.108.153
     185.199.109.153
     185.199.110.153
     185.199.111.153

4. Back on GitHub, check the box to "Enforce HTTPS" to ensure your custom site has an SSL security certificate!

4. Deploying via GH-Pages Dependency

If you are working with React or Vue and want to automate deployments via NPM packages:

# 1. Install the deployment tool
npm install gh-pages --save-dev

# 2. Add scripts to your package.json
"predeploy": "npm run build",
"deploy": "gh-pages -d build"

# 3. Deploy to GitHub Pages with one command
npm run deploy