Let's say you have an already existing project in your machine that is not uploaded to GitHub yet. You have this need because you cannot stand the risk of having this project locally anymore as your machine might crash any day (planning for the rainy day). This article is a walkthrough for uploading an existing project to GitHub using VSCode. Follow these simple steps.
Prerequisites:
The setup: I am assuming that you already have your setup ready. If not so, no need for alarm. You can see the setup section of this article to do your complete setup.
Your project file: I am also assuming that you already have your project file in your VSCode editor ready to be uploaded so we will not be going through the process of creating a file in VSCode.
Create a repository:
Go to your GitHub profile and create a new repository by clicking on the "+" sign on the top-right corner of the page as illustrated in the image below. It will show a dropdown box, click on "new repository".
You will be taken to a new page where you can give the repository a name. Possibly, same name as that of your project folder for easy identification. Click on "create repository". You will be taken to another page where you can upload your files.
N.B: Do not add a readme.md file yet.
Upload your files:
Click on "uploading an existing file".
Scroll down a bit and you will see where you can add files in your project.
Click on choose files. This will open your device's file explorer.
Click on desktop. Click on the folder to highlight the folder (In this case, mine is "project") and click "open" to open the files in the folder.
Type in the name of the file you want to upload e.g. index.html and click "open" to automatically upload the file. Repeat this same process for any other files you might have in the folder that you want uploaded.
When you are done uploading all the files you have in the folder, Check for "commit changes", on "add files via upload" type in the name of the folder.
Click on the "commit changes" button and there you have your project uploaded!
As your project has uploaded, now is a good time to add your readme.md file.
Click on the "Add a README" button. Type your readme, scroll a bit down and click on "commit new file". Now you have something like the image below.
Making changes to the files:
At another scenario, you might want to make further changes to the uploaded files in the folder. Follow the following steps:
Clone the repository:
Copy the URL of the project page on GitHub by clicking on "code" to get the dropdown box. Highlight and copy the URL in the box or click on the "copy icon" beside the URL.
N.B: Any changes you make on the files before cloning the repository will not reflect on GitHub when you finally clone it.
Open the folder on your VSCode. (I am still using my "project" folder). Go to "view" on the navigation bar, click on "command palette" in the dropdown box.
Click on "Git: clone" from the next dropdown box, paste in the previously copied repo URL and press enter.
You will be taken to your devices file explorer. Click on the "project" folder and click the "select repository location" button.
You will find the repo being cloned at the bottom right of your VSCode.
When its done, it will alert you to open the cloned repository.
Click on open, and there is your cloned repository in your VSCode and its ready to receive changes.
Stage your changes:
I have added changes to the "project.css" file to illustrate in this article.
Save your changes. Click on the git icon on the notification bar. You will see your changes. Add the changes to staged changes by clicking on the "+" sign.
Commit your changes:
Click on the "three dots" on the files space, take your cursor to "commit" and click on "commit staged".
This will bring a text area where you will type your message on the top center page. The message is where you title the changes you made at least for easy identification of the changes made in the files. For this sample, I will give the title "initial commit" and enter. Now you have successfully committed your codes.
Push changes:
Go back to the "three dots" again, take your cursor to the "pull, push" on the drop down box and click on "push to".
A text area comes up on the top center page, click on the URL and viola, you just pushed your code! (Although, this time around you need internet connection to push to GitHub. You do not even need to leave your VSCode to push your codes as long as the repo is cloned.)
To confirm that you have your codes successfully committed and pushed to GitHub, go back to your GitHub profile, open the repo you have been working on and refresh the page. And there are your committed and pushed changes.
Congratulations for a job well done!
But:
If you push and a dialogue box pops up instead just like the image below, don't panic I got you covered!
Click on "open git log". It will open the git terminal. Click on "terminal".
Type in the following commands in the terminal.
git config user.name "" (type in your github profile name in the quote) and press enter.
git config user.email (type the email you used to open the github proffile) and press enter.
And it will definitely push this time. (Just make sure your network connection is good).
You did really good for following through to the end! I hope this helps you. You can follow me on Twitter for more of such educative contents.