Part of · Mastering Version Control Workshop
Supplementary Guide · For Beginners

GitHub Pages
& Workflows

Deploy your first website for free and automate tasks without a server — beginner-friendly, no experience needed.

// Contents
Part A — GitHub Pages
A1What is GitHub Pages?
A2Hosting a Personal Portfolio Site
A3Hosting a Project Site
A4What You Can & Can't Host
Part B — GitHub Actions / Workflows
B1What is a Workflow?
B2Your First Workflow File
B3Auto-Deploy Pages with Actions
B4Beginner Workflow Recipes
Part A

GitHub Pages

A1

What is GitHub Pages?

GitHub Pages is free website hosting, built into every GitHub repository. You push your HTML/CSS files to a repo, flip a switch in settings, and GitHub gives you a live public URL — no server, no cost, no configuration.

100% Free

Free hosting forever. No credit card, no hidden limits for static sites.

Free Domain

You get username.github.io automatically. You can also attach a custom domain.

Instant Deploy

Push a commit -> site updates in under 2 minutes. No FTP, no SSH, no control panel.

Recruiter-Ready

Share one link on your resume. Employers can see your live projects immediately.

//Two Types of GitHub Pages Sites

User/Org Site
  • Repo name must be exactly username.github.io
  • Lives at https://username.github.io
  • One per GitHub account
  • Your main portfolio / about page
Project Site
  • Any repo name works
  • Lives at https://username.github.io/repo-name
  • Unlimited project sites
  • For demos, class projects, tools
What 'Static' Means
GitHub Pages only hosts static files — HTML, CSS, JavaScript, images. It cannot run Python, PHP, or server-side code. For data science projects, you can still host interactive visualizations built with plain JS (Plotly, Chart.js, D3).
A2

Hosting a Personal Portfolio Site

This creates your root site at https://username.github.io. This is the link you put on your resume and LinkedIn.

1
Create the special repository
On GitHub, click New Repository. The name must be exactly YOUR-USERNAME.github.io — replace with your actual username. Make it Public. Don't add a README yet.
2
Clone it locally and create your page
Clone the empty repo, create an index.html file inside it.
3
Write your index.html
index.html — minimal portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Monzim · Portfolio</title>
</head>
<body>
<h1>Hi, I'm Monzim 👋</h1>
<p>CSE Student · UIU · Data Science Club</p>
<a href="https://github.com/monzim">My GitHub</a>
</body>
</html>
1
Push to GitHub
bash — push portfolio
$git add .
$git commit -m "Add portfolio homepage"
$git push origin main
1
Wait ~2 minutes, then visit your live site
https://YOUR-USERNAME.github.ioLIVE
Pro Tip
Every time you git push new changes, GitHub automatically rebuilds and redeploys your site. You never need to touch the settings again.
A3

Hosting a Project Site

Any existing repo can become a website. Use this for project demos, data visualizations, or assignment submissions.

1
Go to your repo on GitHub
Open any existing public repo you want to deploy.
2
Open Settings → Pages
Click the Settings tab at the top of the repo. In the left sidebar, scroll down to Pages.
3
Set the source branch
Under Source, select branch main and folder / (root). Click Save. GitHub will show a banner with your live URL.
4
Make sure you have an index.html
GitHub Pages serves index.html as the homepage. If your repo has one at the root, the site will work instantly.
https://YOUR-USERNAME.github.io/REPO-NAMELIVE
Common Mistake
If your site shows a 404, check that index.html exists at the root of the repo (not inside a subfolder). GitHub looks for it there first.
A4

What You Can & Can't Host

Works on Pages
  • HTML, CSS, JavaScript
  • Images, videos (under 100MB)
  • Interactive charts (Plotly JS, Chart.js, D3)
  • Forms that post to external services (Formspree)
  • React/Vue apps that build to static files
  • Documentation sites (MkDocs, Docusaurus)
  • Markdown files (auto-rendered)
Won't Work
  • Python / Flask / Django servers
  • Node.js / Express backends
  • PHP, Ruby, Java
  • Databases (PostgreSQL, MySQL)
  • Server-side rendering
  • Files over 100MB (use Git LFS)
  • Private / password-protected pages (free plan)
For Data Science Students
Export your Jupyter notebooks as HTML (jupyter nbconvert --to html notebook.ipynb) and host the result on Pages. Instant shareable analysis report, no server needed.
Part B

GitHub Actions & Workflows

B1

What is a Workflow?

A GitHub Actions workflow is a set of automated tasks that run on GitHub's servers whenever something happens to your repo — like pushing code, opening a PR, or on a schedule.

Think of it as a robot teammate: every time you push code, the robot wakes up, runs your tests, and deploys your site — without you touching anything.

Triggered Automatically

Runs when you push, merge, open a PR, or on a schedule you define.

Runs on GitHub Servers

No local setup. GitHub spins up a fresh Ubuntu machine and runs your steps.

