Open CheatSheet Back To List Next Tutorial

Beginning Github Tutorial (Video Tutorial)

Beginning Github Tutorial

Intro

[0:00 Video timestamp]

Read it, watch it, do it, review it:

  • There are both a written and accompanying video version of this tutorial. The written version has timestamps under the headings that align with the video version of the topic.
    • Read it: For each topic heading, first read the topic. 
    • Watch it: Then watch the associated section of the video.
    • Do it: Then follow the instructions to replicate the steps on your computer.
  • The CheatSheet has a major category that aligns with this tutorial.
    • Review it: Open the CheatSheet and review the Beginning GitHub category which includes all the topics from this tutorial. Make sure you understand everything, and can refer back to the CheatSheet when you are working on your own projects in the future. 
    • There is not a separate exercise for Beginning GitHub. After the Intermediate GitHub tutorial there are exercises for beginning and intermediate combined.

  • GitHub is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, issue tracking, software feature requests, and more.
  • In this beginning GitHub tutorial, we will cover signing up, authentication, creating a GitHub remote repository, adding the remote to your local git repo, pushing your code to Github, and cloning someone else's repository.
  • The intermediate Github video will focus on how to use Github to collaborate on private and open source projects.
  • Note, while this tutorial is GitHub specific, this is applicable to other remote repositories as well (e.g., Bitbucket, GitLab, etc.).

  • We will be using the git-demo project from the Beginning and Intermediate Git tutorials. The finished code from this whole Git/GitHub series is hosted at github.com/LearnByCheating/git-demo
    • To reset it to the finished code from this tutorial enter: git reset --hard v3-beginning-github
    • To reset it to the beginning code for this tutorial enter: git reset --hard v2-intermediate-git

  • If you are using Visual Studio Code as your text editor, it has an integrated Terminal window and a Source Control feature that offers a GUI interface for the most commonly used Git and GitHub commands. In this tutorial we will be using both Git commands from the command line and the VS Code Source Control GUI toolbars and menus. If you are not using VS Code, just skip over those parts.


Sign up for Github

[0:59 Video timestamp]

  • To create a GitHub account, go to their website github.com and click the signup button, and go through the steps.
  • It's free. Although there is a paid tier for some of the more advanced features with private team repositories.

GitHub Authentication


Create a new Github remote repository

[2:39 Video timestamp]

  • Once you have an account and your credentials set up, you can create remote repositories. 
  • We'll start by using GitHub's most basic example project. 

Set up the project locally:
  • On your computer, create a directory called first-github-repo.
  • Open your text editor to the new project. If you are using Visual Studio Code as your text editor you can open a Terminal window right in the editor: Terminal menu > New Terminal

Add the GitHub remote repository:
  • Sign in to your Github account. 
  • From your home page click the Create new repository button or link. 

  • Enter the project name as the GitHub repository name: first-github-repo. This will be the URL path.
  • Add an optional description: My first GitHub repository.
  • Select "public" if you want anyone to be able to view it, or "private" if only you and people you select can access it.
  • Skip the next prompts about adding readme, gitignore and license files because we are creating the project locally, not directly on GitHub.
  • Then click the Create Repository button.



Create local Git repository, add remote, make initial push to remote

[3:44 Video timestamp]

  • Now our GitHub remote repository has been created and we are on our empty repository page.
  • Under the heading ...or create a new repository on the command line:
    • Github gives you a few lines of code to quickly create a basic project. Copy those lines.

  • Go to your local project, and in the Terminal, paste in the copied lines:
echo "# first-github-repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/first-github-repo.git
git push -u origin main

Here is what each line is doing:
1. echo "# first-github-repo" >> README.md
  • This line is a Unix command that creates a file called README.md and adds your repo name formatted as a heading. 
  • The Readme file is what gets displayed when you open the Github repository. 
  • The md extension indicates that it uses the Markdown language. Markdown compiles into HTML and offers some very basic styling. Readmes and the Markdown language are covered in a separate tutorial. 

The next several lines are standard Git commands:

2. git init Creates a local git repository.

