What is GitHub — and why does it give you a free website?
GitHub is the world's largest platform for storing and sharing code (and relevant files). Think of it like Google Drive, but built for files that make up software. Millions of developers, researchers, and students use it every day to back up their work, collaborate with others, and share projects publicly. It's owned by Microsoft and is completely free to use for individuals.
Every project you store on GitHub lives in a repository (or "repo") — just a folder in the cloud that tracks every change you make to your files over time. You can have as many repositories as you like.
GitHub Pages is a feature built into GitHub that turns one of your repositories into a live, public website — automatically, for free. You write your content as simple files, push them to GitHub, and GitHub handles putting them on the internet. No server to rent, no hosting bill, no renewal fees.
Why is this better than Squarespace, Wix, or WordPress.com? Paid website builders charge $10–25/month, show ads on free plans, and can shut down or change their pricing anytime. Your GitHub Pages site costs nothing, has no ads, and will stay online as long as GitHub exists. The URL (yourusername.github.io) is also clean and professional — something you can put on a résumé or LinkedIn without embarrassment. Many professors still use GitHub Pages to host their work!
GitHub Pages was originally built so developers could publish documentation for their software projects. But it works equally well as a personal portfolio. The best part: you don't need to be a developer to use it. HTML — the language you'll write tonight — is widely considered the easiest programming language to learn, and there are thousands of free tutorials, videos, and courses built around it. What makes this approach particularly powerful for beginners is how much you can learn just by looking at other people's work. Every public GitHub repository is open to read — meaning you can look at how anyone else built their site, borrow ideas, and understand what each line does. It's the most transparent learning environment on the internet.
Tonight's agenda
Setup
Connect to WiFi, create a GitHub account if needed, open this page on your device.
Create your repository
Set up the specially-named repo that activates your free website automatically.
Build your page
Paste and edit the starter template — add your name, bio, projects, and links.
Go live!
Flip one setting and watch your site deploy. Share your URL with the room.
Customize & Q&A
Add a theme, photo, or extra sections. Open floor for questions.
Before you start
You need two things — both free, both take under 2 minutes.
A GitHub account
Go to github.com/signup and sign up. Pick your username carefully — it becomes your website address (yourusername.github.io). Use your name or initials. Keep it professional.
Any web browser
Chrome, Firefox, Safari, or Edge all work. No downloads or installs needed tonight.
Already have GitHub? Jump straight to Step 1.
Create your repository
GitHub has one magic rule: name a repository yourusername.github.io and it automatically becomes a live public website. That's the entire trick.
Start a new repository
Click the + button in the top-right corner of GitHub → New repository.
Name it exactly right
In the "Repository name" field, type yourusername.github.io — swapping in your actual GitHub username. Capitalisation and spelling must match exactly.
Set to Public and add a README
Make sure Public is selected. Check "Add a README file". Click Create repository.
Most common mistake: the name doesn't match the username exactly. Double-check before clicking Create — a typo means no website.
Build your page
You'll create one file called index.html — the front door of your site. Everything happens right in the browser; nothing to install.
Create index.html
Inside your new repo, click Add file → Create new file. Type index.html as the filename.
Copy the starter template below
Click Copy, then paste the whole thing into the GitHub editor. Then replace the placeholder text with your own info.
Commit the file
Scroll to the bottom → click Commit changes. Your file is saved.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Name</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.7;
color: #222;
background: #fff;
}
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
h2 {
font-size: 1rem;
font-weight: bold;
letter-spacing: .08em;
text-transform: uppercase;
color: #555;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e5e5e5;
}
.wrapper {
display: flex;
min-height: 100vh;
max-width: 960px;
margin: 0 auto;
}
.sidebar {
width: 240px;
flex-shrink: 0;
padding: 48px 28px 48px 32px;
border-right: 1px solid #e5e5e5;
text-align: center;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.avatar {
width: 140px;
height: 140px;
border-radius: 50%;
background: #dbeafe;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.sidebar h1 { font-size: 1.2rem; font-weight: bold; margin-bottom: 4px; }
.sidebar .role { font-size: 0.85rem; color: #666; line-height: 1.5; margin-bottom: 20px; }
.sidebar-links { list-style: none; font-size: 0.85rem; text-align: left; }
.sidebar-links li { margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.sidebar-links li::before { content: "→"; color: #aaa; }
.main { flex: 1; padding: 0 40px 80px; }
.tabs {
display: flex;
justify-content: center;
gap: 6px;
padding: 16px 0;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
border-bottom: 1px solid #f0f0f0;
}
.tabs a {
padding: 6px 18px;
font-size: 0.85rem;
font-family: Arial, sans-serif;
color: #666;
text-decoration: none;
border-radius: 99px;
transition: background 0.15s, color 0.15s;
}
.tabs a:hover { color: #2563eb; background: #eff6ff; }
.section {
margin-bottom: 40px;
padding-top: 40px;
scroll-margin-top: 60px;
}
.section p { margin-bottom: 12px; }
.news-list { list-style: none; }
.news-list li { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.news-date { color: #888; white-space: nowrap; width: 90px; flex-shrink: 0; }
.project-list { list-style: none; }
.project-list li { padding: 12px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.project-list li strong { display: block; margin-bottom: 2px; font-size: 1rem; }
@media (max-width: 640px) {
.wrapper { flex-direction: column; }
.sidebar { width: 100%; border-right: none; border-bottom: 1px solid #e5e5e5; padding: 32px 24px; height: auto; position: static; }
.main { padding: 32px 24px; }
}
</style>
</head>
<body>
<div class="wrapper">
<aside class="sidebar">
<div class="avatar">🧑💻</div>
<h1>Your Full Name</h1>
<p class="role">
MSc Student<br/>
Department of Something<br/>
University of Toronto
</p>
<ul class="sidebar-links">
<li><a href="mailto:you@mail.com">Email</a></li>
<li><a href="https://linkedin.com/in/yourprofile">LinkedIn</a></li>
<li><a href="https://github.com/yourusername">GitHub</a></li>
</ul>
</aside>
<main class="main">
<nav class="tabs">
<a href="#about">About</a>
<a href="#news">News</a>
<a href="#projects">Projects</a>
<a href="#education">Education</a>
</nav>
<div class="section" id="about">
<h2>About</h2>
<p>Write a short introduction here — who you are, what you study or work on,
and what you're passionate about. Two or three sentences is plenty.</p>
<p>You can add a second paragraph for more detail — your research interests,
industry experience, or what you're looking for next.</p>
</div>
<div class="section" id="news">
<h2>News</h2>
<ul class="news-list">
<li>
<span class="news-date">Mar 2026</span>
<span>Started my new role at Acme Corp as a research intern.</span>
</li>
<li>
<span class="news-date">Jan 2026</span>
<span>Paper accepted at the Annual Conference on Something.</span>
</li>
<li>
<span class="news-date">Sep 2025</span>
<span>Started my MSc program at the University of Toronto.</span>
</li>
</ul>
</div>
<div class="section" id="projects">
<h2>Projects</h2>
<ul class="project-list">
<li>
<strong><a href="#">Project One Title</a></strong>
A one-sentence description of what this project does or why it matters.
</li>
<li>
<strong><a href="#">Project Two Title</a></strong>
A one-sentence description of what this project does or why it matters.
</li>
<li>
<strong><a href="#">Project Three Title</a></strong>
A one-sentence description of what this project does or why it matters.
</li>
</ul>
</div>
<div class="section" id="education">
<h2>Education</h2>
<ul class="project-list">
<li>
<strong>MSc, Your Field — University of Toronto</strong>
2023 – present
</li>
<li>
<strong>BSc, Your Field — Your Undergrad University</strong>
2019 – 2023
</li>
</ul>
</div>
</main>
</div>
</body>
</html>
What to change: In the sidebar — your name, role/degree, institution, and the three link URLs. In the main area — the About paragraphs, the three News items (date + one sentence each), the three Projects, and the two Education entries. Leave all the HTML tags and class names exactly as they are.
Want to see what a finished version looks like? Open the live demo → in a new tab.
Go live
One setting, one click, and your site is on the internet.
Open Settings
In your repository, click the Settings tab along the top.
Click Pages
In the left sidebar, scroll to Pages and click it.
Set branch to main → Save
Under "Branch", choose main from the dropdown → click Save. GitHub shows a banner with your URL.
Wait ~60 seconds
Open the Actions tab in your repo. A yellow circle = building. A green checkmark = live. Then visit https://yourusername.github.io.
You're live. Copy your URL and share it in the room!
Go further
Add a Jekyll theme
Go to Settings → Pages → Choose a theme. Pick any theme and click "Select theme". GitHub automatically redeploys with the new design — no code touched.
Replace the emoji with your own photo
The template starts with an emoji as a placeholder. Here's how to swap it for a real photo — two steps.
Step 1 — Upload your photo to GitHub. In your repo, click Add file → Upload files, choose your image, and upload it. Keep the filename short and simple with no spaces — e.g. photo.jpg. Click Commit changes.
Step 2 — Update index.html. Open your index.html, find this line:
<div class="avatar">🧑💻</div>
Replace the entire line with:
<img src="photo.jpg" class="avatar" alt="Your Name"/>
The class="avatar" keeps the circular crop. The src="photo.jpg" must exactly match the filename you uploaded — spelling, capitalization, and file extension (.jpg vs .png) all matter.
Add more sections
Copy any <section>...</section> block and paste it below the last one. Change the <h3> to "Education", "Skills", "Publications", or whatever fits you.
Updating is always this easy
Edit any file in GitHub → Commit changes → your site updates within a minute. No re-publishing, no logins to a separate platform, no fees.
Separate your styles into a CSS file
Right now all your styling lives inside <style>...</style> in your HTML. As your site grows, you can move it into its own file. Create a new file called style.css in your repo, paste everything that was between the style tags into it, then replace the style block in your HTML with this one line in the <head>:
<link rel="stylesheet" href="style.css">
This keeps your files clean and is how most real websites are built. Do this after your site is live and working — not before!
Curious why the tabs don't highlight as you scroll? That behaviour needs JavaScript — the third language of the web. HTML gives your page structure, CSS gives it style, and JavaScript makes it interactive. Follow the step below to add it now, or save it for later.
Make the active tab highlight as you scroll
Open your index.html in GitHub. Find the very last line — </body> — and paste the block below directly above it. Commit, wait a minute, and your tabs will now light up blue as the matching section scrolls into view.
<script>
const sections = document.querySelectorAll('.section');
const tabs = document.querySelectorAll('.tabs a');
window.addEventListener('scroll', () => {
let current = '';
sections.forEach(s => {
if (window.scrollY >= s.offsetTop - 60) current = s.id;
});
tabs.forEach(a => {
const active = a.getAttribute('href') === '#' + current;
a.style.color = active ? '#2563eb' : '#666';
a.style.borderBottom = active ? '2px solid #2563eb' : '';
});
});
</script>
This is your first taste of JavaScript. The code listens for scrolling, checks which section is visible, and updates the tab colour to match. Once you're comfortable with HTML and CSS, learning JavaScript is the natural next step.
Resources to keep
Workshop files and GitHub links first, then free learning resources for everything covered tonight and beyond.
Live demo portfolio
See what a finished version looks like
What does each line of code mean?
Plain-English walkthrough of every part of your index.html
Create a GitHub account
github.com/signup
GitHub Pages docs
pages.github.com
Free Jekyll themes
jekyllthemes.org
Markdown cheat sheet
markdownguide.org/cheat-sheet
GitHub Student Developer Pack
Free extras for students — education.github.com/pack
The Odin Project — Foundations
Free, project-based. Best free HTML/CSS/JS course available. Start here.
MDN — Introduction to HTML
The gold-standard reference. Great for looking things up as you build.
MDN — CSS first steps
Follows on from the HTML guide above. Same high quality.
freeCodeCamp — Responsive Web Design
Free certification. Hands-on HTML and CSS with instant feedback.
javascript.info
The best free JavaScript textbook on the internet. Thorough and beginner-friendly.
freeCodeCamp — JavaScript Algorithms
Free certification. Good complement to javascript.info.
Jekyll official docs
Start with "Quickstart". Jekyll is the engine behind GitHub Pages themes.
Tania Rascia — Make a static site with Jekyll
A friendly, practical tutorial. Good first read before the official docs.