What are Git and GitHub, and why does your website need them?
No developer jargon. What Git and GitHub actually do, the six words you’ll keep hearing, and how to undo a bad change in two clicks.
Londynn Metten
· 6 min read
You’ll end up with
Your site’s code in a GitHub account you own, and the know-how to undo any change
- Time
- About 30 minutes
- Cost
- Free
- Level
- Beginner
The short answer
Git is a tool that saves every version of a folder, so you can see what changed, who changed it, and go back to any earlier version. GitHub is a website that keeps that folder and its whole history online. For a website owner, that means you own your site’s code outright, every change can be undone, and hosts like Cloudflare and Vercel can publish your site automatically every time something on GitHub changes. It’s free, and you never have to touch a terminal to use it.
What is Git, in plain words?
Git is save points for a folder. Your website is a folder of files. Every time you save a change with Git, it takes a snapshot of the whole folder and asks you for a short note about what you did.
Those snapshots never get thrown away. So a year from now you can still see that on March 3rd someone changed the phone number in the footer, read their note about why, and put the old one back if they got it wrong.
If you’ve ever used version history in Google Docs, you already get the idea. Git is that, for a whole website.
So what is GitHub, and how is it different from Git?
Git is the tool. GitHub is the place. GitHub is a website where your folder, with every snapshot Git ever took of it, lives online. You can browse your files there, edit them, see the history, and let other people (or an AI assistant) work on them.
You can use Git without GitHub, and there are other places like it. GitHub is the one almost every host and every AI coding tool connects to, so it’s the one we use.
What do the six words you keep hearing mean?
| Word | What it means | In website terms |
|---|---|---|
| Repository (repo) | The folder plus its whole history | Your website, all of it |
| Commit | One saved snapshot, with a note | “Changed the opening hours” |
| Branch | A separate copy to try things on | A draft of the site nobody sees yet |
| Main | The branch that counts | The live site |
| Push / pull | Send changes up to GitHub / bring them down | Upload your edits / get the latest |
| Pull request (PR) | A request to move a branch into main | “Here’s my draft, can it go live?” |
Launch the new site
saved to the live sitelive
Fix the footer phone number
saved to the live sitelive
Start a draft: new hours
nobody sees it yet
Change the opening hours
saved to the draft, a preview link appears
Publish the draft
called “merge”: the draft becomes the live sitelive
That’s honestly most of it. Branch, check, merge. The rest is detail.
Why does a website owner need this?
- You own it. The code sits in your account, not inside a builder or an agency’s server. You can take it to any developer or any host.
- Nothing is ever lost. Every version of every file is kept, so any mistake is reversible.
- It publishes your site. Connect a host once and every change to main goes live by itself. No uploads.
- Help can’t break the live site. A developer or an AI works on a branch, you look at a preview, and only then does it go live.
- There’s a paper trail. Who changed what, when, and why, forever.
This is the piece our client was missing when they got stuck in the builder. The code existed, but not anywhere they controlled. Part one tells that story.
How do you set up GitHub for your site?
- 01Create an account at github.com with your business email. Pick a username you’d be happy to show a client.
- 02Turn on two-factor sign-in under Settings, then Password and authentication. This account will hold your whole website, so treat it like your bank login.
- 03Get your site into a repository. If you built it in v0, use its GitHub option to create the repo in your account. If a developer built it, ask them to transfer the repository to you, or to add you as an owner.
- 04Keep it private. Private repositories are free, and a business site has no reason to show its code to the world.
- 05Invite help as a collaborator, not an owner. In the repository, go to Settings, then Collaborators, and add them by username. You can remove them any time.
The one rule: the repository lives in your account. Developers and agencies come and go. Your site shouldn’t go with them.
How do you read your site’s history?
Open your repository on GitHub and click the commit count near the top of the file list (it says something like “214 Commits”). That’s every change ever made, newest first, each with its note and who made it.
Click any commit to see exactly what changed: removed lines in red, added lines in green. You don’t need to understand code to spot that “Open 9 to 5” became “Open 9 to 6.”
How do you undo a bad change?
Two easy ways, depending on how the change got in.
- 01If it came in through a pull request: open the merged pull request on GitHub and click Revert. GitHub makes a new pull request that undoes it. Merge that one and the site goes back.
- 02If it was saved straight to main: open GitHub Desktop, go to the History tab, right-click the commit and choose “Revert changes in commit”, then click Push origin.
Version 1
“Open 9 to 5”
What the site said.
Version 2 · the mistake
“Open 9 to 6”
Published by accident.
Version 3 · the undo
“Open 9 to 5”
Back in a minute or two. GitHub calls it “revert”.
All three stay in the history
Either way, nothing gets deleted. Git adds a new snapshot that reverses the old one, so the mistake and the fix both stay in the history. That’s a feature.
Do you have to use the terminal?
No. GitHub’s website handles small edits, GitHub Desktop handles everything else, and an AI assistant can do the Git part for you. But if you’re curious, these are the only commands most site owners ever need.
git clone <repo-url> # download the site to your computer, once
git pull # get the latest changes
git switch -c new-hours # start a branch called new-hours
git add . # stage everything you changed
git commit -m "New hours" # save a snapshot with a note
git push # send it up to GitHubNext, part three puts this to work: editing your own Next.js site, right on GitHub.
What GitHub won’t do for you
GitHub backs up your code, not everything around it. Your domain, your email, your DNS settings, and whatever your forms collected live somewhere else, and need their own logins written down somewhere safe.
It’s also not a place for big media. GitHub blocks any single file over 100 MB and gets slow well before that, so long videos belong on a video host, not in your repository.
And it isn’t an editing dashboard. If your team wants to type posts into a friendly screen and press publish, that’s a content management system on top of GitHub, not GitHub itself.
Common questions
- Is GitHub free?
- Yes, for this. The free plan includes unlimited private repositories and collaborators, which covers a small business website comfortably. Paid plans add team management features you won’t need yet.
- Is my code public on GitHub?
- Only if you choose public when you create the repository. Pick private and only the people you invite can see it. You can change it later in the repository settings.
- What’s the difference between Git and GitHub?
- Git is the tool that saves versions of your files. GitHub is a website that stores those files and their history online, and adds pull requests, collaborators and connections to hosts. You use them together.
- My developer owns the repository. What do I do?
- Ask them to transfer it to your account. It’s a setting in the repository (Settings, then Transfer) and takes a minute. The history comes with it, and they can stay on as a collaborator.
- Can I break my site by using GitHub?
- You can push a mistake live if you save straight to main. That’s why changes go on a branch first, and why every mistake can be reverted. Nothing you do in GitHub is permanent.
Keep going
More you can build yourself
Now that the code is yours, let’s change something on it. Part three: editing your own Next.js site.
Read part 3