0%

How to Upload a Project from VS Code to GitHub (Complete Beginner's Guide)

How to Upload a Project from VS Code to GitHub (Complete Beginner's Guide)


Have you created a project in Visual Studio Code and want to upload it to GitHub? Don't worry! In this beginner-friendly guide, you will learn how to connect VS Code with GitHub and publish your project step by step.

⚠️ Important Note:

Before uploading your project, make sure you do not include passwords, API keys, secret tokens, database credentials, or private information. Never upload your .env file or other sensitive files to a public repository.

๐Ÿ“š What You Will Learn

  • What Git and GitHub are
  • How to create a GitHub repository
  • How to open your project in VS Code
  • How to initialize Git and commit files
  • How to connect your local project to GitHub
  • How to push your project online
  • How to fix common errors

1. What Are Git and GitHub?

Git is a version control system that tracks changes in your project files. It helps you save versions of your work and manage changes over time.

GitHub is an online platform where you can store Git repositories, share your code, collaborate with others, and showcase projects in your portfolio.

In simple words, Git manages your project's history, while GitHub lets you store and share that project online.

2. Requirements

Before starting, make sure you have the following:

3. Create a GitHub Repository

First, create an online repository where your project will be uploaded.

  1. Open GitHub.com and sign in.
  2. Click the + icon in the top-right corner.
  3. Select New repository.
  4. Enter a repository name, such as my-first-project.
  5. Add a description if you want.
  6. Choose Public if you want everyone to see your project, or Private if you want to restrict access.
  7. For this tutorial, leave the options to add a README, .gitignore, or license unchecked. This keeps the new repository empty.
  8. Click Create repository.
Tip: If you already have a project on your computer, creating an empty repository makes the first push easier to follow.

4. Open Your Project in VS Code

  1. Open Visual Studio Code.
  2. Go to File → Open Folder.
  3. Select the folder containing your project.
  4. Click Select Folder or Open.
  5. Open the terminal using Terminal → New Terminal.

Make sure the terminal is opened in your project folder. You can check the folder path shown in the terminal prompt.

5. Install and Check Git

Open the VS Code terminal and run:

Terminal — Check Git
git --version

If Git is installed correctly, the terminal will display a version number.

If the command is not recognized, download Git from the official Git website. Install it, restart VS Code, and run the command again.

6. Initialize Git in Your Project

In the VS Code terminal, run:

Terminal — Initialize Repository
git init

This command initializes Git in the current folder. Git can now track changes to your project.

Next, check which files Git can see:

Terminal — Check File Status
git status

7. Stage Your Files

Before committing, you need to stage the files you want included in the next snapshot.

To stage all eligible files in your project, run:

Terminal — Stage Files
git add .

The dot (.) means to stage changes in the current directory and its subdirectories, subject to Git's ignore rules.

Check before continuing: Run git status and confirm that no passwords, API keys, private files, or unnecessary folders are staged.

8. Commit Your Files

A commit saves a snapshot of the staged changes in your local Git history.

Run this command:

Terminal — Create Commit
git commit -m "Initial commit"

If Git asks you to configure your identity, set your name and email. Use the email you want associated with your commits.

Terminal — Configure Git Name
git config --global user.name "Your Name"
Terminal — Configure Git Email
git config --global user.email "you@example.com"

Replace the example name and email with your own details, then run the commit command again.

9. Connect Your Project to GitHub

Go back to your GitHub repository page. Copy the repository's HTTPS URL. It will look similar to this:

Example Repository URL
https://github.com/USERNAME/REPOSITORY.git

Now return to the VS Code terminal and run the following command, replacing the example URL with your actual repository URL:

Terminal — Add Remote
git remote add origin https://github.com/USERNAME/REPOSITORY.git

This connects your local project to the GitHub repository and names that remote connection origin.

If you want to verify the connection, run:

Terminal — Verify Remote
git remote -v

10. Push Your Project to GitHub

Set your current branch name to main and push your commit to GitHub.

Terminal — Rename Branch
git branch -M main

Then upload your project:

Terminal — Push to GitHub
git push -u origin main

The first push may open a browser window or ask you to authenticate with GitHub. Follow the prompts to authorize the connection. GitHub does not accept your normal account password for Git operations over HTTPS; use the supported sign-in or credential flow.

๐ŸŽ‰ Congratulations!

If the push completes successfully, your committed project files are now available in your GitHub repository.

11. Verify Your Upload

  1. Open your repository on GitHub.
  2. Refresh the page.
  3. Check that your project files and folders appear.
  4. Open a file to confirm that the expected content was uploaded.

You can now share your repository link with classmates, recruiters, or collaborators.

12. Common Errors and Solutions

Error 1: git is not recognized

Solution: Install Git, then restart VS Code. If needed, check that Git was added to your system PATH.

Error 2: remote origin already exists

Solution: A remote named origin is already configured. Check it with:

Terminal
git remote -v

If the URL is incorrect, update it using your actual repository URL:

Terminal — Update Remote URL
git remote set-url origin https://github.com/USERNAME/REPOSITORY.git

Error 3: src refspec main does not match any

Solution: Make sure you have created at least one commit and that your branch is named main. Check with:

Terminal — Check Branch
git status
git branch

Error 4: Authentication failed

Solution: Complete the GitHub browser sign-in or credential prompt. If the problem continues, check GitHub's current authentication guidance and your saved credentials.

Error 5: rejected — fetch first

Solution: The remote repository may contain commits that are not in your local repository, such as a README created on GitHub. Fetch and inspect the remote history before integrating it. Do not force-push blindly, because that can overwrite remote work.

13. How to Upload Changes Later

After editing your project, you do not need to repeat the entire setup. Open the project terminal and use these commands:

Terminal — Stage Updated Files
git add .
Terminal — Commit Changes
git commit -m "Update project"
Terminal — Push Updates
git push

These commands stage the changes, save a new commit, and upload the commit to the configured remote branch.

14. Conclusion

You have learned how to upload a project from Visual Studio Code to GitHub using Git commands. Once you understand this workflow, you can publish future projects, track changes, and build a portfolio of your work.

If you are a student or beginner, try uploading a small HTML, Python, Java, or data analytics project first. Practising the process will make it easier when you work on larger projects.

Join the conversation

Sign in with Google in our community to share your thoughts, ask questions and connect with other readers.

Open Community