My Adventures with Git, GitHub, and Visual Studio Code Setup

Yesterday, I had a job interview that was really well! They seemed to really like me and are okay with me coming on as a Junior Dev, which is exactly what I’m looking for with my next job. And they’re giving me time to practice coding for when they send out my coding test next week.

Problem is I had to have my hard drive wiped after a massive Blue Screen of Death Loop took it out of commission. So….everything I had set up for coding was lost. I didn’t get a chance to back things up due to Life and just being generally busy. So my goal today was to do exactly that.

But it’s been some time since I’ve worked with Git and Github, so I needed a guide to help me get set up for my JavaScript practice. I was able to find a really good Git and GitHub guide on Dev.To that got me pretty far with my setup, but I kept running into some problems.

For some reason, Visual Studio Code and Git Bash couldn’t find my GitHub Repo - kept saying it didn’t exist. 😵

Which I knew was insane because I was staring right at it the entire time! So I kept deleting my local folder and re-creating, deleting and re-creating my GitHub Repo, and just kept running into the same idiot loop of VS Code not being able to find my Repo. And I knew I was following all the steps correctly, but it just wasn’t working.

So I stopped, closed my eyes, took a breath, and started again. Only this time, I didn’t add in a ReadMe file in my GitHub Repo and just had it empty. And eureka! The code that you see when you create a new Repo in GitHub finally showed up on my screen!

Huzzah! And with this I found the one line I was missing this entire time - git branch –M master

Seeing this made me realize why my repo wasn’t found - it didn’t switch to seeing the master branch and had no idea it existed!

So it was correct when it said it my repo didn’t exist! Except it also wasn’t…🤷‍♀️

And of course everything worked like normal after I added in that line. So even though it drove me insane, I was able to get GitHub setup and working with my files. And now I have a clear set of…

Instructions to setup up git and github in windows

  1. Download and install Git 

  2. Download and install Visual Studio Code 

  3. Open Git Bash and do the following: 

    git config --global user.name "Your Name" 
    git config --global user.email your.email@example.com 

  4. Create an account on GitHub 

  5. Make a new Repo (Can be Public or Private) 

  6. DO NOT CREATE A READ ME FILE  

  7. Create a local directory in Git Bash :

    cd into documents 
    mkdir <folder name> 
    cd into folder  

  8. Type code to open Visual Studio Code 

  9. Create an index.html file 

  10. Edit the file 

  11. Ctrl+` to open the Terminal in VS Code 

  12. Type git init  [Enter] to initialize a Github file 

  13. Type git add . [Enter] to add the file to the staging area 

  14. Type git commit –m “initial commit” [Enter] to create the first commit 

  15. Type git branch –M master [Enter] to change to the master branch 

  16. Type git remote add origin and paste in the HTTPS link from the green Code button on the repo or copy and paste in the .git link provided in the on-screen directions (ex: https://github.com/your_username/your_repository.git) 

  17. Type git push –u  origin master to push the new code to the repo 

  18. Go to the Github repo and refresh the page to see the file that was created  

And for when I know it will come up:

Adding Additional Commits and Files to the Repo 

  1. Continue coding as usual 

  2. When reading to commit, type git add .  to add in all the changes you’ve made 

  3. Type git status to view the staged files 

  4. Type git commit –m “[commit description]” to create the commit (Can also do this in the Git tab on VS Code) 

  5. Type git push to add the new edits to the current repo 

web devDanielle Mossgit, github, visual studio code