Putting It All Together

Table of Contents

1. The Goal: A Live Website
2. Turn On GitHub Pages
3. Ship a Feature, Start to Finish
4. Watch It Go Live
5. Bonus: A Site at Your Own Address
6. Recap
7. Git Cheat Sheet
8. What This Series Left Out
9. Where to Go Next

1. The Goal: A Live Website

my-site has a home page, an about page, a contact page, a README, and a real history built up over ten chapters. In this chapter you'll put it on the internet, for free, at an address like:

https://dara-sok.github.io/my-site/

Then you'll make one more improvement using everything you've learned — issue, branch, commits, push, pull request, merge — and watch the live site update by itself.

2. Turn On GitHub Pages

GitHub Pages turns a repository into a website. It's free for public repositories, and it works with plain HTML files like yours.

In your my-site repository on GitHub:

1. Open Settings → Pages (in the left sidebar, under Code and automation).
2. Under Build and deployment, set Source to Deploy from a branch.
3. Under Branch, choose main and / (root), then click Save.

GitHub starts building your site. Open the Actions tab to watch: a job called pages build and deployment runs, and turns green after a minute or so. Go back to Settings → Pages, and the address of your live site appears at the top. Open it.

That's your index.html, on the internet. The links to the about and contact pages work too. This is why the home page has always been called index.html: it's the file web servers show when someone visits a folder without naming a file.

From now on, every time main changes on GitHub, the site updates itself. Merging a pull request is publishing.

3. Ship a Feature, Start to Finish

Right now the site is plain black text on white. Let's add some style — and do it the way a team would.

1. Issue. On GitHub, open a new issue: Add basic styling to all pages. Note its number (say, #4).

2. Branch. On your computer, start from the latest main:

cd ~/my-site
git switch main
git pull
git switch -c add-styles

3. Commits. Create style.css:

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  color: #1f2937;
}

h1 {
  color: #2563eb;
}

a {
  color: #2563eb;
}

git add style.css
git commit -m "Add stylesheet"

Then link it from all three pages — add this line inside <head> in index.html, about.html, and contact.html:

    <link rel="stylesheet" href="style.css">

Open index.html in your browser to check it looks right, then:

git diff
git commit -am "Use stylesheet on every page"

Two small commits, each about one thing.

4. Push.

git push -u origin add-styles

5. Pull request. On GitHub, click Compare & pull request. Give it a clear title and a description that ends with Closes #4. Check Files changed: one new file, three pages with one new line each.

6. Review. Read your own diff carefully, as if a teammate wrote it. If you spot something, fix it locally, commit, and push — the PR updates.

7. Merge. Click Merge pull request → Confirm merge, then Delete branch.

8. Clean up.

git switch main
git pull
git branch -d add-styles
git fetch --prune

4. Watch It Go Live

Open the Actions tab again: a new pages build and deployment job started the moment you merged. When it turns green, reload your live site (you may need a hard refresh — Ctrl + Shift + R, or Cmd + Shift + R on a Mac — because browsers cache pages). The new styles are live.

Look at what just happened: you wrote a change, it was reviewed in a pull request, merging it published it automatically, and the issue closed itself. That loop — issue → branch → PR → merge → deployed — is how most software in the world gets shipped. You just did it.

Add the link to your live site to your repository's About box (the gear icon on the right of the repository's front page) and to your README.md, so visitors can find it.

5. Bonus: A Site at Your Own Address

Project sites live at <username>.github.io/<repository>/. GitHub also gives every account one user site at the shorter address https://<username>.github.io/. To get it, create a repository named exactly <username>.github.io — for example dara-sok.github.io — push an index.html to its main branch, and turn on Pages the same way.

Many developers use that as their portfolio home page, linking out to their project sites. You can even connect a domain you own, under Settings → Pages → Custom domain.

6. Recap

7. Git Cheat Sheet

Setup (once per computer)

git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global init.defaultBranch main
git config --global pull.rebase false
gh auth login

Start a project

git init                     # turn this folder into a repository
git clone <url>              # download an existing repository

The everyday loop

git status                   # what's changed? (run it constantly)
git diff                     # unstaged changes
git diff --staged            # what the next commit will contain
git add <file>               # stage a file (git add . for everything)
git commit -m "Message"      # take the snapshot

History

git log --oneline            # compact history
git log --oneline --graph --all
git show <hash>              # one commit and its diff
git blame <file>             # who last changed each line

Undo

git restore <file>                  # discard uncommitted changes
git restore --staged <file>         # unstage
git commit --amend                  # fix the last commit (not pushed)
git revert <hash>                   # safely undo a commit (pushed is fine)
git reset HEAD~1                    # undo last commit, keep changes (not pushed)
git restore --source=<hash> <file>  # a file as it was in an old commit
git reflog                          # find "lost" commits

Branches

git branch                   # list branches
git switch -c <name>         # create a branch and switch to it
git switch <name>            # switch to an existing branch
git merge <name>             # merge <name> into the current branch
git merge --abort            # cancel a merge with conflicts
git branch -d <name>         # delete a merged branch

Remotes

git remote add origin <url>  # connect to GitHub
git push -u origin <branch>  # first push of a branch
git push                     # send commits
git fetch                    # download, don't change my files
git pull                     # fetch + merge
git fetch --prune            # forget branches deleted on GitHub

Bonus: put work aside for a moment

git stash                    # tuck away uncommitted changes
git stash pop                # bring them back

git stash is handy when you need to switch branches but aren't ready to commit. You'll pick it up quickly now that you know the rest.

8. What This Series Left Out

This series covered what you need for everyday work. A few more things you'll meet as you go further:

• git rebase — another way to combine branches that rewrites history into a straight line. Powerful, and easy to misuse; learn it once merging feels routine.
• git cherry-pick — copy one commit from another branch.
• Tags — permanent names for important commits, like v1.0.0.
• SSH keys — the other way to sign in to GitHub, and the way you'll sign in to servers.
• GitHub Actions — run tests or deployments automatically on every push or pull request. GitHub Pages already used it for you; the Docker CLI Tutorial's bonus chapter shows a deployment workflow.

9. Where to Go Next

Git is now part of everything you build. Here's how it connects to the rest of the Start Here roadmap:

• HTML & CSS Fundamentals — make my-site actually beautiful. Every improvement is a branch and a pull request, and every merge goes live.
• How the Web Works — what happens between someone typing your GitHub Pages address and seeing your site.
• JavaScript & TypeScript Fundamentals — add interactivity to the site, and start building real projects to put on your GitHub profile.
• Command Line Basics, revisited — its final chapter's new-project.sh script is a perfect thing to put in a repository of its own, or to extend so it runs git init for you.
• Docker CLI Tutorial and NestJS Crash Course — their source code is on GitHub. Clone it, run it, and read the history.

Two habits from here on: put every project in Git, no matter how small, and push your work to GitHub where future employers and collaborators can see it. A GitHub profile full of real commits is one of the best portfolios a developer can have.