Streamlined Deployment: Easily Push Your Source Codes from VSCode to GitHub in a Few Simple Steps.
Table of contents
Introduction
As you begin to evolve as a developer, one of the many acquired super-powers that comes with the journey is time management; the ability to accomplish tasks with as minimal clicks on the keyboard as possible. This is a compulsory skill that is demanded by all developers, and it is rather safer to say that the phrase 'minimal clicks on the keyboard' and the Command Line Interface (CLI) belong in the same sentence, as various Command Lines are used for different purpose and it is proven to be a faster alternative to the common Graphical User Interface (GUI) we all are used to.
The Command Line Interface in this subject simply involves using the terminal provided in the VScode editor to easily push your project to your GitHub repository with Command lines such as git init
, git commit
, git push
, etc.
This article provides you with a step-by-step means to easily accomplish this task, and it is open to both beginners in the game as well as experienced devs who are looking to pick up something that may have been forgotten from their archives.
Prerequisites
This article is open to anybody with a GitHub account.
Steps
Before we proceed, It is assumed that we all have a GitHub account already, If not, please do well to create one by clicking on the hypertext and coming back. This is to ensure that we are able to follow up with the process easily.
We will be going through the process of deploying projects from your VScode editor directly to a named repository in your GitHub account in just a few steps.
Step 1: One of the important things to note while pushing projects from your editor to GitHub is that all related files (codes, images, etc) must be in a single directory. Therefore, before pushing files to your remote repository, ensure that all connected files or scripts are in a single folder.
As shown above, all four files involved in the project are placed under a directory titled; Login Page Design.
Creating a directory for your project can alternatively be done in your editor.
Step 2: Open your code editor and then open the newly created folder by navigating to the file \> open folder > folder_name.
Step 4:
Open your GitHub account via browser, navigate to the Create repository icon by the top-right corner, click on the drop-down next to the +-sign icon and select New repository.
Step 5: Set up a name for your new repository, and a description (optional), and click on the Create repository button.
Step 6
After clicking on create repository, you’re then redirected to a page that allows you to copy a link to the newly created repository as shown below:
Copy the link and head on to the VScode editor.
Step 7
On the editor, open a new terminal by clicking on Terminal > New terminal. The terminal window should automatically appear beneath your project.
On the terminal, enter
git init
to create a local repository.Next, enter
git commit -m ‘your commit message’
to commit your message to your repository.Enter,
git remote add origin <your GitHub repository>
.In this case,
<your GitHub repository>
is the initially copied link from your GitHub from step 6.git remote -v
to confirm the link from the remote repository.git push -u origin master
to push committed changes to the repository.
After pushing, you should get a message like this on your terminal :
This message confirms that your project has been successfully deployed to your remote repository.
You can verify by refreshing your GitHub repository online. You will find your projects sitting in your repository.
Conclusion
In my opinion, having to drag a mouse or a trackpad all the time while working can be a little discomforting, and having to do so much with just a few taps on your keypad comes with a certain feeling of heightened productivity. This is what this article aims to provide.