Skip to main content

🚢 Lesson 6: Deploy from GitHub & Your First Pull Request

In the HTML & CSS course you published by dragging a folder onto Netlify. It worked, but every update meant dragging again. In this final lesson you'll connect Netlify to your GitHub repository so that a git push is a deploy. Then you'll use the way professional teams ship changes: a branch, a pull request, a live preview of the change, and a merge. By the end of today, you'll have a workflow that real web teams use every day.

🎯 Learning Objectives

By the end of this lesson, you will be able to:

  • Connect a Netlify project to your GitHub repository (continuous deployment)
  • Choose the right publish directory for a plain HTML/CSS site with no build step
  • Push a change and watch Netlify deploy it automatically
  • Push a branch with git push -u origin ⟨branch⟩ and open a pull request on GitHub
  • Check your change on a Netlify Deploy Preview before it goes live
  • Merge the pull request, delete the branch, and bring your laptop back in sync

Estimated Time: 40 minutes

Project: Make your live site deploy from GitHub, then ship one improvement through a pull request with a Deploy Preview

In This Lesson

🔄 From Dragging to Pushing

With continuous deployment, Netlify watches your GitHub repository. Whenever the main branch gets a new commit, Netlify grabs the files and publishes them. You never touch the Netlify dashboard to update your site again.

graph LR A["💻 Edit + commit<br/>on your laptop"] -- "git push" --> B["☁️ GitHub<br/>main updated"] B -- "notifies" --> C["⚙️ Netlify<br/>starts a deploy"] C --> D["🌐 Live site<br/>updated in seconds"] style A fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style B fill:#f1f5f9,stroke:#64748b,stroke-width:1px,color:#1e293b style C fill:#fef3c7,stroke:#f59e0b,stroke-width:2px,color:#1e293b style D fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

Before you start, check that Lesson 5 is finished: your my-website repository is on GitHub, and git status says Your branch is up to date with 'origin/main' and nothing to commit, working tree clean.

🔌 Connect Netlify to GitHub

Log in at app.netlify.com. (Remember: Netlify now calls sites "projects".)

  1. On your dashboard, click Add new project → Import an existing project.
  2. Under the Git provider choices, pick GitHub.
  3. A GitHub window asks you to authorize Netlify. Approve it. The first time, GitHub may also ask where to install the Netlify app: choose your account, and either All repositories or Only select repositories with my-website ticked. (If your repository doesn't show up in Netlify's list later, this is the setting to revisit.)
  4. Back in Netlify, pick your my-website repository from the list.
  5. Review the settings. For a plain HTML & CSS site there is nothing to build:
    SettingWhat to use
    Project nameSomething unique, e.g. yourname-website (becomes yourname-website.netlify.app; you can change it later)
    Branch to deploymain
    Base directoryLeave empty
    Build commandLeave empty
    Publish directoryLeave empty (the repository root), or the folder that holds index.html if it isn't at the top
  6. Click the Deploy button at the bottom (it may read Deploy your-project-name).

Netlify shows the deploy happening, and in less than a minute your project has a live URL, now fed from GitHub.

⚠️ "Page Not Found" after deploying?

Same rule as drag-and-drop: Netlify needs index.html at the top of the publish directory. Open your repository on GitHub. If you see index.html in the file list straight away, the publish directory should be empty (the root). If you have to click into a folder first (say site/), set the publish directory to that folder under Project configuration → Build & deploy, then trigger a new deploy from the Deploys page.

💡 What about my old drag-and-drop project?

Importing creates a new Netlify project with its own URL. Two easy options:

  • Use the new one: delete the old drag-and-drop project (its Project configuration → General → Delete project), then rename the new one to the old name under Project configuration → General → Change project name, so your old URL keeps working.
  • Keep the old one: instead of importing, open the old project and go to Project configuration → Build & deploy → Continuous deployment, and use the option to link a repository. Netlify's labels here change from time to time; look for "Link repository" or similar.

