2.4 Assembly: Going Live on GitHub

You've built the structure (HTML), the style (CSS), and the interactivity (JavaScript). Right now, though, your site only exists on your H: drive, so nobody else can see it. Today the Web Department ships. You'll create a repository on GitHub, use GitHub Desktop to connect it to your computer, and move your site into it. Then you'll get an AI to clean up your code, push it all to GitHub, and turn it into a real, live website with its own URL. Work through the tasks in order, because each one depends on the one before it.

Before You Start

1. Open your project folder in VS Code, the same H:\ICT 9\2_web_development\your-slug folder you've used all unit. No new download needed.
2. Check the Explorer sidebar. You should see index.html, about.html, work.html, and your css, js, and images folders directly inside it, with no extra folder in between.
3. Have a browser tab open and ready. You'll be creating an account and signing in during class.
4. Find GitHub Desktop in the Start menu. You'll use it from Task 3 on.

Four words you'll hear today

• Repository (repo): a project folder that Git is keeping track of. Yours lives on GitHub and on your H: drive.
• Commit: a save point. It's a snapshot of every file at one moment, with a short message describing what changed. You can always go back to one.
• Push: sending your commits from your computer up to GitHub (the Push origin button in GitHub Desktop).
• GitHub Pages: a free GitHub feature that turns a repo into a live website.

Find your spot

• Task 1 — Pre-flight check: haven't done anything yet? Start here. This includes the 20 Questions oversharing audit.
• Task 2 — GitHub account: no account yet, or you haven't verified your email.
• Task 3 — Create your repo and move your site in: you have an account, but no username.github.io repo yet (or yours has the wrong name).
• Task 4 — AI code cleanup: your files are on GitHub.
• Task 5 — Go live: your "AI code cleanup" commit is pushed.
• Task 6 — Ship an update: your site is live.

Once your site is live, anyone on the internet can see it. Your teacher, your family, a future employer, and total strangers can all open it. Before anything gets published, go through this checklist.

Polish

1. Open all three pages in Live Preview and click every nav link. Every page should load, with no broken links.
2. Check every file name. Names should be all lowercase, with no spaces. avatar.png is fine, but My Avatar.PNG isn't. Rename any that break the rule, then update the src or href that points to them.
3. Your home page must be called exactly index.html and sit directly in your project folder, not inside a subfolder.

Privacy

Go through all three pages, including your 20 Questions, and remove anything on this list:

• Your last name (your first name, or first name plus last initial, is fine)
• Your school name, home address, neighbourhood, or phone number
• Your birthday or exact age
• Photos of your face or of other people. Your cartoon avatar is exactly what it's for.
• Personal email or social media handles

Quick test: would you be fine with this page being printed and taped up in the hallway? If not, take it out.

Oversharing audit: your 20 Questions

The list above catches the obvious stuff. Oversharing is sneakier. Each answer on its own seems harmless, but put together, they can add up to a lot: where you'll be on Saturday, what your passwords might be, or enough clues for a stranger to work out who you are. Time to look at your 20 Questions the way a stranger would.

1. Open about.html and read your 20 answers slowly, as if you were a stranger who has never met you.
2. Rate each answer:
   • 🟢 Safe: general likes and opinions. "Pizza." "Flight." "Night owl."
   • 🟡 Think twice: specific details that narrow down who or where you are. Team names, specific places, your pet's name.
   • 🔴 Overshare: tells a stranger where to find you, or could help someone get into your accounts. Your full birthday, your schedule, your school.
3. Check your answers against the three overshare traps below.
4. Rewrite every 🔴 answer and most 🟡 ones. Rewrite them rather than deleting them, so the page is still about you, just less specific (see the examples).

The three overshare traps

• Password-reset answers. "What was your first pet's name?" and "What month were you born?" are classic security questions for resetting passwords. Questions 2 (birth month) and 11 (pets) are the ones to check. Keep your star sign or say "a dog," but leave out the month and the pet's name.
• Location + schedule. "I skate at [park name] every Saturday morning" tells a stranger exactly where you'll be and when. Check questions 4, 6, and 18 (hobby, sports, weekends).
• The puzzle effect. First name + a team name + a neighbourhood + a birth month might be all it takes to find you. Read all 20 answers together and ask: what could someone piece together?

