Build a Personal Portfolio Website in Just 1 Day — Step-by-Step Guide for Beginners

📘 Chapter 6: Going Live — Hosting with GitHub Pages

🧭 What You’ll Learn

By the end of this chapter, you'll be able to:

• Set up GitHub and create a repository for your portfolio
• Upload your website files using GitHub's interface or Git
• Enable GitHub Pages to host your site for free
• Use a custom domain name (optional)
• Troubleshoot common deployment issues
• Maintain and update your site easily

🌐 Why GitHub Pages?

GitHub Pages is a free hosting service offered by GitHub that allows you to publish static websites (HTML, CSS, JS) directly from a GitHub repository.

✅ Benefits of GitHub Pages

• Free forever (even for custom domains)
• Fast and reliable (hosted on GitHub’s global CDN)
• HTTPS included by default
• Easy integration with Git version control
• Supports custom domains and Jekyll static site generators

🔧 Step-by-Step Guide to Deploy Your Portfolio with GitHub Pages

🛠️ Step 1: Set Up a GitHub Account

If you haven’t already:

• Go to https://github.com
• Click Sign Up and create your free account
• Choose a username that matches your brand (e.g., alexsmith-dev)

📁 Step 2: Create a New Repository

1. Click the "+" icon in the top-right > New repository
2. Name it something relevant like portfolio or my-website
3. Set the repository to Public
4. Check the box to initialize with a README
5. Click Create repository

📂 Step 3: Upload Your Website Files

You have two options:

🅰️ Upload via GitHub Web Interface (Easy)

1. Click Add file > Upload files
2. Drag and drop your website files (index.html, css, images, etc.)
3. Commit the changes

🅱️ Upload Using Git (Command Line)

If you have Git installed locally:

bash

# Clone the repo

git clone https://github.com/yourusername/portfolio.git

# Move into the folder

cd portfolio

# Add your website files

cp -r ../local-website/* .

# Commit and push

git add .

git commit -m "Initial commit"

git push origin main

🚀 Step 4: Enable GitHub Pages

1. Go to your repo's main page
2. Click Settings > Pages (in the left menu)
3. Under “Source”, choose:
• Branch: main
• Folder: / (root)
4. Click Save

After a few seconds, you’ll see a confirmation message:

“Your site is published at https://yourusername.github.io/portfolio/”

🌍 Accessing Your Live Website

You can now visit your site via the URL:

text

https://yourusername.github.io/repository-name/

For example:

text

https://alexsmith.github.io/portfolio/

🧱 Optional: Deploy from /docs Folder

If your website files are inside a docs/ subfolder:

• In the Pages settings, choose /docs as the source
• Place your index.html inside docs/

This is useful if your main repo includes source code or other files.

🌐 Step 5: Add a Custom Domain (Optional)

Want a cleaner URL like www.alexsmith.dev?

🪜 How to Set It Up:

A. Buy a domain

Use providers like Namecheap, GoDaddy, or Google Domains.

B. Point DNS to GitHub

Set your DNS records:

C. Add a CNAME file in your repo root:

CNAME

www.yourcustomdomain.com

D. Enforce HTTPS

1. Go to Settings > Pages
2. Check "Enforce HTTPS"

GitHub will provision an SSL certificate automatically (can take up to 24 hours).

📊 Table: Deployment Checklist

🧪 Testing Your Site

After publishing:

• Open the link on multiple devices
• Click every navigation link and button
• Test form submissions if included
• Use Lighthouse or GTmetrix to analyze speed and performance

🧰 Updating Your Site

Every time you make changes:

1. Edit your files locally
2. Commit and push to GitHub:

bash

git add .

git commit -m "Updated About section"

git push origin main

3. GitHub Pages will auto-update your live site within seconds.

❌ Common Deployment Errors & Fixes

🧠 Advanced Tips

• Create a single-page site for easier maintenance
• Use a separate gh-pages branch for deployment (optional)
• Add a 404.html file to handle broken links gracefully
• Use GitHub Actions to deploy from build output (React, Vue, Jekyll)

🔁 Sample Deployment Automation (GitHub Actions)

For advanced users building with React or another framework:

yaml

name: Deploy

on:

  push:

    branches:

      - main

jobs:

  deploy:

    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - run: npm install && npm run build

      - run: git add build -f

      - run: git commit -m "Deploy"

      - run: git push origin `main`

📌 Summary

GitHub Pages offers a simple and free way to host your portfolio.

You’ve now learned how to:

• Set up and organize a GitHub repository
• Upload your portfolio files
• Enable GitHub Pages hosting
• Access and share your live website
• Customize your domain and troubleshoot errors

Your site is now online, professional, and accessible to the world!