GitHub & GitHub Pages Setup (M0F)
Set up the tooling and hosting you'll use all semester: VSCode, a sensible work folder, a GitHub account, and a live GitHub Pages site. When it's done, your name is on the web at yourgithubid.github.io - that's what gets checked.
Tools & Account
- Install VSCode.
- Make a work folder somewhere sensible (like Documents), e.g. ITIS3135Work. Not Downloads, not Desktop, not a random spot - know how to navigate to it.
- Create a GitHub account (personal or school email - personal keeps access after you leave CLT) and install GitHub Desktop.
- Optional warm-up: click around github.com until the layout feels familiar. You can do almost anything on the website, but the desktop tools are how you'll move your files. GitHub's Hello World tutorial is a gentle first lap.
The Repo & Pages
- In GitHub Desktop, create a repo named exactly yourgithubid.github.io (login Bobby77 → repo Bobby77.github.io), inside your work folder. Public, not private - these are webpages. A readme is a good idea.
- On github.com, in the repo's settings, turn on GitHub Pages with main as the web root.
- In VSCode: create index.html ("Yo it's so-and-so, and this is the root of my website!"). Turn on auto-save (on focus change) and install the Live Server extension (Ritwick Dey) - Go Live previews your page properly.
- In GitHub Desktop: commit, then push to origin. Test at http://yourgithubid.github.io (may take a few minutes) and see the files at http://github.com/yourgithubid (instant).
Course Folder Structure
- Inside the repo, make an itis3135 folder with its own index.html: "<h1>I am so-and-so and this is my ITIS3135 First Course Page</h1>" - with your name.
- Also inside itis3135, create: images/, components/ (empty header.html + footer.html), scripts/ (empty include_components.js), styles/ (empty default.css), and z_archives/ (for junk you're afraid to delete). GitHub ignores empty folders until they have files - that's fine.
- Commit and push again; confirm itis3135/ loads on your Pages site.
Good to Know
- Getting a 404? GitHub Pages never shows a list of a folder's files. A folder with no index.html (or a page you never pushed) loads nothing, so every folder you want visitors to reach needs its own index.html.
- Slow to update? Changes can take a few minutes to show up, and GitHub may slow or limit uploads on free accounts once you've pushed a lot of data, so keep images a sensible size.
- Your root index.html is the front door. Make it link to each course folder - itis3135 now, others as you add them. Short on a front door? Rename your introduction page or a table of contents to index.html.
- Other repos with Pages turned on appear under your main site as subdirectories: yourgithubid.github.io/reponame/filename.html. Only the repo named yourgithubid.github.io gets the bare address.
- Want to see a finished one? Here's an instructor example, and pages.github.com explains the rest.
Submitting
- The URL of your repo on github.com.
- The URL of your GitHub Pages site (yourgithubid.github.io).
- Anything you'd like to note.
- Then reply to two peers with constructive feedback - find a real problem and tell them politely.
What gets checked: your github.io site loads, and your name appears somewhere on the page.
Team Activity?
If your instructor assigns one, the steps for working in your classmates' repos are on the GitHub Collaboration Instructions page. Otherwise, you can skip it.