How to Push Code from VS Code to GitHub and Deploy on a Live Server (Step-by-Step Guide)

How to Push Code from VS Code to GitHub and Deploy on a Live Server – Complete Step-by-Step Guide

If you are a web developer, student, or beginner learning Git, knowing how to upload your project to GitHub and deploy it on a live hosting server is an essential skill.

Visual Studio Code (VS Code), Git, and GitHub make it easier to manage source code, maintain project versions, collaborate with other developers, and publish website updates.

In this tutorial, we will learn how to connect VS Code with GitHub, create a repository, push project files using Git commands, and deploy the project to a live hosting server.

This guide also covers common Git errors, authentication problems, and practical solutions to help beginners complete the entire process.

What You Will Learn

By the end of this tutorial, you will understand:

• How to install and configure Git on Windows.
• How to open a project in Visual Studio Code.
• How to initialize a Git repository.
• How to connect a local project to GitHub.
• How to create and push a GitHub repository.
• How to manage Git branches.
• How to fix GitHub authentication and permission errors.
• How to deploy a website on a live hosting server.
• How to update your live website after making code changes.

Requirements Before Getting Started

Before following the tutorial, make sure you have these tools and accounts:

1. Visual Studio Code: A code editor for managing your project.
2. Git: A version control system used to track code changes.
3. GitHub Account: An online platform for hosting Git repositories.
4. Live Hosting Account: A web hosting service with access to your website files.
5. Internet Connection: Required for communicating with GitHub and your hosting server.

You can download the required tools from their official websites:

• Visual Studio Code: https://code.visualstudio.com/
• Git: https://git-scm.com/downloads
• GitHub: https://github.com/

Step 1: Install Git on Windows

First, download Git from its official website and install it on your Windows computer.

After installation, open PowerShell, Command Prompt, or the VS Code terminal.

Run the following command:

git --version

If Git is installed correctly, you will see the installed Git version.

Now configure your Git username and email address:

git config --global user.name "Your Name" git config --global user.email "your-email@example.com"

Use the name and email you want associated with your Git commits.

To verify your configuration:

git config --global --list

Step 2: Open Your Project in VS Code

Open Visual Studio Code and select your existing project folder.

For example, our project is located at:

C:\xampp\htdocs\php_projects\gitproject

Open the integrated terminal using:

Terminal → New Terminal

Make sure the terminal is currently inside your project directory.

You can verify the current location using:

pwd

On Windows PowerShell, you can also use:

Get-Location

Step 3: Initialize Git in Your Project

Now initialize a Git repository inside your project folder.

Run:

git init

This command creates a local Git repository and allows Git to track changes in your project.

Check the current repository status:

git status

If your project contains files that are not yet tracked, Git will display them as untracked files.

Important: Create a .gitignore File

Before uploading your project, create a .gitignore file in the root directory.

For a typical PHP or Laravel project, you should avoid uploading sensitive files, dependencies, and temporary files.

Example:

.env /vendor/ /node_modules/ /storage/logs/ /.idea/ /.vscode/

Adjust these entries according to your project. For example, a Laravel project may need additional exclusions, while some projects may intentionally track selected configuration files.

Important: Never upload passwords, API keys, database credentials, private keys, or other confidential information to a public repository.

Step 4: Add and Commit Your Project Files

Now add your project files to Git.

git add .

This command stages all files that are not excluded by .gitignore.

Next, create your first commit:

git commit -m "Initial project commit"

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

Check the status again:

git status

If everything is committed, you should see:

nothing to commit, working tree clean

Step 5: Create a New Repository on GitHub

Now open GitHub and log in to your account.

Follow these steps:

1. Open https://github.com/
2. Click the New Repository option.
3. Enter your repository name.
4. Add a description if required.
5. Select Public or Private according to your requirements.
6. Click Create Repository.

For this tutorial, we will use:

Repository Name: mytestproject GitHub Account: YourGitHubUsername

After creating the repository, GitHub will provide a repository URL.

It will look similar to this:

https://github.com/YourGitHubUsername/mytestproject.git

Copy this URL because we will use it to connect our local project to GitHub.

Step 6: Connect VS Code Project to GitHub

Return to your VS Code terminal.

Add the GitHub repository as the remote origin:

git remote add origin https://github.com/YourGitHubUsername/mytestproject.git

To verify the remote connection:

git remote -v

You should see the fetch and push URLs of your GitHub repository.

Set the Main Branch

In this example, we will use the master branch.

git branch -M master

You can use main instead if that is the branch name you prefer. Make sure the branch name is consistent in your commands.

Step 7: Push Your Code from VS Code to GitHub

Now comes the most important step.

Run:

git push -u origin master

This command uploads your local commits to the remote GitHub repository.

The -u option sets the upstream tracking branch, making future pushes easier.

After successful authentication and upload, open your GitHub repository and refresh the page.

You should now see your project files on GitHub.

Future Updates: Push New Changes

Whenever you modify your project files, use these commands:

git add . git commit -m "Updated project files" git push

Your latest committed changes will be pushed to GitHub.

Step 8: Fix Common Git and GitHub Errors

Sometimes Git commands may return errors during the first push. Here are some common issues and their solutions.

Error 1: src refspec main does not match any

Example:

error: src refspec main does not match any error: failed to push some refs

Reason: Your local branch may be named master, but you are trying to push main. Another possibility is that you have not created your first commit.

Solution:

Check your current branch:

git branch

If the output shows:

* master

Then push using:

git push -u origin master

If you prefer main, rename your branch and push that branch instead:

git branch -M main git push -u origin main

Make sure at least one commit exists before pushing.

Error 2: Permission Denied – GitHub 403

Example:

