1. Workshops
  2. retired
  3. Git and GitHub

Git and GitHub

Introduction to using Git and GitHub

Created by @nguyenbrian, @JevinSidhu, @uditdesai, and @vaibhavyadaram

Edit

Hack Club logo Computer Science Tutorials

Git and GitHub

Introduction to using Git and GitHub

Created by @nguyenbrian, @JevinSidhu, @uditdesai, and @vaibhavyadaram

You can find this tutorial online at https://hackclub.com/workshops/git_and_github


Basic Git and GitHub

This workshop has been retired and is no longer maintained or recommended.


Table of Contents

Tips and Tricks While Using This Workshop

  1. To see a GIF in another tab, right click on the GIF and click open in new tab.
  2. Don’t include the square brackets mentioned ([text-here]) when typing.
  3. Those are indicators of areas where you type custom text.
  4. 5. Type: git branch [branch-name] would be: git branch custom-text.
  5. After you type a command in the terminal, hit “enter” on your keyboard to complete the command.

Preparing Your Workspace

Note: If you already have a pre-existing workspace you can skip to the next section.

Git requires at least one file in your workspace to be used. The steps below will take you through setting the workspace up.

  1. Login to your Cloud9 homepage - https://c9.io/

  2. Register if you haven’t already.

  3. It should look like this:

    Cloud9 dashboard

  4. Create a workspace!

  5. Press the create a new workspace button.

    create new workspace

  6. Give the workspace a good name that conveys what the workspace is used for quickly, and concisely.

    • There are no spaces allowed in the name, use a dash (-) for spaces if you need them.
  7. Add a short description, you’ll thank yourself later!

  8. Select public for the privacy settings, it’ll make it easier for people to help you with your project.

  9. If you already have a GitHub project with files and you want to have it ready when you create the workspace you can add its link in the box provided.

  10. For the template you may choose either Custom or HTML5.

    name new workshop

  11. Get rid of the unnecessary junk.

  12. On the left sidebar: Right click on README.md and hello-world.html.

    • Select “Delete” and Yes to any warnings.

      • You won’t need these for your project.
  13. Close the opened README.md as well.

    close readme

  14. Create an index.html file.

  15. On the left sidebar: Right click and press “New File”.

  16. Name the file index.html.

  17. Double-click and open it.

  18. Write your name in the index.html file.

  19. If you don’t know how, you may use this pre-provided code:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p>Your name here</p>
    </body>
</html>
  1. Save the index.html file.

  2. Make sure the active file is the index.html file by either clicking on it on the sidebar or clicking anywhere in the code.

  3. You may press Ctrl+S (Windows), Command+S (Mac) or go to File —> Save.

    save in Cloud9

  4. Celebrate!

    Your workspace is now ready to be used with Git!

What is Git?

Git is a version control system - https://git-scm.com/

Example: If We Used Git With Word Documents

Git’s Tools

Repository

(short-form: “repo”)

A repository is a place where your project files are stored.

Branch

example branches

Example: Why Branches?

Bob & John are working on one repo and the same files at the same time:

Example: Branch Merging

Master Branch

Diagram of Master Branch Versus Another Branch

feature branch tree

What is GitHub?

