DEV Community

Cover image for A Beginner's Guide to Forking and Syncing Personal GitHub Repositories 📝
Tori
Tori

Posted on

A Beginner's Guide to Forking and Syncing Personal GitHub Repositories 📝

#webdev #tutorial #git #vscode

This guide explains how to fork a repository, set the upstream, fetch changes, rebase updates, and push changes to your personal fork using GitHub and the Visual Studio Code terminal.

These instructions assume you’re the only one working in the fork. Steps may differ if the repository is shared with collaborators.

Prerequisites

  1. Git installed on your computer
  2. GitHub account
  3. Visual Studio Code

Terminologies

  1. Local: Your copy of the repo on your computer.

  2. Remote: A version of the repo hosted online (e.g., GitHub).

  3. Origin: The default name for your fork's remote on GitHub.

  4. Upstream: The original repo you forked from.

⭐ Step 1: Fork the Repository

  1. Go to the original repository on GitHub.
  2. Click Fork (top right) and select your account.

A portion of a GitHub repository page showing the top-right buttons. There is a Watch button with the number 1, a Fork button with the number 132 (highlighted by a white arrow pointing at it), and a dropdown arrow next to Fork. Below these buttons is a green Code button.

Deselect the option to copy only the main branch if you want to make a copy of all available branches.

The image is a screenshot of a

You'll be taken to your page for your newly created fork.

GitHub page for the public

⭐ Step 2: Clone Your Fork Locally

  1. On the page for your newly created fork, navigate to <> Code and copy the web URL. GitHub cloning options interface showing HTTPS URL and download options.
  2. In your VSCode terminal, move into the folder you want the repository to be based in. You can do this one of two ways:
    • Clicking File -> Open Folder -> Select the folder
    • Use the command cd to navigate the directory of a folder that's already open. Read more about cd here -> cd in Git
  3. Once you're in the right folder, use the command git clone and paste the URL.
  4. cd into the newly created repo folder.

Terminal showing commands to navigate directories and clone a GitHub repository.

⭐ Step 3: Create a New Branch

⚠️ Before creating a new branch, make sure you're on main. Always do your work in a branch other than main (whether it's for features, experiments, or practice) so you keep main clean and conflict-free.

  1. git branch to check which branch you're on.
    • It will list all your local branches, and the one you’re currently on will be marked with an asterisk *. Terminal displaying the output of 'git branch' command, showing the active branch as 'main'.
  2. git checkout -b new-branch-name creates and moves to your new branch.

Terminal screenshot showing Git command to create and switch to a new branch.

⭐ Step 4: Check and Add Upstream Remote

  1. git remote -v to list the current remotes associated with the local repository. (On a new fork, you'll only see origin)Terminal screenshot showing Git origin remote URLs for fetch and push.
  2. git remote add upstream https://github.com/ORIGINAL-OWNER/REPO-NAME.git adds the upstream. Terminal showing a Git command to add a remote repository.
  3. Verify with git remote -v.Terminal window showing Git remote command output with remotes 'origin' and 'upstream'.

Remember: Upstream is the original repository you forked from. Adding an upstream lets you pull in updates from the source project to keep your copy up to date.

⭐ Step 5: Work on Your New Branch

⚠️ Make sure you switch to your new branch so your changes don't touch main.

Terminal showing the command to switch to example-branch

Now you can edit files, using these commands as you go:

  1. Check changed files: git status
  2. Stage files
    • Stage one file: git add insert-file-name
    • Stage all changed files: git add .
  3. Commit staged changes: git commit -m "Your commit message"

Terminal commands showing git status, add, and commit with two untracked files.

⭐ Step 6: Fetch Updates from Upstream

  1. If you have any uncommitted changes, stage and commit them.
  2. Switch to your main branch.
  3. git fetch upstream to fetch the latest changes from the original repo.

NOTE: This fetches changes for all branches, not just main.

Terminal chowing commands to return to main branch and fetch upstream

⭐ Step 7: Sync Upstream Changes with Local Main

  1. git merge upstream/main.

Terminal showing the command to merge upstream/main

This updates your main branch with the latest changes from the original repo (upstream). (If you want to sync other branches, you need to check out each branch first and merge it following the same steps.)

⭐ Step 8: Bring Changes from main to Your Branch

This ensures your branch has the latest changes you synced with main in Step 7.

  1. git checkout example-branch
  2. git merge main Terminal showing the commands to switch to example-branch and merge main
  3. A file will open where you can edit the merge commit message.File named MERGE_MSG that has one line uncommented to create a commit message
  4. Closing the file confirms the merge.

Terminal showing underneath git merge main that a merge was made with insertions and deleltions.

If there are conflicts, there are a few options you can read about here -> How to Resolve Merge Conflicts in Git

⭐ Step 9: Push Updates on Your Local Branch to Your Fork on GitHub

⚠️ Make sure all your changes are staged and committed before pushing.

  1. git checkout example-branch
  2. git push origin new-branch-name pushes your local branch to your GitHub fork (origin).

Terminal showing the command git push origin example-branch

⭐ Step 10: Update Your Fork's main on GitHub

  1. git checkout main
  2. git push origin main

Terminal showing the command to return to the main branch and push changes to origin main.

This pushes your local main to your fork's main on GitHub.

🎉 Your fork is now up to date and ready for development! Remember to regularly fetch and merge from upstream so your work stays in sync with the original repository.

Happy Coding! 🤓

Top comments (0)