Code Versioning Made Easy: Pushing from Visual Studio Code to GitHub with GitHub Desktop

Code Versioning Made Easy: Pushing from Visual Studio Code to GitHub with GitHub Desktop

Introduction

Learning Git as a newcomer to the tech industry can be daunting and overwhelming. The command line, from 'git init' to 'commit' and 'pull', may seem like a foreign language that takes time to grasp. However, as a dedicated learner, it's crucial to embrace new knowledge and skills to make tasks like 'pushing to GitHub' effortless and accessible for both newbies and tech enthusiasts who are just starting their career journey in the field of technology. In this article, we will explore a user-friendly solution to overcome these initial challenges by utilizing the GitHub Desktop app

  1. The Power of GitHub Desktop: Introducing GitHub Desktop, a user-friendly application that simplifies the Git workflow and eliminates the need for complex command-line interactions.

  2. Installation and Configuration: Step-by-step instructions on installing GitHub Desktop and configuring it to seamlessly integrate with Visual Studio Code.

  3. Navigating the GitHub Desktop Interface: A guided tour of the intuitive GitHub Desktop interface, highlighting key features and functionalities.

  4. Initializing a Repository: Creating a new repository using GitHub Desktop, allowing you to organize and track your code effectively.

  5. Committing Changes: Understanding the concept of commits and how to use GitHub Desktop to conveniently commit changes to your codebase.

  6. Synchronizing with GitHub: Exploring the process of synchronizing your local repository with a remote repository on GitHub, ensuring your code is up to date.

Installation and Configuration

Download the GitHub desktop app

The first step is to download the GitHub desktop app from the official GitHub page.

GitHub desktop download page

Once the download is complete, proceed by clicking on the executable file to initiate the installation process, which may require a few minutes to finalize.

Upon completing the installation process, you will be greeted with a welcome page that offers the option to either sign up for a GitHub account or access GitHub Enterprise.

If you already have a GitHub account, sign in using your credentials. In case you don't have an account yet, you can create one for free. When you click on the sign-in option, an authorization page will appear, allowing you to connect your GitHub account with the GitHub Desktop app.

Click on the 'Authorize desktop' button, and a pop-up message will appear, prompting you to open the desktop app.

Grant permission by clicking on the 'Open GitHub Desktop' button, which will automatically redirect you back to the desktop app for further configuration..

The configuration page displays your GitHub details, which have been automatically fetched from your online GitHub account. Click the 'Finish' button to proceed. This will bring you to the desktop interface.

Initializing a Repository

The interface presents various actions that can be carried out using the GitHub Desktop app. For this article, our focus is on pushing code from Visual Studio Code to our GitHub account. To begin, click on the 'Create a New Repository on Your Hard Drive' option.

A new page will appear, prompting you to enter the repository name and choose the location where you want to store the local repository file.

Enter the repository name and select the folder path where you want to store the file, preferably within the project to be pushed folder. For this article, you can ignore the README, git ignore, and license options. Then, click on the 'Create Repository' button.

Once created, a new interface will appear, showing the repository name at the top left corner. Take note that the 'Changes' section displays '0 changes' and the bottom left corner indicates that there are no commit messages yet.

Click on the 'Open Visual Studio Code' button, which will automatically launch the Visual Studio Code editor with the files you want to push. If you're using Visual Studio Code with the GitHub desktop app for the first time, you may be prompted to grant permission to trust the authors of the files within the folder.

Granting the permission will open the code interface. In this step, we will modify the content of the <h3> tag to 'Attend Only here'. Once you have made the changes, save the file and close the Visual Studio Code editor.

Modifying this text will instantly update the corresponding file in our GitHub repository. The altered code will be highlighted with a red background, indicating the changes made, while the new code will be highlighted with a green background.

Committing Changes:

Moving forward, a commit message, in essence, is a concise comment written to describe the changes made to a code. It should be kept simple, stating the nature of the modifications. The commit message field is located at the bottom left corner, next to the GitHub account logo. If necessary, you can provide a brief description as well. Once you're done writing the commit message, click the 'Commit to main' button to proceed.

Once the changes have been successfully committed, the next step is to push the repository. The interface that appears after the commit page displays the option to 'Publish repository'.

Synchronizing with GitHub

Click the 'Publish repository' button, which will prompt an interface displaying the repository name and a description box. Before pushing the repository remotely, click the 'Publish repository' button once again. This action will push the repository online.

The pushed repository can be verified by checking the online GitHub repository, where it will appear in the list of repositories.

Conclusion:

By leveraging the user-friendly interface of GitHub Desktop, you can overcome the initial challenges of learning Git and make the process of pushing code from Visual Studio Code to GitHub an enjoyable and convenient experience. Embrace this tool as a newbie in tech to enhance your code versioning workflow and collaborate seamlessly with others in the vibrant tech community.

With this article, I hope it empowers aspiring developers and newcomers in tech to embark on their journey with confidence and proficiency in code versioning using GitHub Desktop. Let's simplify the complexities of Git and make the world of code collaboration more accessible to everyone.