Free for Public Repos

2,000 minutes/month free on private repos too. Public repos get unlimited minutes.

//Key Vocabulary

TermWhat it isAnalogy
WorkflowThe entire automation defined in one YAML fileThe full recipe
Event / TriggerWhat causes the workflow to run (push, PR, schedule)The alarm clock
JobA group of steps that run on the same machineOne worker's task list
StepA single command or action within a jobOne instruction in the recipe
RunnerThe virtual machine GitHub spins up to run your jobThe kitchen where it runs

//How It All Fits Together

🔔
Trigger
e.g. git push
📄
Workflow
.yml file
🖥️
Runner
Ubuntu VM
⚙️
Job
group of steps
🔢
Steps
run one by one
✅
Done
pass or fail
B2

Your First Workflow File

Workflows live in a special folder in your repo: .github/workflows/. Each .yml file inside is one workflow. GitHub picks them up automatically — no registration needed.

bash — create workflow folder
$mkdir -p .github/workflows
$touch .github/workflows/hello.yml

//Anatomy of a Workflow File

Let's break down a simple workflow that says hello every time you push:

.github/workflows/hello.yml — annotated
# The display name in GitHub's Actions tab
name: My First Workflow
# WHEN does this run?
on:
push:
branches: [ main ] # only on pushes to main
# WHAT does it do?
jobs:
say-hello: # job id (you choose this name)
runs-on: ubuntu-latest # use Ubuntu VM
steps:
# Step 1: Download your repo code onto the VM
- name: Checkout code
uses: actions/checkout@v4
# Step 2: Run a bash command
- name: Say hello
run: echo "Hello from GitHub Actions!"
YAML Indentation
YAML is whitespace-sensitive. Always use spaces, never tabs. Two spaces per indent level. One wrong indent = broken workflow. VS Code highlights YAML errors automatically.

//Common Trigger Events

on: — trigger options
# Run on every push to main
on:
push:
branches: [ main ]
# Run when a Pull Request is opened
on: pull_request
# Run on a schedule (every day at 9AM UTC)
on:
schedule:
- cron: '0 9 * * *'
# Run manually from the Actions tab
on: workflow_dispatch
B3

Auto-Deploy Pages with Actions

This is the most practical beginner workflow: every time you push to main, your GitHub Pages site rebuilds and redeploys automatically. No manual clicks in settings.

.github/workflows/deploy-pages.yml
name: Deploy to GitHub Pages
on:
push:
branches: [ main ]
# Required permissions to deploy to Pages
permissions:
contents: read
pages: write
id-token: write
jobs:
deploy:
runs-on: ubuntu-latest
environment: github-pages
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Pages
uses: actions/configure-pages@v5
- name: Upload site files
uses: actions/upload-pages-artifact@v3
with:
path: '.' # upload everything at root
- name: Deploy to GitHub Pages
uses: actions/deploy-pages@v4
One-time Setup
For this to work, go to repo Settings → Pages → Source and switch source to "GitHub Actions" (instead of "Deploy from a branch"). You only do this once.

//Where to Monitor Your Workflow

After pushing, click the Actions tab at the top of your repo. You'll see a live log of every step — green checkmarks mean success, red X means something failed. Click any step to see its output.

B4

Beginner Workflow Recipes

Copy-paste these into your own repos. Each is self-contained and beginner-friendly.

//Recipe 1 — Greet on PR (Print a message)

.github/workflows/greet.yml
name: PR Greeter
on: pull_request
jobs:
greet:
runs-on: ubuntu-latest
steps:
- name: Greet contributor
run: echo "Thanks for contributing! A reviewer will check your PR soon."

//Recipe 2 — Run Python Tests on Every Push

.github/workflows/test.yml
name: Run Tests
on: push
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: '3.11'
- name: Install dependencies
run: pip install -r requirements.txt
- name: Run tests
run: python -m pytest

//Recipe 3 — Scheduled Daily Message (Cron)

.github/workflows/daily.yml
name: Daily Check-in
on:
schedule:
- cron: '0 9 * * 1-5' # 9AM UTC, Mon-Fri
jobs:
morning:
runs-on: ubuntu-latest
steps:
- name: Print date
run: echo "Good morning! Today is $(date)"
Cron Cheatsheet
0 9 * * * — every day at 9 AM UTC
0 9 * * 1-5 — weekdays only at 9 AM
*/30 * * * * — every 30 minutes
0 0 * * 0 — every Sunday at midnight

Use crontab.guru to generate cron expressions interactively.

//Quick Summary — Workflow Cheatsheet

// Key YAML fields reference
Where to Learn More
github.com/skills/hello-github-actions — GitHub's own interactive Actions course
docs.github.com/actions — Full official documentation
github.com/marketplace/actions — 20,000+ pre-built actions to reuse
crontab.guru — Visual cron expression builder

This guide is part of the Mastering Version Control workshop.

View the main Git Workshop guide