3. git add README.md Adds the readme file to the staging area.

4. git commit -m "first commit" Makes the first commit.

5. git branch -M main If the default branch is not already called main, this will rename it.

6. git remote add origin https://github.com/your-username/first-github-repo.git 
  • This command adds a remote repository to your local git repo.
  • It takes two arguments:
    1. The first argument is the alias name for the remote repository. It is convention to use the name "origin" as your default remote name, but it can be any name. You can have more than one remote (e.g., a web server).
    2. The second argument is the URL to the remote.

7. git push -u origin main does a few things:
    • It pushes the main branch of your local repository to your remote. 
    • The upstream option -u sets "origin" as the default remote URL and main as the default branch that we push. 
    • Once this is set, going forward you will only need to enter git push, and Git will push the main branch to the URL named "origin".

  • Go back to the repository's Github page and refresh it. You will see it now displays the Readme page and has one commit. 



Delete a Github Repository

[5:45 Video timestamp]

  • Let's delete this GitHub repo.
    • From the repo page, click the Settings  toolbar on the far right of the Navigation bar at the top of the screen.
    • Scroll down to the bottom  and click the Delete Repository button. 
    • It will ask you to confirm but typing in the repository name. Do that then click Delete Repository and the repository will be gone. 
  • You can delete the local directory on your computer as well.



The git-demo project

[6:15 Video timestamp]

Now let's push the git-demo project from the previous Git tutorials.

  • Open the project in your text editor, and open a Terminal window to the project.

  • Make sure you are on the main branch: git branch 
    • The branch you are on will start with an asterisk.
    • If not enter: git branch main

  • Check the Git status of your repo to make sure there is nothing to stage or commit: git status 

  • Log the commit history: git glog
    • If the glog alias command gives you an error, create an alias for this and the oneline log commands:
    • git config -g alias.olog 'log --oneline' Set alias for oneline. git olog 
    • git config -g alias.glog 'log --graph --oneline' Set alias for graph log. git glog

  • Check the .gitignore file to make sure you won't be pushing files or directories you don't want/need onto GitHub. 
    • Don't push files with sensitive information. 
    • Or directories with third party packages used by your app such as the node_modules directory for Node.js projects. 

Add a Readme file
  • One thing this project doesn't have yet is a Readme file so let's add one:

README.md
The purpose of the project is to demonstrate Git and GitHub. It is meant to accompany a series of video tutorials and CheatSheets on those topics.

  • In the Terminal, add it to the staging area and commit it. Then view the commits again:
    • git add README.md
    • git commit -m 'Add readme' 
    • git glog

  • Notice two commits are tagged. Beginning Git and Intermediate git.

Create a remote repo
  • Go to your GitHub home page and click the Create new repository button or link.
  • Enter the project name as the GitHub repository name: git-demo
  • Add an optional description: Demo app for learning Git and GitHub
  • Select public or private.
  • Skip the next prompts about adding readme, gitignore and license files.
  • Click the Create Repository button.
  • Copy the lines under …or push an existing repository from the command line

Add the remote and initial push to the project
You can add the remote and push it to your new GitHub repo either
  • From the command line.
  • Or using VS Code's Source Control sidebar.

From the command line:
  • Paste the commands you copied from GitHub into the Terminal
git remote add origin https://github.com/your-username/git-demo.git
git branch -M main
git push -u origin main

These commands do the following:
  1. Add the remote to the project with an alias of "origin" for the remote URL.
  2. Rename the branch to "main". If your branch is already named main, this line will have no effect.
  3. Push the project's git repository to the remote. 
    • -u The first time you push, set a default remote location by adding the --set-upstream option or -u for short. 
    • origin Then put the alias for the remote URL, in this case "origin". 
    • main Then the name of the default branch to push,  "main".

4. We have a couple tags on commits. You have to push tags with a separate command:
    • Enter git push and the tag name or --tags to push all tags: git push --tags

  • To print the name of any remotes you have on the repository, enter: git remote 
    • We just have "origin".
    • git remote -v Add the --verbose or -v option to show the names and the URLs.