💡 Credits: push with purpose

Remember from the HTML & CSS course: Netlify's free plan gives you 300 credits per month, and each production deploy costs 15 credits. Now that every push to main is a production deploy, that's roughly 20 pushes to main a month. Commit as often as you like (commits are free and local) and push when a change is ready. Deploy Previews, which you'll meet in a moment, are free. Plans change, so check netlify.com/pricing.

📤 Push a Change, Watch It Deploy

Time for the magic moment. Make a small, visible change on main: for example, add a line to your home page's footer in index.html.

<p>Now deployed automatically from GitHub.</p>

Check it in Live Server, then:

git add index.html
git commit -m "Add deployment note to footer"
git push

Now switch to Netlify and open your project's Deploys page. Within a few seconds a new deploy appears at the top, labeled with your branch and commit message. Click it to watch the deploy log scroll by. When it says Published, refresh your live site. There's your footer line. 🎉

That's continuous deployment: push = publish. Every deploy is also listed on that page, and you can still roll back to an older one with Publish deploy, just like before.

⚠️ Now "main" is the live site

Anything you push to main goes public within seconds, typos and all. That's exactly why teams don't push experiments straight to main. They use a branch and a pull request, which is where we're headed next.

🤝 What Is a Pull Request?

A pull request (PR) is a page on GitHub that says: "Here are the commits on my branch. Please review them, and when they look right, merge them into main." It's a merge with a conversation around it: a description, comments, automatic checks, and one button to merge.

On a team, PRs are how people propose changes to shared code. Working solo, a PR is still worth it: it gives you a moment to review your own changes, and Netlify builds a Deploy Preview of the branch so you can see the change live before it reaches your real site.

gitGraph commit id: "Add README" commit id: "Deployment note" branch update-footer checkout update-footer commit id: "Update footer" commit id: "Add email link" checkout main merge update-footer id: "Merge pull request #1"

It's exactly the branch-and-merge picture from Lesson 4. The difference is where the merge happens: on GitHub, by clicking a button, after you've seen a preview.

graph TD A["1️⃣ git switch -c update-footer"] --> B["2️⃣ Edit, commit"] B --> C["3️⃣ git push -u origin update-footer"] C --> D["4️⃣ Open a pull request on GitHub"] D --> E["5️⃣ Netlify Deploy Preview<br/>check the change live"] E --> F["6️⃣ Merge pull request<br/>Netlify deploys main"] F --> G["7️⃣ Delete branch on GitHub<br/>git switch main, git pull, git branch -d"] style D fill:#eff6ff,stroke:#3b82f6,stroke-width:2px,color:#1e293b style E fill:#fef3c7,stroke:#f59e0b,stroke-width:2px,color:#1e293b style F fill:#f0fdf4,stroke:#22c55e,stroke-width:2px,color:#1e293b

🌿 Branch, Push, Open a PR

Step 1: Make a branch and commit

git switch main
git pull
git switch -c update-footer

Starting from an up-to-date main is a good habit. Now make a real improvement: add links to your GitHub profile and your email in the footer, or fix a style you've been meaning to fix. Check it in Live Server, then commit (one or more commits, your choice):

git add .
git commit -m "Add GitHub and email links to footer"

Step 2: Push the branch

This branch only exists on your laptop. Push it to GitHub, with -u because it's the branch's first push:

git push -u origin update-footer
...
remote:
remote: Create a pull request for 'update-footer' on GitHub by visiting:
remote:      https://github.com/your-username/my-website/pull/new/update-footer
remote:
To https://github.com/your-username/my-website.git
 * [new branch]      update-footer -> update-footer
branch 'update-footer' set up to track 'origin/update-footer'.

Lines starting with remote: are messages from GitHub itself. It even hands you a link to open the pull request. Pushing a branch does not deploy your live site; only main does.

