Code Cant Upload to Git

Deploy your projects on Github using Visual Studio Code and Git

Visual Studio Code is the new blackness. Everywhere I become, whether it's youtube or 1 of the popular social media sites, Visual Studio is existence held in high esteem. I wondered why? So I checked out what it had to offer and what converted me to become a regular user is the mode VSC approached version control.

What'south non to dear? It has an integrated terminal. Information technology presents version control in a visually highly-seasoned style, making information technology piece of cake to track file changes, and not to mention the plethora of commands organized in a drop-downwardly bill of fare.

In this article, I will hold your mitt from beginning to end and show you how you can start using Visual Studio Lawmaking and Git to deploy your projects on Github.

( If yous haven't done and then however, bank check out my previous article, "How to empathise Git and GitHub for beginners" in which I light-heartedly explain the what and the why to version control and its fundamental importance for anyone aspiring to be a spider web developer. )

What you demand:

Download Git
Download Visual Studio Code
Create a Github Account

Installing them is pretty straightforward, merely if you similar reading manuals and so docs are provided within the links I provided.

In one case everything is installed, we begin with the starting time step.

1. Open up the Gitbash terminal and configure git settings

Run these four commands:

git config — global user.proper name "type your proper name here"
git config — global user.email typeyour@email.com
git config — global push.default matching
git config — global alias.co checkout

To run across if you did this right, you can type:
git config — global user.name and git config — global user.email

Because there'due south a lot to cover, you can read the docs here , if you lot want to observe out what they do.

ii. Create a folder for your project

3. Open your binder project in Visual Studio Code

Click file → Click open binder → Highlight your binder →Click Select Folder

You can just drag your binder and driblet it inside VSC

At this point, it should look similar this:

4. Create a new file

Click file → Click new file → Click file once again → Click relieve → Name your file index.html

5. Set upwardly your index.html

Make certain y'all're on the alphabetize.html — Click on the blank sail → Type physician then press Tab immediately after

This volition automatically create a unproblematic HTML template for your index file, one of the many congenital-in functions that make VSC crawly.

half dozen. Type a simple text

Click in between the <trunk></trunk> tags →
Type <h1>'Hello Earth'</h1> →
Click file → Click relieve

7. Access the integrated terminal (git)

Click view → Integrated terminal

8. Change terminal default to git

Later on the integrated final pops up →
Printing the f1 key →
Blazon the following: Terminal: Select Default Crush →
Click Terminal →
And then select git bash

Y'all know this worked when the dropdown menu in the terminal says "bash"

You should exist seeing something like this:

viii. Create a repository in the root of your project

Click in the bare canvas of the terminal → Type the words: git init

This creates a repository at the root of your project. It should look like this:

9. Become to the Source Command Section of VSC

Ane of the many smashing features of Visual Studio Lawmaking is its ability to give y'all a visualization of version control.

We can check any changes made to our project files by clicking the prong symbol on the left sidebar of VSC. You should accept something like this:

You'll detect that when y'all hover on the prong symbol, it says pending changes. This indicates that in that location were recent changes made to your project folder/files. In our case, the reason that the "pending changes" bulletin are there is because nosotros recently created an index.html file.

Is there anything else that would requite united states of america hints of contempo change? if you expect at the sidebar to the right of the prong symbol, you will see that your index.html file has the letter U, which stands for Untracked.

Untracked files are newly created project files that are nonetheless to be staged.

The other letter you volition come across frequently would exist the letter M, which stands for modified. It indicates — just like its name suggests — that a project file has been modified.

Analogies to the rescue

Earlier we go further, here is an analogy that will brand these concepts easier to understand:

Remember of this whole process like a space launch analogy.

In this step, your index.html file is an astronaut preparing to exist deployed to a different planet (github site) and right now he is putting on his spacesuit (untracked file waiting to be staged).

10. Add untracked file to the stage area

Your astronaut is all fitted and ready. We will at present take him to the lift that leads to the spaceship door.

Hover over the index.html file and a + symbol with the words "phase changes" should appear→ Click the + symbol

The alphabetize.html file should at present be under 'Staged Changes' and has a letter A with green font abreast information technology, which stands for Added.

This ways that your astronaut has reached the spaceship door and is fix to enter.

11. Commit the staged files

Now the astronaut has to bank check that everything is okay, sit down, fasten his seat-belt and wait for launch.

As well, you can check your changes past hovering over alphabetize.html and clicking open file. Once you've determined that the code looks skillful and you're happy with the changes, we're and then ready to commit our changes (the concluding step before launch).

In the left sidebar, merely higher up 'staged changes', click the check symbol →

Y'all will be prompted to create a commit message → type "This is my outset commit bulletin" or anything y'all desire → Printing Enter

The primary purpose of the bulletin is to provide a written documentation of the changes you are making, which will make for easy reference for your future cocky or any developers yous might be collaborating with.

Click here if you want to know the best practices on writing skillful commit messages.

Now the source control sidebar should exist clear and say 0 changes, significant to say that all astronauts being deployed, accept boarded and buckled up.

13. Create a new repository on Github

Now that your astronaut is buckled upwardly and fix to go, we demand the coordinates to the planet he is landing on.

At the right side of the Github website, click the + icon → click 'New repository'

14. Set your repository settings

Create a repository proper name of your choice →
Scroll down, you can fill up in or skip the description (optional) →
Skip, Public repositories cannot be inverse to private (it's a paid add-on) →
Check Initialize this repository with a README (optional, I prefer to create my ain README file)→
Click 'Create repository'

Congratulations you just made your first GitHub repository!!! This calls for a dance break

xv. Copy the repository "coordinates"

To the correct of the screen, click Clone or download →
Click the clipboard icon to copy the repository link

16. Add a remote

Now that we have the planet coordinates, nosotros can input them into the spaceship autopilot system to straight the spaceship's trajectory to the right planet (repository).

Become dorsum to Visual Studio Lawmaking → Click View → Click integrated last →
Run the command: git remote add origin [ paste your repository url ]

To bank check if it worked, type git remote -v and it should be pointing to your repository like and so:

17. Push your projection to Github

Become back to Source Command section →
On the top of the left side bar, at that place is three dots (…) click on it →
Click Publish Co-operative→

Yous volition be prompted to log into your Github account credentials →
Enter credentials

10…9…viii…7…half dozen…v…4…3…ii…1

And elevator off!!

Our astronaut is blasting his way toward planet Github and is projected (pun intended) to land on your newly created repository!

18. Chest out, mentum high considering you just published your glorious projection

Go back to Github → Coil downwards →
On the right sidebar, nether Your Repositories, click your projection proper noun

You lot should run into this:

There it is! The commit message that nosotros entered earlier on Footstep eleven.

If you click the commit message in the middle, it will evidence you lot the files you lot published, like so:

Your astronaut has landed safely!!!

This is a crusade to celebrate, let's trip the light fantastic one more fourth dimension.

19. Add some other element to your index.html file

Let's send another astronaut to accompany the ane we just deployed.

Beneath your "Hello World" text, add an <h2></h2> tag →
Type "How are y'all" in the h2 tag→
Save →

Go to Source Control section →
Review changes (the correct-side panel is the contempo change, you will notice that the h2 tag is in green, this ways that you added information technology recently) →

Stage your newly edited file →
Commit →
Click the 3 dots →
This time you have to click "push" (someday you brand a alter, use push. Publish co-operative is just done initially when setting upwardly your repository) →
Cheque your project and you will see that the new changes are there. Your h2 tag in light green.

xx. Review your project history

In your master projection folder, there is a clock icon with the word "commits" → Click on it

You lot will see each commit you've created and pushed. These are dissimilar saved "progress" files that y'all can revert to — should yous ever wish to revert your work to a different betoken in time. Or you lot can read your project progress in all its entirety, from beginning to stop.
Additionally, if you are collaborating with other developers, they will see the changes you make hither and you will see theirs.

There y'all have it. Congratulations on using Visual Studio, Git, and Github to publish your work online! Pat yourself in the back for me!

Determination

Visual Studio Code, Git, and Github are powerful and essential tools to add to your arsenal. They enable yous to save your code, create a linear history of your work from beginning to finish, collaborate with others, and showcase your projects to employers — just to name a few.

_________________________________________________________________

This "publication" is called Power Up and I hope to take empowered your learning.

You tin can support me in unlike ways: clapping, sharing my posts, inviting me to guest feature in your Medium, commenting, or by hit that follow button. If you're feeling generous, continue me awake by buying me a cup of coffee @

Thanks x 1000