GitHub is where more than 100 million developers store their code, and it'll host your site for free. Your username becomes your website address, so choose it carefully.

Choose your username first

• Your site will live at https://username.github.io. Say it out loud: would you be happy putting it on a résumé?
• Use lowercase letters, numbers, and hyphens only.
• No last name, no birth year, no school name. Try your slug plus a studio word, like emma-r-studio or emmar-dev.
• Your first choice will probably be taken, since usernames are shared with every GitHub user in the world. Have two or three backups ready.

Sign up

1. Go to github.com/signup.
2. Enter your school email address.
3. Create a new password you haven't used anywhere else, and write it down somewhere safe (not on a sticky note on the monitor).
4. Enter your username and finish the puzzle check.
5. GitHub emails you a code. Open your school email, copy the code, and paste it into GitHub.
6. If GitHub asks you a few "personalize your experience" questions, you can skip them.
7. Write your exact username on the class sign-in sheet your teacher shares.

You'll create an empty repo on GitHub, use GitHub Desktop to make a copy of it on your H: drive (that's called cloning), and then copy your site files into it.

Step 1: Make your email private

1. On github.com, click your profile picture (top right) → Settings → Emails (left menu).
2. Turn on Keep my email addresses private. GitHub shows you a private address that looks like 12345678+username@users.noreply.github.com. You'll pick it in GitHub Desktop in Step 3.

Step 2: Create your repo on github.com

1. Click the + at the top right of github.com → New repository.
2. Repository name: your username followed by .github.io (see the rule above). GitHub shows a green check when the name is available.
3. Choose Public. (Free GitHub sites have to be public.)
4. Leave everything else alone. Don't tick "Add a README." Click Create repository.

Step 3: Clone it to your H: drive with GitHub Desktop

1. Open GitHub Desktop. If it asks you to sign in, choose Sign in to GitHub.com, sign in in the browser, and click Authorize.
2. In GitHub Desktop, go to File → Options → Git. Set Email to your private …@users.noreply.github.com address from Step 1, then click Save.
3. Back on your new, empty repo page on github.com, find the Quick setup box and click Set up in Desktop. If the browser asks to open GitHub Desktop, click Open.
4. GitHub Desktop shows a Clone a repository box. Next to Local path, click Choose… and pick your H:\ICT 9\2_web_development folder.
5. Check that the Local path now reads H:\ICT 9\2_web_development\your-username.github.io, then click Clone.

You now have a new, empty folder called your-username.github.io on your H: drive, sitting right next to your old your-slug folder. It's connected to GitHub.

Step 4: Copy your site into the new folder

1. In File Explorer, open your old folder: H:\ICT 9\2_web_development\your-slug.
2. Press Ctrl + A to select everything inside it (index.html, about.html, work.html, css, js, images), then Ctrl + C to copy.
3. Open the new folder: H:\ICT 9\2_web_development\your-username.github.io, and press Ctrl + V to paste.

Step 5: Commit and push

1. Switch to GitHub Desktop. Your files now appear in the Changes list on the left, all ticked.
2. In the Summary box at the bottom left, type First version of my studio code.
3. Click Commit to main.
4. Click Publish branch at the top. (After the first time, this button says Push origin.)

Step 6: Work from the new folder from now on

1. In VS Code, go to File → Open Folder and open H:\ICT 9\2_web_development\your-username.github.io. (Or, in GitHub Desktop: Repository → Open in Visual Studio Code.)
2. From today on, this is your site. Your old your-slug folder is just a backup. Don't edit it any more, or you'll get confused about which copy is real.

Four weeks of copying, customizing, deleting, and re-trying leaves a mess: unclosed tags, wonky indentation, CSS rules that don't do anything, and leftover experiments. Real studios run code reviews before anything ships. Yours will be done by an AI, and you're the one who approves it.

Because your first commit is a save point, this is completely safe. If the AI breaks something, you can undo it with one click in GitHub Desktop.

Step 1: Get the AI to clean up one file

1. Open the AI tool of your choice (any of the ones allowed in class).
2. Copy the prompt below and paste it into the AI. Fill in the file name at the end.
3. In VS Code (in your your-username.github.io folder), open index.html, press Ctrl + A then Ctrl + C to copy the whole file, and paste it into the AI right after the prompt.