Step 3: Open the pull request

  1. Open your repository on GitHub. A yellow banner says your branch had recent pushes, with a green Compare & pull request button. Click it. (No banner? Use the link Git printed, or go to the Pull requests tab → New pull request and choose your branch.)
  2. At the top, check the arrow: base: main ← compare: update-footer. That reads "merge update-footer into main". GitHub should say Able to merge.
  3. Give it a clear title (your commit message is filled in for you) and write a short description: what changed, why, and how to check it. For example: 
    Adds a GitHub profile link and a mailto link to the footer on every page.

To check: open the Deploy Preview, look at the footer, click the email link.
  4. Scroll down to see the commits and files changed: green lines added, red lines removed. It's the same idea as git diff, just prettier.
  5. Click Create pull request.

Your PR gets a number (probably #1) and its own page, with tabs for Conversation, Commits, Checks, and Files changed.

👀 The Deploy Preview

Because Netlify is connected to this repository, it notices the new pull request and builds a Deploy Preview: a full copy of your site as it would look with this PR merged, at its own temporary address. You don't have to set anything up; Deploy Previews are on by default for pull requests into your production branch.

On the PR's Conversation tab, within a minute or so you'll see:

  • a checks area near the merge button with Netlify's status (a spinner while it builds, then a green ✓), and
  • a comment from the netlify bot saying the Deploy Preview for your project is ready, with a link. (Exact wording and layout vary.)

The preview address follows a pattern: deploy-preview-1--yourname-website.netlify.app. The 1 is the PR number. Open it and click around: check the footer, the email link, and a narrow window for mobile. Your real site hasn't changed at all.

✅ Found a problem in the preview?

Great! That's what previews are for. You don't need a new PR. Just fix it on the same branch, commit, and git push (no -u needed now). The PR updates itself with the new commit and Netlify rebuilds the preview. Repeat until you're happy. Previews don't use your production-deploy credits.

🔀 Merge & Clean Up

Step 1: Merge on GitHub

  1. On the PR's Conversation tab, scroll to the green Merge pull request button. The little arrow beside it offers other merge styles; keep the default, Create a merge commit, which is the same kind of merge you did in Lesson 4.
  2. Click Merge pull request, then Confirm merge.
  3. GitHub shows "Pull request successfully merged and closed" and a Delete branch button. Click it. The branch's work is safely inside main now, so the branch label isn't needed. (If you ever need it, there's a Restore branch button right there.)

The merge added a new commit to main on GitHub, so Netlify starts a production deploy. Check your Deploys page, and in a few seconds your real site has the change.

Step 2: Bring your laptop back in sync

GitHub's main now has the merge commit, but your laptop doesn't know yet, and your local update-footer branch is still there. Three commands:

git switch main
git pull
git branch -d update-footer
Switched to branch 'main'
Your branch is up to date with 'origin/main'.
From https://github.com/your-username/my-website
   eb822f1..cc646ca  main       -> origin/main
Updating eb822f1..cc646ca
Fast-forward
 contact.html | 1 +
 index.html   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
Deleted branch update-footer (was 010da01).

(Remember: "up to date" right after git switch only means "as far as I last heard". The git pull is what actually checks.) The pull brought down the merge commit, so Git knows update-footer is fully merged and lets -d delete it. Take a look at the result:

git log --oneline --graph
*   cc646ca (HEAD -> main, origin/main) Merge pull request #1 from your-username/update-footer
|\
| * 010da01 (origin/update-footer) Add GitHub and email links to footer
|/
* eb822f1 Add deployment note to footer
...

You just did what professional web teams do dozens of times a day. 🎉

💡 Tidy-up extra

That (origin/update-footer) label, and the remotes/origin/update-footer line in git branch -a, are your laptop's memory of the branch you deleted on GitHub. git fetch --prune clears out those leftovers. It only tidies the list and never touches your files.

⚠️ If git branch -d complains

  • error: cannot delete branch 'update-footer' (followed by checked out at… or used by worktree at…) means you're still on that branch. Run git switch main first.
  • error: the branch 'update-footer' is not fully merged means Git can't find the branch's commits in your main yet. Usually the fix is the git pull you skipped. Pull, then try again.
  • If you skip the pull, Git may still delete the branch but print a warning: … not yet merged to HEAD. Nothing is lost (the work is on GitHub); just run git pull now.

Don't reach for -D (capital) to force it; that deletes unmerged work.

🗂️ Your Everyday Workflow

Here's the whole day on one card. Print it, or keep it next to your keyboard.

📋 Everyday Git Workflow Card

WhenDo this
Start of a sessiongit switch main then git pull
Starting a changegit switch -c short-descriptive-name
While workingEdit, check in Live Server, git status, git diff
A piece is donegit add . then git commit -m "What and why"
Ready to sharegit push -u origin branch-name (later: git push)
Propose itGitHub: Compare & pull request → describe → Create pull request
Check itOpen the Netlify Deploy Preview; fix, commit, push if needed
Ship itMerge pull request → Confirm merge → Delete branch
Sync upgit switch main, git pull, git branch -d branch-name
OopsUncommitted edit: git restore. Bad commit: git revert. Bad deploy: Netlify Publish deploy on an older one.

What you can do now

Look back at this morning: you'd never typed a Git command. Now you can:

  • ✅ Track every change to your site with meaningful commits
  • ✅ Look back through history and undo mistakes safely
  • ✅ Experiment on branches and resolve a merge conflict
  • ✅ Back up your work on GitHub and move it between computers
  • ✅ Deploy automatically with every push
  • ✅ Ship changes through a pull request with a live preview

If some of it still feels shaky, that's normal. Nobody remembers every command after one day. You'll get fluent by using this workflow on every project from here on, and every error message you meet and read is a step toward that.

❓ Common Questions

I pushed, but Netlify didn't deploy. Why?

Check three things: (1) Did you push to main? Branches don't deploy to production (they get previews only through a PR). (2) On Netlify's Deploys page, is there a failed or stuck deploy? Click it and read the log. (3) Have you used up the month's credits? Then Netlify pauses your projects until the next cycle.

Is it weird to open a pull request on my own repository?

Not at all. Lots of solo developers do it for every change: it gives you a preview, a record of why each change was made, and a habit that transfers directly to team work.

Can I still drag and drop to deploy?

Once a project is connected to GitHub, let Git do the deploying. A manual deploy would be replaced by the next push anyway, and having one source of truth (GitHub's main) is the whole point.

What if the PR says "This branch has conflicts that must be resolved"?

That happens when main changed the same lines after you made your branch. On your laptop: git switch update-footer, git pull origin main, fix the conflict exactly as in Lesson 4, git add, git commit, and git push. The PR updates and becomes mergeable.

🏋️ Hands-on Exercise

🏋️ Exercise: Ship It Like a Pro

Objective: Connect Netlify to your repository, then ship one real improvement to your site through a pull request with a Deploy Preview.

Instructions:

  1. In Netlify: Add new project → Import an existing project → GitHub → authorize → pick my-website. Branch main, no build command, publish directory empty (or your index.html folder). Deploy.
  2. Give the project a readable name (Project configuration → General → Change project name) and open the live URL.
  3. Make a small change on main, commit, git push, and watch the Deploys page until it's Published. Confirm the change on the live site.
  4. Create a branch update-footer (or a name that describes your change). Make an improvement in at least one file and commit it.
  5. Push the branch with git push -u origin update-footer.
  6. On GitHub, open a pull request with a clear title and a two-line description.
  7. Open the Netlify Deploy Preview from the PR and check your change. Push one more small fix to the same branch and watch the PR and preview update.
  8. Merge the PR (Create a merge commit), confirm, and delete the branch on GitHub. Watch the production deploy.
  9. On your laptop: git switch main, git pull, git branch -d update-footer, then git log --oneline --graph.

Deliverable: your live Netlify URL showing the change, and the URL of your merged pull request (https://github.com/your-username/my-website/pull/1) with the Netlify bot's Deploy Preview comment on it.

💡 Hint

If your repository isn't in Netlify's list, the Netlify GitHub app probably only has access to some repositories. Follow the link Netlify shows to configure it and add my-website. If there's no Deploy Preview on your PR, check that the PR's base is main (the branch Netlify deploys) and that you opened the PR after connecting Netlify. Pushing another commit to the branch will trigger a fresh preview.

✅ Solution 
# Step 3: a change on main deploys to production
git add index.html
git commit -m "Add deployment note to footer"
git push

# Steps 4-5: a branch for the pull request
git switch main
git pull
git switch -c update-footer
# ...edit files in VS Code, check in Live Server...
git add .
git commit -m "Add GitHub and email links to footer"
git push -u origin update-footer

# Step 7: one more fix on the same branch (PR + preview update)
git add .
git commit -m "Fix spacing in footer"
git push

# Step 9: after merging and deleting the branch on GitHub
git switch main
git pull
git branch -d update-footer
git log --oneline --graph

Success looks like this: the PR page shows Merged in purple, the Deploys page shows a production deploy from the merge commit, your live site has the change, and git log --oneline --graph shows the Merge pull request #1 commit at the top.

🌟 Want to go further?

Team up with a classmate. Add each other as collaborators (repository Settings → Collaborators → Add people). Clone their repository, make a branch, push it, and open a pull request on their site. They review it on the Files changed tab, leave a comment, check the Deploy Preview, and merge it. Then swap. That's real collaboration, and a great warm-up for team workflows.

🎯 Quick Quiz

Question 1: Your site is a plain HTML & CSS site with index.html at the top of the repository. What goes in Netlify's Build command and Publish directory?

Question 2: Once Netlify is connected, what makes your live site update?

Question 3: What is a Netlify Deploy Preview?

Question 4: In the pull request header, what does base: main ← compare: update-footer mean?

Question 5: You merged the PR on GitHub and deleted the branch there. On your laptop you're still on update-footer, and git branch -d update-footer fails with error: cannot delete branch 'update-footer'. What should you do?

📓 Learning Journal

Take five minutes to add to your learning journal. Write down:

  • Key concepts you learned
  • What clicked — the idea or technique that made sense
  • Questions or confusion, so you know what to revisit
  • Ideas to try on your own pages
  • How you feel about your progress

✍️ This lesson's prompt: Look back at the whole day. Write down the moment Git first felt useful rather than just new, and the moment it felt hardest. Then describe, step by step in your own words, how you'll make your next change to your website, from git pull to a merged pull request. Which step do you expect to need the workflow card for?

Summary

🎉 Key Takeaways

  • Add new project → Import an existing project → GitHub connects Netlify to your repository; a plain HTML/CSS site needs no build command
  • With continuous deployment, a push to main is a production deploy (15 credits on the free plan, so push with purpose)
  • A pull request proposes merging a branch into main, with a description, checks, and a merge button
  • git push -u origin ⟨branch⟩ puts a branch on GitHub; Compare & pull request opens the PR
  • Netlify builds a free Deploy Preview for each PR, so you can check the change before it goes live
  • After merging: Delete branch on GitHub, then git switch main, git pull, git branch -d ⟨branch⟩

📚 Additional Resources

🚀 What's Next?

You've finished the class. Congratulations! 🎉 Your website is under version control, backed up on GitHub, and deployed automatically. Keep using the everyday workflow on every change; that's how it becomes second nature.

Next course: Front-End JavaScript. You'll add interactivity to your pages, and you'll commit, push, and ship every exercise with the workflow you learned today.

Going further on this site, whenever you're ready: