Practical Exercise: Deploy a Portfolio Site to GitHub Pages With a Custom Domain

This capstone exercise brings together the most practically useful concepts from Module 6 into one complete, genuinely useful outcome: a live, publicly accessible portfolio website, deployed for free, optionally reachable through your own custom domain — a real, tangible deliverable you can actually keep and continue using after this course.

Learning Objectives

• Create the special repository required for a GitHub Pages user page.
• Build and push a simple portfolio site's HTML content.
• Configure GitHub Pages and confirm the site is live.
• Optionally connect a custom domain, configuring both DNS and the CNAME file.

Key Terms to Know Before This GitHub Pages Deployment Exercise

• Portfolio site: A personal website showcasing one's projects, skills, and background, commonly one of the first sites a developer deploys.
• Live verification: Confirming a deployed site is actually accessible and rendering correctly by visiting its resulting URL directly.
• End-to-end deployment: The complete process from local files through to a publicly accessible, live website, with no manual steps skipped.

How to Deploy a Portfolio Site to GitHub Pages, Step by Step

**Step 1: Create the special user page repository.** Following Lesson 1, create a new repository named exactly `your-username.github.io` (replacing with your actual GitHub username), since this specific name is what triggers GitHub Pages to serve it as your root-domain user page rather than a nested project page.

**Step 2: Clone it locally and build a simple portfolio page.**

```
git clone https://github.com/your-username/your-username.github.io.git
cd your-username.github.io
```

Create a basic `index.html` with your name, a short bio, and links to a few projects — kept intentionally simple for this exercise, since the focus is the deployment workflow, not elaborate design.

**Step 3: Commit and push.**

```
git add index.html
git commit -m "feat: initial portfolio site content"
git push origin main
```

**Step 4: Verify the live site.** Within a minute or two of pushing (Lesson 1), visit `https://your-username.github.io` directly in a browser and confirm your content renders correctly. Since this is the special user page repository, no separate 'enable Pages' step is even required — GitHub automatically recognizes and serves it based on the repository's name.

**Step 5 (optional): Connect a custom domain.** If you have access to a domain you own, following Lesson 2: add the four A records (for an apex domain) or one CNAME record (for a subdomain like `www`) at your domain registrar, pointing to GitHub Pages. Then add a `CNAME` file to your repository containing your domain:

```
echo "www.your-custom-domain.com" > CNAME
git add CNAME
git commit -m "feat: configure custom domain"
git push
```

**Step 6: Wait for DNS propagation and verify.** This can take anywhere from minutes to up to 24-48 hours. Once GitHub detects the domain is correctly configured, enable 'Enforce HTTPS' in Settings > Pages for a secure connection.

**Step 7: Iterate.** Since this is a real, live site tied to a normal Git repository, any future update follows the exact same, completely familiar workflow from every earlier module in this course: edit `index.html` (or add more pages/files), commit with a clear message, and push — the live site updates automatically within a minute or two, with no separate manual deployment step ever required.

This exercise deliberately produces something genuinely useful beyond the course itself: a real, live portfolio site you can continue building on, add real projects to over time, and reference as a live example of your Git and GitHub skills — directly connecting back to Module 4's lesson on GitHub profile presentation.

Portfolio Deployment Workflow: Visual Walkthrough

Draw a seven-step vertical flow: 1) 'Create repository named exactly your-username.github.io' → 2) 'git clone locally' → 3) 'Create index.html with portfolio content' → 4) 'git add, commit, push' → 5) 'Visit https://your-username.github.io — verify it's live (no separate Pages setup needed for user pages)' → 6) 'OPTIONAL: Add DNS records + CNAME file for a custom domain' → 7) 'Future updates: edit → commit → push — site auto-updates, no manual deploy step.'

Deployment Exercise Steps: Quick Reference Table

Step	Command / Action	Purpose
1. Create special repo	New repository named exactly your-username.github.io	Triggers GitHub Pages to serve it as your root-domain user page
2-4. Build + push content	git clone, create index.html, git add/commit/push	Populates the live site's content
5. Verify live	Visit https://your-username.github.io in a browser	Confirms deployment succeeded
6. (Optional) Custom domain	DNS records at registrar + CNAME file in repo	Connects your own domain to the site
7. Iterate	Edit, commit, push for any future update	Site auto-updates — same familiar Git workflow throughout