remote: Permission to owner/repository.git denied to YourUsername. fatal: unable to access the repository: The requested URL returned error: 403

Reason: GitHub is authenticating you with an account that does not have permission to push to the selected repository.

For example, suppose:

• Your connected GitHub account is Mithun021.
• Your repository belongs to dcodematerials.

If Mithun021 does not have write access to the dcodematerials repository, GitHub will reject the push.

Solution 1: Give Collaborator Access

The repository owner can:

1. Open the GitHub repository.
2. Go to Settings.
3. Open Collaborators or Manage Access.
4. Invite the GitHub username that needs access.
5. Accept the invitation from that account.

Solution 2: Authenticate with the Repository Owner Account

If you have access to the repository owner's GitHub account, you can switch the saved GitHub credentials on Windows.

1. Open Windows Credential Manager.
2. Select Windows Credentials.
3. Find the saved GitHub credential.
4. Remove the relevant outdated credential.
5. Run the push command again.
6. Authenticate with the correct GitHub account.

git push -u origin master

Remember: Changing the Git remote URL does not automatically grant repository permissions. Your authenticated GitHub account must have write access.

Error 3: Remote Origin Already Exists

If you see:

error: remote origin already exists.

It means a remote named origin is already configured.

Check the existing URL:

git remote -v

If you want to change it:

git remote set-url origin https://github.com/YourGitHubUsername/mytestproject.git

Error 4: Working Tree Clean

If Git displays:

nothing to commit, working tree clean

It means there are no pending changes to commit.

It does not necessarily mean your code has been uploaded to GitHub. Check the remote repository and push any existing commits if required.

Step 9: Deploy Your Project on a Live Hosting Server

After successfully uploading your code to GitHub, the next step is to deploy your website to a live hosting server.

There are different ways to do this, depending on your hosting provider and project type.

Method 1: Deploy Using cPanel File Manager or FTP

This method is useful for beginners and works with many shared hosting environments.

1. Log in to your hosting account.
2. Open cPanel.
3. Navigate to File Manager.
4. Open the website's document root, commonly public_html.
5. Upload your project files or deployment package.
6. Extract the files if you uploaded a ZIP archive.
7. Configure your website's document root and application settings.
8. Check your website using its domain name.

For Laravel applications, the public web root should point to the Laravel public directory. Do not expose the .env file, application source, or other sensitive files through the public web directory.

Method 2: Deploy Using Git on cPanel

If your hosting provider supports Git Version Control, you may be able to deploy directly from your GitHub repository.

General steps:

1. Log in to cPanel.
2. Find Git Version Control.
3. Create or clone a repository.
4. Enter your GitHub repository URL.
5. Configure the deployment directory.
6. Pull the latest changes.
7. Complete any required deployment steps.

The exact process depends on your hosting provider and its Git deployment configuration.

For private GitHub repositories, you may need to configure an appropriate SSH key or other supported authentication method.

Method 3: Automatic Deployment Using GitHub Actions

If you want to automate deployment, GitHub Actions can run a deployment workflow whenever you push code to a selected branch.

A typical workflow looks like this:

VS Code | v Git Commit | v Git Push | v GitHub Repository | v GitHub Actions | v Live Hosting Server | v Updated Website

This approach requires a properly configured workflow, hosting credentials, deployment permissions, and secure GitHub repository secrets.

Do not store FTP passwords, SSH private keys, or other sensitive credentials directly in your workflow source code.

Step 10: Verify Your Live Website

After deployment, open your website domain in a browser.

Check the following:

• Does the homepage load correctly?
• Are CSS and JavaScript files loading?
• Are images displaying properly?
• Are internal links working?
• Are forms and other website features functioning?
• Are there any server-side errors?
• Is HTTPS enabled and working?

If everything works correctly, your website is successfully deployed.

Understanding the Complete Workflow

Let's quickly review the complete process:

Frequently Asked Questions (FAQs)

1. Can I push code to GitHub directly from VS Code?

Yes. VS Code provides built-in Git integration. You can stage, commit, pull, and push changes through its Source Control interface or by using the integrated terminal.

2. Is GitHub free to use?

GitHub offers free plans with public and private repositories, subject to its current plan limits and features.

3. Do I need Git to upload code to GitHub?

For Git-based repository workflows, yes. Git is the version control tool used to manage and transfer repository changes.

4. Can I deploy a website directly from GitHub?

Yes. You can use services such as GitHub Pages for supported static websites, or configure a hosting provider to deploy from a GitHub repository.

5. Does pushing code to GitHub automatically update my live website?

No, not by default. Automatic updates require a configured deployment integration, GitHub Actions workflow, or another deployment mechanism.

6. What is the difference between Git and GitHub?

Git is a version control system used to track changes in code. GitHub is an online platform that hosts Git repositories and provides collaboration and project management features.

7. Can I use the master branch instead of main?

Yes. Both are valid branch names. The important thing is to use the correct branch name consistently in your local and remote Git commands.

8. What should I do if GitHub shows a 403 permission error?

Check which GitHub account is authenticated, verify that the account has write access to the repository, and confirm that your remote URL points to the correct repository.

Conclusion

Connecting Visual Studio Code with GitHub and deploying a project on a live hosting server is an important part of a developer's workflow.

By following these steps, beginners can learn how to initialize a Git repository, commit project changes, connect a remote repository, push code to GitHub, troubleshoot common errors, and deploy a website.

Start practising with a small project first. Once you understand the workflow, you can use Git and GitHub to manage larger projects and streamline your development process.

Keep learning, keep building, and keep coding!

Tutorial Note: The Git commands and deployment methods in this guide are general examples. Your hosting provider, project framework, server configuration, and repository permissions may require additional steps. Always verify your deployment configuration before publishing a production website.