I'm a Grade 9 student and this is my first website, built with HTML, CSS and JavaScript. Please clean up the code below.

Rules:
- Keep how the page LOOKS and WORKS exactly the same.
- Fix indentation, close any unclosed tags, fix errors, and remove anything that is duplicated or unused.
- Do NOT change any id or class names, file names, or the text on my page.
- Do NOT add new features, frameworks, libraries, or links to other websites.
- Keep it at a beginner level so I can still understand every line.
- Give me the full cleaned-up file first, then a short list of every change you made and why.

My file is called: ________

Step 2: Paste it back in and test it

1. Copy the AI's cleaned-up file. In VS Code, select everything in index.html (Ctrl + A) and paste over it.
2. Check Live Preview. The page should look and work exactly like it did before. Click everything, including your JavaScript buttons.

Step 3: Review every change (this is the important part)

1. Switch to GitHub Desktop and click index.html in the Changes list. It shows every change: red is what the AI removed, and green is what it added.
2. Read every change. For each one, you should be able to say what it does.
3. Don't understand a change? Ask the AI: "Explain this change like I'm new to coding." Still not sure? Don't keep it.
4. If the AI broke something, right-click the file in GitHub Desktop's Changes list → Discard changes…. You're back to your save point, and you can try again.

Step 4: Repeat, then commit

1. Do the same for about.html, work.html, css/style.css, and js/script.js, one file at a time.
2. When all five files are cleaned up and tested, go to GitHub Desktop, type AI code cleanup in the Summary box, and click Commit to main.
3. Click Push origin.

This is the moment your site hits the internet.

Step 1: Turn on GitHub Pages

1. In GitHub Desktop, click Repository → View on GitHub (or go to your repo on github.com).
2. Click Settings (the gear tab along the top) → Pages in the left menu.
3. Under Build and deployment → Source, choose Deploy from a branch.
4. Under Branch, choose main and / (root), then click Save.
5. Wait 1 to 5 minutes. On your repo's front page, watch Deployments on the right (or the Actions tab): a yellow dot turns into a green check when it's done. Refresh the Pages settings and your live link appears at the top.

Step 2: Test it for real

1. Open https://your-username.github.io. That's your site, live on the internet.
2. Click every nav link and every button. Check that your avatar shows up.
3. Open it on your phone too. It should work anywhere.
4. Post your live URL to the 2.4 Teams assignment.

Your site isn't finished. It'll get new projects every unit for the rest of the course. Here's the loop you'll use every time: edit in VS Code → commit in GitHub Desktop → push.

1. In VS Code (your your-username.github.io folder), make one small change. For example, add <p>Last updated: October 2026</p> to your footer on all three pages. Save, and check Live Preview.
2. In GitHub Desktop, your changed files show in the Changes list. Type a Summary that describes the change (Add last-updated date to footer), then click Commit to main.
3. Click Push origin.
4. Wait about a minute, then reload your live site with Ctrl + F5 (a hard refresh).

Optional. Unlocks after Task 6 is done.

Studios judge developers by their repos as well as their sites. Make yours look like it belongs to a professional.

1. Add a README. Create a new file called README.md in your your-username.github.io folder. GitHub shows it on your repo's front page. Include what the site is, what you built it with, and one thing you're proud of:

   # My Studio Profile
   
   This is my portfolio site for ICT 9 at the Studio.
   
   ## Built with
   - HTML, CSS, and JavaScript
   - VS Code, Git, and GitHub Pages
   
   ## Proud of
   The click-to-reveal skills list on my About Me page.

2. Validate your code. Paste your live URL into the W3C Markup Validator. Fix any errors it finds on all three pages.
3. Add a repo description. On your repo's GitHub page, click the gear next to About (on the right), write a one-line description, and tick Use your GitHub Pages website.
4. Commit and push in GitHub Desktop.

Checkpoint (self-assessed): your repo's front page shows your README and a link to your live site, and the validator shows no errors.

Checkpoint for any Black task: it's committed, pushed, and working on the live site, not just on your computer.

Before You Leave Class

School computers are shared, so sign out so nobody else can push to your site:

1. In GitHub Desktop, go to File → Options → Accounts → Sign out.
2. In your browser, sign out of github.com.

Next class, sign back in to GitHub Desktop (File → Options → Accounts → Sign in). Your repo is still listed, and everything picks up where you left off.