Deploying the Portfolio Site: Command Syntax

# Step 1-2: Create the special repository on GitHub, then clone it
git clone https://github.com/your-username/your-username.github.io.git
cd your-username.github.io

# Step 3: Create a simple portfolio page
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head><title>Your Name — Portfolio</title></head>
<body>
  <h1>Hi, I'm Your Name</h1>
  <p>I'm a developer working on interesting projects.</p>
  <ul>
    <li><a href="https://github.com/your-username/project-one">Project One</a></li>
  </ul>
</body>
</html>
EOF

# Step 4: Commit and push
git add index.html
git commit -m "feat: initial portfolio site content"
git push origin main

# Step 5: Visit https://your-username.github.io to verify (live within a minute or two)

# Step 6 (optional): Custom domain
echo "www.your-custom-domain.com" > CNAME
git add CNAME
git commit -m "feat: configure custom domain"
git push

Breaking Down the Deployment Exercise Example

This walkthrough produces a real, minimal but functional portfolio site, deployed using nothing but standard Git commands already familiar from every earlier module in this course — `clone`, `add`, `commit`, `push` — combined with GitHub Pages' automatic recognition of the special `username.github.io` repository name. The optional custom domain step demonstrates the CNAME file addition from Lesson 2, completing the full deployment pipeline from local files to a live, publicly accessible, professionally addressed website with no separate hosting account or deployment tooling required at any point.

How This Deployment Workflow Mirrors Real Portfolio Sites

• This exact workflow — a user page repository with a simple portfolio, sometimes later connected to a custom domain — is genuinely how a very large number of working developers host their actual, real professional portfolio sites.
• Coding bootcamps and computer science programs frequently assign a nearly identical exercise, since it combines genuinely practical Git/GitHub skills with a tangible, resume-worthy deliverable students can point to afterward.
• Freelance developers sometimes use this same GitHub Pages deployment pattern for lightweight client project demos, avoiding separate hosting costs for a simple landing page or prototype.
• The simplicity and zero cost of this deployment path (no hosting fees, no separate deployment pipeline) make it a genuinely popular choice even among developers who could easily set up more complex hosting if needed.

Deployment Practical Exercise Interview Questions and Answers

Q1. Walk me through deploying a simple personal website to GitHub Pages, including a custom domain.

Create a repository named exactly username.github.io, since this special name triggers GitHub to serve it as a root-domain user page. Clone it locally, add HTML content, and push — the site becomes live within a minute or two, with no separate Pages configuration needed for this special repository. For a custom domain, add the appropriate DNS records (A records for an apex domain, or a CNAME record for a subdomain) at the domain registrar, and add a CNAME file to the repository containing the domain, then wait for DNS propagation and enable HTTPS enforcement once verified.

Q2. How does updating a live GitHub Pages site work once it's deployed?

Exactly like any other Git workflow — edit the relevant files locally, commit the changes with a clear message, and push to the source branch. GitHub automatically rebuilds and redeploys the site, typically live within a minute or two, with no separate manual deployment step ever required.

Q3. Why is this exercise's deliverable considered genuinely useful beyond just completing the course?

Unlike a purely simulated exercise, this produces a real, live, publicly accessible website that can continue being built upon and referenced afterward — directly supporting a developer's professional presentation, connecting back to the importance of a strong GitHub profile covered in Module 4.

Deployment Practical Exercise Quiz: Test Your Understanding

1. Why must the repository in this exercise be named exactly username.github.io?

1. It's just a stylistic convention with no functional effect
2. This exact name triggers GitHub Pages to automatically serve it as the root-domain user page
3. GitHub requires this name for all repositories
4. It determines the repository's default branch name

Answer: B. This exact name triggers GitHub Pages to automatically serve it as the root-domain user page

Explanation: GitHub specifically recognizes a repository matching this exact naming pattern and automatically serves its content at the account's root GitHub Pages domain, distinct from any other repository.

2. After the initial deployment, how do you update the live portfolio site with new content?

1. You must delete and recreate the repository
2. Edit the files locally, commit, and push — GitHub automatically rebuilds and redeploys the site
3. Manually upload files through a separate hosting dashboard
4. Contact GitHub support to request an update