Using the VS Code Source Control feature:
Instead of adding and pushing the remove from the command line, you can do it using the Source Control GUI. 

 1. Add the remote to the project with an alias of "origin" for the remote URL.
    • We need the URL for the remote so go back to the Github page and copy the URL.
    • In VS Code, open the Source Control sidebar: 
    • Click the More Actions drop-down menu at the top of the Source Control sidebar 
      • ⋯ > Remote > Add Remote > paste in the URL > enter a name: "origin" 
      • You can delete a remote the same way: 
        • ⋯ > Remote > Remove Remote > Select "Origin" 

 2. Push the local repository to the remote by clicking the Publish Branch button.

 3. If you you have tags, you have to push them from the command line: git push --tags

  • Go back to the GitHub repo and refresh the page. You will see the repository there. The Readme is displayed as the default view.

  • On the upper left side you will see a button for the "main" branch. If you click the dropdown, and select tags, you will see your list of tags. If you click one, you'll get the state of the code as of that tagged commit.
  • Click the branch name to get back to the latest commit.

  • Just above the file list on the right is a number followed by the word "commits". This is the number of commits in your repository. If you click on it, it will take you to a list of the commits. From there you can drill down on a specific commit to see the changes.



Push commits to remote

[9:47 Video timestamp]

  • Now that we have made our initial push on this branch, we can push subsequent  commits to the remote.

The flow would go something like this:
  • Create and check out a new branch. We'll call it feature4: 
    • git checkout -b feature4

  • Add your changes and save the files: 
    • I'll add file feature4.txt with Some text.
feature4.txt
Some text.

    • And modify app.txt by adding a line on the bottom.
app.txt
This is a demo app to learn Git.
Second line modified.
Third line modified in main branch and modified in feature3 branch.
Feature 1.
Feature 2.
Feature 3.
Feature 4.

  • Add it to the staging area, and commit it:
    • git add .
    • git commit -m 'Add feature 4'

  • Check out the main branch: git checkout main

  • Merge feature4 into main: git merge feature4

  • Then push the new commit to our default remote: git push

  • Delete the feature4 branch: git branch -d feature4

  • Alternatively, You could push the new commit using the Source Control sidebar:  Click More Actions and selecting push:
    • ⋯ > push 

  • Go to Github and refresh the page to see that feature4 has been added.



Add a tag

  • View our commits so far: git glog
  • Add a tag with a message to the last commit. 
  • We can do that from the command line or using the Source Control sidebar.

From the command line:
  • Add a tag to our local Git repository:
    • git tag -am 'Beginning GitHub' v3-beginning-github 
  • Then push the tag to GitHub with the git push origin command with the tag name as the last argument:
    • git push origin v3-beginning-github 

Or from the Source Control sidebar: 
  •  Add a tag to our local Git repository:
    • ⋯ > Tags > Create Tag > Name: v3-beginning-github> Message: Beginning GitHub  
  • Then push the tag to GitHub from the command line:
    • git push origin v3-beginning-github 


Clone a Remote Repository

[10:58 Video timestamp]

  • The last topic we'll cover for beginning Github is cloning a remote repository. 

  • A lot of software tutorials make their source code available on Github for download. There are a few ways you can do that. From the GitHub repository page:

 1. Click the "Code" button and select Download Zip to download it as a zipped file.

 2. Or click the "Code" button, then copy the HTTPS URL.
  • Open your Terminal to the directory you want the repo in.
  • Enter the git clone command and paste in the URL as the first argument.
    • git clone https://github.com/username/repository-name.git [new-name] 
      • To change the name, add a new-name argument at the end. Or omit it to keep the same name.
  • If you don't need the project's git history, delete the .git folder from your local copy: 
    • rm -rf .git

3. Or if you are using VS Code, click the "Code" button and copy the HTTPS URL like before.
  • Then open a new window in VS Code: File menu > select New Window
  • Open the Source Control sidebar 
  • Click the Clone Repository button.
  • Paste in the URL at the prompt.
  • Then select what directory to put it in and click select As Repository Destination.

Open CheatSheet Back To List Next Tutorial