GitHub (https://github.com/) is an online Git repository hosting service.

GitHub Pages is a free service by GitHub that allows you to host a website on their servers (https://pages.github.com/).

Preparations

  1. You need to have at least one file named index.html.
  2. This is the conventional name of the main HTML file and GitHub Pages won’t host your files without one
  3. You provided a Git link when you made the workspace:

clone from git into Cloud9

Nah, not familiar? Follow the steps in Git and GitHub Pages w/ provided link in heading below

Using Git and GitHub

  1. Open your terminal

  2. Depending on the workspace configuration you set, it might already be opened.

  3. Hit the ”+” button in the bottom panel area OR on the top-bar click “Window” and “New Terminal”.

    open new terminal

  4. Type the command: git add [file] OR git add ..

  5. Adds a file to be tracked by git.

    • E.g. git add index.html.
  6. My only file is index.html.

    • In the case you have more than one file, the period [.] means add every file in the workspace to the tracked files.

      • E.g. git add .

    git add .

  7. Type: git commit -m "[commit message here]".

  8. Commits changes to be pushed to the branch.

    • -m stands for message and in quotations put a message that descriptions what you did.

      • If it is the first commit, simply put git commit -m "first commit".
  9. Think of committing as packaging something into a package and putting the shipping label on it.

  10. Don’t make bad commit messages: be concise, but clear about what you did.

    git commit

  11. Type: git push.

  12. Part two of saving, “pushing”.

    • Uploading to GitHub.
  13. Think of pushing as actually shipping the container to the recipient, which in this case is the repo.

  14. After hitting enter, you need to sign with your GitHub credentials.

    • You can you find your username either on your profile or at these spots when you login to GitHub.

GitHub username

git push password

  1. Type: git branch [branch-name].

  2. Creates a branch.

  3. We must name this [branch name] gh-pages.

    • GitHub will only host files in a branch named gh-pages.
  4. Example command: git branch gh-pages.

  5. Must be named without spaces — replace a space with a dash (-).

  6. If you create a branch with the wrong name, delete it using:.

    • git branch -d [name of branch].
  7. Type: git push gh-pages.

  8. Push your branch, gh-pages, online to GitHub.

  9. Afterwards your website should be up at https://[yourusername].github.io/[reponame].

  10. It might take about 30 seconds to fully get online.

    git push to `gh-pages`

  11. Go online to https://[username].github.io/[reponame].

  12. Your website is now online! Enter the URL using your credentials and it should show up (wait 30 seconds or more if it doesn’t).

    • E.g. https://nguyenbrian.github.io/example2.
  13. Note: The repo name is different from the branch name.

    • The URL has is case sensitive - ensure the repo name is exactly the same one you put into your URL.
  14. Example: https://jevinsidhu.github.io/Personal-Website

  15. Celebrate!

Congrats, now you’re a Git (6) God!

Git (6) God

  1. Open your terminal.

  2. Depending on the workspace configuration you set, it might already be opened!

  3. Hit the ”+” button in the bottom panel area OR on the top-bar click “Window” (8th from the right) and “New Terminal”.

    new terminal in Cloud9

  4. In the terminal, type: git init.

  5. This creates a .git file inside of your project folder.

  6. The .git file stores all the location data for your workspace.

  7. This allows you to use git inside your folder.

`git init`

  1. Type: git remote add [remote-name] [link to repo].

  2. Your changes need to connect your local folder to a remote one on GitHub.

    • You need a connection between the two —> Create a remote.
  3. On GitHub, click the green button that says “New Repository” near the middle-right area.

    • Name your repo (e.g hello-world) and give a short description.

      • No spaces between your name —> replace a space with a dash (-).
      • Short and to the point description.
  4. Click the green button that says “Create repository”.

  5. Copy the .git link it provides — that’s your link to repo.

  6. It will be something similar looking to: https://github.com/nguyenbrian/example.git

    create a repo on GitHub

  7. Example: Remote is a TV Remote Controller.

    • Hand is your local copy.
    • TV is the remote repo on GitHub.
    • The remote is the controller.

    If you want to change the channel, you hit one channel up on the controller (remote) with your hand (local) and it changes the channel one upon your TV (remote repo).

  8. Open your terminal on Cloud 9 and type the command:

    • git remote add [remote-name] [link to repo]
  9. [remote-name] is where you name your remote.

    • Don’t include the square brackets when you type, this is custom text you are inserting.
    • Name it something clear.

      • i.e. github
    • [link to repo] is where you paste the link from earlier.

      • Again, don’t include the square brackets.
    • Example command: git remote add github https://github.com/nguyenbrian/example.git.

    git remote add

  10. Type: git add [filename.extension] OR git add ..

  11. Adds a file to be tracked by git.

    • E.g. git add index.html.
  12. My only file is index.html.

    • In the case you have more than one, the period [.] means add every file in the workspace to the tracked files.

      • E.g. git add ..

    git add

  13. Type: git commit -m "[commit message here]".

  14. Commits changes to be pushed to the branch.

    • -m stands for message and in quotations put a message that descriptions what you did.

      • If it is the first commit, simply put git commit -m "first commit".
  15. Think of committing as packaging something into a package and putting the shipping label on it.

  16. Don’t make bad commit messages: be concise, but clear about what you did.

    git commit

  17. Type: git push.

  18. Part two of saving, “pushing”.

    • Uploading to GitHub.
  19. Think of pushing as actually shipping the container to the recipient, which in this case is the repo.

  20. After hitting enter, you need to sign with your GitHub credentials.

    • You can you find your username either on your profile or at these spots when you login to GitHub.

    GitHub username

    • The characters for the password not show up in the terminal for security reasons — just keep typing!

    enter password git push

  21. Type: git branch [branch-name].

  22. Creates a branch.

  23. We must name this [branch name] gh-pages.

    • GitHub will only host files in a branch named gh-pages.
  24. Example command: git branch gh-pages.

  25. Must be named without spaces — replace a space with a dash (-).

  26. If you create a branch with the wrong name, delete it using:.

    • git branch -d [name of branch]
  27. Type: git push gh-pages.

  28. Push your branch, gh-pages, online to GitHub.

  29. Afterwards your website should be up at [yourusername].github.io/[reponame].

  30. It might take about 30 seconds to fully get online.

    git push to gh-pages

  31. Go online to https://[username].github.io/[reponame].

  32. Your website is now online! Enter the URL using your credentials and it should show up (wait 30 seconds or more if it doesn’t).

  33. Note: The repo name is different from the branch name.

    • The URL has is case sensitive — ensure the repo name is exactly the same one you put into your URL.
  34. Example: https://jevinsidhu.github.io/Personal-Website.

  35. Celebrate!

You successfully pushed your site online!

Drake clapping

More Commands

Clone

git clone [repo-url]

Cloning a workable copy of a repo onto your local workspace is when you download the repo onto a new computer.

git clone

You’ll find the [repo-url] when you click a into a repo on GitHub and look for this:

clone URL

Merge

git merge [branch-to-merge-changes-from]

Merging combines the differences from another branch into the current branch you’re working in. For the time being, stay away from this and do a pull request using GitHub.

Extended GitHub Knowledge

Pull Requests

A pull request means to request changes to be “pulled” from one branch into another. Pull requests are commonly used to merge feature branches into master branches.

create pull request

A good Git workflow:

good git workflow

GitHub Terminology

Fork

Similar to a clone, except instead of merging you would do a pull request to merge your changes to the master repo.

GitHub fork button

Pull Request

Issue

GitHub issues tab

Contributor

Someone that contributes to the default branch through things such as commits, pull requests and submitting issues.

Follow Us on GitHub!

Explore!

There are tons of awesome projects people are creating on GitHub with some with thousands and thousands of contributors! Here are just a few:

How was this workshop?

(your feedback is anonymous + appreciated 💙)

Made something rad?

Share it! 🌟

Spotted an issue?

Edit on GitHub