Manage GitHub Repository Using Visual Studio Code

Introduction

In this article, I will discuss the steps to manage GitHub repo using VS Code. It can be possible without writing a single command and it will save our time. In my previous articles, I already described the Git operation using Git Bash. For that, we need to write commands to perform Git operations.

Today, I will describe the below-mentioned points in detail,

1. Connect VS Code to Github
2. Create Project and Push Public Repo to Github
3. Create Project and Push Private Repo to Github
4. Change Visibility Private Repo to Public Repo
5. Push Project Changes to Repo

Note
Before going through this session, please visit my below-mentioned sessions related to Git and GitHub,

1. Introduction To Git
2. Steps For Configuring Git With Details
3. Let's Know About Git Add, Git Commit, Git Status, And Git Push-In Details
4. Let's Understand How Git Maintains History Of Version Or Commit Ids With Details
5. Steps To Initialize A Git Repository And Push The Changes To GitHub In Details
6. Let's Know About Git Branches And How To Implement It
7. Let's Understand About Git Branches And Its Real-Time Uses
8. Let's Learn About Merging The Git Branches And Create Pull Request In Details
9. Steps To Ignore Files Using Gitignore In Details
10. Let's Learn About Git Default Branch In Detail
11. Steps To Create And Configure Organizations In GitHub In Details
12. Let's Learn About GitHub Projects In Detail
13. Let's Know About Team In GitHub In Details
14. Managing Files On GitHub In Real-Time - Owner Uploads Project In GitHub Repo
15. Managing Files On GitHub Using Git Bash In Real-Time Scenario - Know About GitHub Reviewer
16. Managing Files On GitHub Using Git Bash In Real-Time Scenario - Removing A Specific File From Pull Request
17. Learn Git Clone, Commit, Sync And Push Changes Using Visual Studio

Connect VS Code to Github

First open the VS Code and click on Open Folder as shown below.

Then, I will open the folder named GitProj which I created earlier. Once it is done then the interface in VS Code will be shown as below.

Here I have created two files called index.html and style.css as shown below.

Next step is to click on Source control and then Publish to GitHub as shown below.

It redirects to below page to authorize visual studio code to access GitHub as shown below. For this, you might get another interface for putting your GitHub credentials to validate your GitHub account. The below interface is different because I already have signed-In to my GitHub account.

Then I get a pop-up in VS Code for GitHub Authentication as shown below.

After successful sign-In, I can see my GitHub account is linked to VS Code as shown below.

Then I can see two options for publishing to private repo and publishing to public repo are shown below.

Create Project and Push Public Repo to Github

Click on Publish to GitHub public repository as described earlier. Then it will show list of files to commit that is index.html and style.css and click ok.

Now we can see in status bar of VS Code for Publish to GitHub.

Then I can see one pop-up for GitHub sign In as shown below. Click on Sign In with your browser option.

It redirects to a page in browser as shown below and that means the files are published to GitHub.

 

Now I can see that GitHub public repo named GitProj as shown below.

Now, I can see those pushed files under this repo as shown below.

I can see a successful pop-up in VS Code after pushing those changes to GitHub.

Create Project and Push Private Repo to Github

 I will create one folder named GitPrivate and open using VS Code. Under that folder or project I have created two files named index.html and style.css as shown below.

Then I need to publish those folders with files to GitHub by clicking on Publish to GitHub as described earlier. This time I need to create GitHub private repo as shown below.

Then I need to select those 2 files to commit those changes to GitHub repo. Now I can see this GitHub repo named GitPrivate and those 2 files are shown below.

Change Visibility Private Repo to Public Repo

I can see the GitHub public repo without sign-in as shown below.

I can't see the GitHub private repo without sign-in as shown below. To see the private repo and its files I need to sign-in using GitHub credentials. For other users the owner of that private repo will provide the permission to access that private repo. Please visit my above GitHub article link for more clarification on private repo.

To change private repo to public repo, I will go to settings of that private repo as shown below.

Then Change repository visibility option under Danger Zone as shown below.

Now the GitPrivate repo is changed from Private repo to Public repo as shown below.

Push Project Changes to Repo

In index.html, I have changed the h1 tag text from Hello World! to Hello World Next!. To push those changes I will go to source control and can see that changes are ready for commit as shown below.

Here I will type commit message for that changes and click on commit as shown below.

Then click on Yes in the pop-up to stage all the changes and commit them.

I can see the below interface after successful commit those changes.

To push those changes to GitHub I need to select Push option in 2 ways as shown below.

There are no more changes pending in source control after a successful push, those changes are shown below.

Now, I can see the latest changes in index.html file.

Here I need to create a new file named MyFile.html and push that new file to GitHub repo. Here the symbol "U" on right side of MyFile.html means untracked.

Then I will commit and push those changes as described earlier and now I can see that the new file is pushed to my GitHub repo with the commit message as shown below.

Here I can see the content of that file is shown below.

Summary

In this write-up, we have learned the below details,

1. Connect VS Code to Github
2. Create Project and Push Public Repo to Github
3. Create Project and Push Private Repo to Github
4. Change Visibility Private Repo to Public Repo
5. Push Project Changes to Repo

Thank You & Stay Tuned For More