Answer: B. Edit the files locally, commit, and push — GitHub automatically rebuilds and redeploys the site

Explanation: Updating a GitHub Pages site follows the exact same familiar Git workflow as any other repository change — GitHub automatically detects new commits to the source branch and redeploys accordingly.

3. What two pieces of configuration are needed to connect a custom domain to this deployed site (per Lesson 2)?

1. A GitHub Sponsors profile and a dependabot.yml file
2. DNS records at the domain registrar and a CNAME file in the repository
3. A devcontainer.json file and a GitHub App installation
4. A FUNDING.yml file and a wiki page

Answer: B. DNS records at the domain registrar and a CNAME file in the repository

Explanation: Connecting a custom domain requires two coordinated pieces: DNS records configured at the domain registrar pointing to GitHub Pages, and a CNAME file inside the repository telling GitHub which domain to expect.

Common Mistakes When Deploying to GitHub Pages

• Naming the repository incorrectly, preventing it from being recognized as the special root-domain user page.
• Forgetting that no separate 'enable Pages' setting is needed for the special username.github.io repository, unlike an ordinary project page repository.
• Attempting to verify a custom domain immediately after DNS configuration without allowing time for propagation, and assuming something is broken.
• Not committing the CNAME file at all when configuring a custom domain, leaving DNS correctly set up but GitHub still unaware of the intended domain.

Deployment Exercise: Exam-Ready Quick Notes

• User page repository: must be named exactly username.github.io — no separate 'enable Pages' step needed.
• Deployment workflow: git add/commit/push — GitHub automatically builds and deploys, live within a minute or two.
• Custom domain (optional): DNS records at registrar + CNAME file in repository, allow time for DNS propagation.
• Future updates follow the exact same familiar Git workflow — no separate manual deployment step ever required.

Deployment Exercise: Key Takeaways

• This exercise produces a real, tangible, continuously usable deliverable — a live portfolio site — not just a simulated learning exercise.
• GitHub Pages deployment relies entirely on familiar Git commands already mastered throughout this course, with no separate deployment tooling needed.
• The optional custom domain step demonstrates the complete, real-world DNS and CNAME configuration process from earlier in this module.

Frequently Asked Questions About Deploying to GitHub Pages

Q1. What is the correct repository name for deploying a personal GitHub Pages portfolio site?

It must be named exactly your-username.github.io, replacing 'your-username' with your actual GitHub username. This specific naming convention is what triggers GitHub Pages to automatically serve it as your account's root-domain user page.

Q2. Do I need to manually enable GitHub Pages for this specific repository?

No. Because it's named exactly like the special user page format, GitHub automatically recognizes and serves it, unlike an ordinary project page repository which requires manually configuring the Pages source under Settings.

Q3. How long does it take for my site to go live after pushing?

Typically within a minute or two of pushing to the source branch, GitHub automatically builds and deploys the updated content.

Q4. How do I connect my own custom domain to this portfolio site?

Configure DNS records at your domain registrar (A records for an apex domain, or a CNAME record for a subdomain like www) pointing to GitHub Pages, and add a CNAME file to your repository containing your domain. This can take up to 24-48 hours to fully propagate.

Q5. How do I update my portfolio site after it's already deployed?

Simply edit your files locally, commit the changes with a clear message, and push, exactly like any other Git workflow. GitHub automatically rebuilds and redeploys the live site, with no separate manual deployment step ever required.

Summary

This capstone exercise deploys a real, live portfolio website using GitHub Pages, combining several concepts from this module into one complete, genuinely useful outcome. It begins by creating a repository named exactly `username.github.io`, the special naming convention that triggers GitHub to automatically serve it as a root-domain user page with no separate Pages configuration required. After cloning it locally, building a simple `index.html`, and pushing with the exact same familiar `add`/`commit`/`push` workflow used throughout this entire course, the site becomes live within a minute or two, verifiable directly by visiting the resulting URL. An optional custom domain step demonstrates the full DNS and CNAME file configuration process from earlier in this module, connecting the site to a professionally addressed domain. Crucially, all future updates to the site follow this same familiar Git workflow — edit, commit, push — with GitHub automatically rebuilding and redeploying, producing a real, continuously maintainable portfolio site that remains genuinely useful well beyond the completion of this course.