Exploring Git Locally
Source Control on Visual Studio Code
Introduction
Prerequisites
In order to begin this guide, you must have completed the following:
[Getting Started with GitHub][Vercel Setup] [Visual Studio Code Setup]
What You'll Do
- Clone a repository
- Edit code
- Push to GitHub
- Pull from GitHub
- Make a branch from Terminal
- Make your first Issue
- Optional: turning your issue into a new branch.
TUTORIAL
Clone a Repository
- On GitHub.com, navigate to the main page of the repository.
- Above the list of files, click Code.
- Copy the URL for the repository.
- It is okay to clone the repository using HTTPS. Under "HTTPS", click copy icon
Cloning a repository
Open a new terminal window (CMD+Spacebar search terminal or 'F4' Search terminal)
Change the current working directory to the folder location where you want the cloned directory. (cd means change directory, try Desktop if you have never done this before)
For example, I keep all of my VSCode repo on my Desktop in a folder called VSCode.
$ cd Desktop
$ cd VSCode
Type git clone, and then paste the URL you copied earlier.
$ git clone https://github.com/YOUR-USERNAME/hello-world
Press Enter to create your local clone. You should see a message like the one below.
$ git clone https://github.com/YOUR-USERNAME/hello-world
> Cloning into `hello-world`...
> remote: Counting objects: 1, done.
> remote: Compressing objects: 100% (1/1), done.
> remove: Total 1 (delta 1), reused 1 (delta 1)
> Unpacking objects: 100% (1/1), done.
Change (cd) to the newly cloned repository folder as the current working directory.
$ cd hello-world
Type code . and this will open VSCode straight to the repository you made (hello-world) this is now connected to both internet and your to your local computer.
$ code .
Open Visual Studio code and authorize the app for use, it will always so you if you trust the authors of a reote reposity before opening it up in your computer.
Editing code
Navigate to the explorer tab of the editor and find your README file that we created in the last tutorial.
Make edits to your README file by typing in the text and code editor, I'm typing markdown text in my editor.
Unsaved changed will flag the current tab or flash a (1) on the explorer icon, click cmd/ctrl+s to save files.
Pushing to GitHub
As you save your files, the (1) flag will appear on the source control panel in your VSCode editor. The source control panel is a convenient way to stage changes without having to use terminal commands. What is staging changes?
Prepare your files to be committed to the remote repository by clicking the '+'.
After you complete that step, your files will be moved up a section.
After changes have been staged, you should see the file move from unstages to stages; then, in the message box, type Update README.md; the message box will serve as clear communication while working in teams.
Navigate to the Terminal tab at the top and click “New Terminal”
Type git -v or git —version in your terminal to confirm if git has been installed
$ git -v
Type git push then return key
This will prompt you to sign-in with GitHub
After you've authorized your account, return to the Terminal tab and type 'git push'; if successful, you'll see a number of lines linked in the image below.
Navigate to your repository on github.com and look at the most recent push you made from your computer. Congratulations! You should see your commit message on the screen.
Pulling from GitHub
Click the pencil on your newly pushed README.md file.
Make edits to your README.md file then commit those edits.
Open your VSCode editor and type 'git pull' in the terminal to download the remote changes to the file. Git pull is used when multiple people on the same team are working on the same product and want to make changes to the project.
Making a new branch in Terminal
Type 'git branch' to see which branch you are on; we are on main.
Type
git push --set -upstream origin newbranch
This creates a new branch right in terminal.
Refresh your GitHub to confirm uf a new branch has been made.
Opening an Issue
Clik on the Issues tab
Edit the subject and description to your suggestions and click Submit a new Issue.
After it has been submitted you can view all open issues in the issues tab.
Note: Open issues can turn into new branches and new pull requests in a few easy steps so that's what we're going to do.
Create new branch and rename it to something like issue solution. Copy and paste these lines into your VSCode Terminal.
git fetch origin
git checkout /issue-solution
This is how the output should look like.
On this branch you have the freedom to edit the README.md and merge the branch back into GitHub.
Congratulations, you finished the Exploring Git Locally tutorial.
