You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/1-getting-started-lessons/2-github-basics
Darío Hereñú 4e14080d7e
Updated url of Labs of Github site (line 324)
1 year ago
..
images moving sketchnotes to their own folder 4 years ago
translations Updated url of Labs of Github site (line 324) 1 year ago
README.md Replaced dead links and modified text accordingly 2 years ago

README.md

Introduction to GitHub

This lesson covers the basics of GitHub, a platform to host and manage changes to your code.

Intro to GitHub

Sketchnote by Tomomi Imura

Pre-Lecture Quiz

Pre-lecture quiz

Introduction

In this lesson, we'll cover:

  • tracking the work you do on your machine
  • working on projects with others
  • how to contribute to open source software

Prerequisites

Before you begin, you'll need to check if Git is installed. In the terminal type: git --version

If Git is not installed, download Git. Then, setup your local Git profile in the terminal:

  • git config --global user.name "your-name"
  • git config --global user.email "your-email"

To check if Git is already configured you can type: git config --list

You'll also need a GitHub account, a code editor (like Visual Studio Code), and you'll need to open your terminal (or: command prompt).

Navigate to github.com and create an account if you haven't already, or log in and fill out your profile.

GitHub isn't the only code repository in the world; there are others, but GitHub is the best known

Preparation

You'll need both a folder with a code project on your local machine (laptop or PC), and a public repository on GitHub, which will serve as an example for how to contribute to the projects of others.


Code management

Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages".

Task: Make a repository and commit code

Check out video

Git and GitHub basics video

  1. Create repository on GitHub. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the new repo button.

    1. Give your repository (folder) a name
    2. Select create repository.
  2. Navigate to your working folder. In your terminal, switch to the folder (also known as the directory) you want to start tracking. Type:

    cd [name of your folder]
    
  3. Initialize a git repository. In your project type:

    git init
    
  4. Check status. To check the status of your repository type:

    git status
    

    the output can look something like this:

    Changes not staged for commit:
    (use "git add <file>..." to update what will be committed)
    (use "git checkout -- <file>..." to discard changes in working directory)
    
         modified:   file.txt
         modified:   file2.txt
    

    Typically a git status command tells you things like what files are ready to be saved to the repo or has changes on it that you might want to persist.

  5. Add all files for tracking This also called as staging files/ adding files to the staging area.

    git add .
    

    The git add plus . argument indicates that all your files & changes for tracking.

  6. Add selected files for tracking

    git add [file or folder name]
    

    This helps us to add only selected files to the staging area when we don't want to commit all files at once.

  7. Unstage all files

    git reset
    

    This command helps us to unstage all files at once.

  8. Unstage a particular file

    git reset [file or folder name]
    

    This command helps us to unstage only a particular file at once that we don't want to include for the next commit.

  9. Persisting your work. At this point you've added the files to a so called staging area. A place where Git is tracking your files. To make the change permanent you need to commit the files. To do so you create a commit with the git commit command. A commit represents a saving point in the history of your repo. Type the following to create a commit:

    git commit -m "first commit"
    

    This commits all of your files, adding the message "first commit". For future commit messages you will want to be more descriptive in your description to convey what type of change you've made.

  10. Connect your local Git repo with GitHub. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command git remote add will do just that. Type the following command:

    Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace https://github.com/username/repository_name.git with your GitHub URL.

    git remote add origin https://github.com/username/repository_name.git
    

    This creates a remote, or connection, named "origin" pointing at the GitHub repository you created earlier.

  11. Send local files to GitHub. So far you've created a connection between the local repo and the GitHub repo. Let's send these files to GitHub with the following command git push, like so:

    Note, your branch name may be different by default from main.

    git push -u origin main
    

    This sends your commits in your "main" branch to GitHub.

  12. To add more changes. If you want to continue making changes and pushing them to GitHub youll just need to use the following three commands:

    git add .
    git commit -m "type your commit message here"
    git push
    

    Tip, You might also want to adopt a .gitignore file to prevent files you don't want to track from showing up on GitHub - like that notes file you store in the same folder but has no place on a public repository. You can find templates for .gitignore files at .gitignore templates.

Commit messages

A great Git commit subject line completes the following sentence: If applied, this commit will

For the subject use the imperative, present tense: "change" not "changed" nor "changes". As in the subject, in the body (optional) also use the imperative, present tense. The body should include the motivation for the change and contrast this with previous behavior. You're explaining the why, not the how.

Take a few minutes to surf around GitHub. Can you find a really great commit message? Can you find a really minimal one? What information do you think is the most important and useful to convey in a commit message?

Task: Collaborate

The main reason for putting things on GitHub was to make it possible to collaborate with other developers.

Working on projects with others

Check out video

Git and GitHub basics video

In your repository, navigate to Insights > Community to see how your project compares to recommended community standards.

Here are some things that can improve your GitHub repo:

  • Description. Did you add a description for your project?
  • README. Did you add a README? GitHub provides guidance for writing a README.
  • Contributing guideline. Does your project have contributing guidelines,
  • Code of Conduct. a Code of Conduct,
  • License. Perhaps most importantly, a license?

All these resources will benefit onboarding new team members. And those are typically the kind of things new contributors look at before even looking at your code, to find out if your project is the right place for them to be spending their time.

README files, although they take time to prepare, are often neglected by busy maintainers. Can you find an example of a particularly descriptive one? Note: there are some tools to help create good READMEs that you might like to try.

Task: Merge some code

Contributing docs help people contribute to the project. It explains what types of contributions you're looking for and how the process works. Contributors will need to go through a series of steps to be able to contribute to your repo on GitHub:

  1. Forking your repo You will probably want people to fork your project. Forking means creating a replica of your repository on their GitHub profile.
  2. Clone. From there they will clone the project to their local machine.
  3. Create a branch. You will want to ask them to create a branch for their work.
  4. Focus their change on one area. Ask contributors to concentrate their contributions on one thing at a time - that way the chances that you can merge in their work is higher. Imagine they write a bug fix, add a new feature, and update several tests - what if you want to, or can only implement 2 out of 3, or 1 out of 3 changes?

Imagine a situation where branches are particularly critical to writing and shipping good code. What use cases can you think of?

Note, be the change you want to see in the world, and create branches for your own work as well. Any commits you make will be made on the branch youre currently “checked out” to. Use git status to see which branch that is.

Let's go through a contributor workflow. Assume the contributor has already forked and cloned the repo so they have a Git repo ready to be worked on, on their local machine:

  1. Create a branch. Use the command git branch to create a branch that will contain the changes they mean to contribute:

    git branch [branch-name]
    
  2. Switch to working branch. Switch to the specified branch and update the working directory with git switch:

    git switch [branch-name]
    
  3. Do work. At this point you want to add your changes. Don't forget to tell Git about it with the following commands:

    git add .
    git commit -m "my changes"
    

    Ensure you give your commit a good name, for your sake as well as the maintainer of the repo you are helping on.

  4. Combine your work with the main branch. At some point you are done working and you want to combine your work with that of the main branch. The main branch might have changed meanwhile so make sure you first update it to the latest with the following commands:

    git switch main
    git pull
    

    At this point you want to make sure that any conflicts, situations where Git can't easily combine the changes happens in your working branch. Therefore run the following commands:

    git switch [branch_name]
    git merge main
    

    This will bring in all changes from main into your branch and hopefully you can just continue. If not, VS Code will tell you where Git is confused and you just alter the affected files to say which content is the most accurate.

  5. Send your work to GitHub. Sending your work to GitHub means two things. Pushing your branch to your repo and then open up a PR, Pull Request.

    git push --set-upstream origin [branch-name]
    

    The above command creates the branch on your forked repo.

  6. Open a PR. Next, you want to open up a PR. You do that by navigating to the forked repo on GitHub. You will see an indication on GitHub where it asks whether you want to create a new PR, you click that and you are taken to an interface where you can change commit message title, give it a more suitable description. Now the maintainer of the repo you forked will see this PR and fingers crossed they will appreciate and merge your PR. You are now a contributor, yay :)

  7. Clean up. It's considered good practice to clean up after you successfully merge a PR. You want to clean up both your local branch and the branch you pushed to GitHub. First let's delete it locally with the following command:

    git branch -d [branch-name]
    

    Ensure you go the GitHub page for the forked repo next and remove the remote branch you just pushed to it.

Pull request seems like a silly term because really you want to push your changes to the project. But the maintainer (project owner) or core team needs to consider your changes before merging it with the project's "main" branch, so you're really requesting a change decision from a maintainer.

A pull request is the place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more. A good pull request follows roughly the same rules as a commit message. You can add a reference to an issue in the issue tracker, when your work for instance fixes an issue. This is done using a # followed by the number of your issue. For example #97.

🤞Fingers crossed that all checks pass and the project owner(s) merge your changes into the project🤞

Update your current local working branch with all new commits from the corresponding remote branch on GitHub:

git pull

How to contribute to open source

First, let's find a repository (or repo) on GitHub of interest to you and to which you'd like to contribute a change. You will want to copy its contents to your machine.

A good way to find 'beginner-friendly' repos is to search by the tag 'good-first-issue'.

Copy a repo locally

There are several ways of copying code. One way is to "clone" the contents of the repository, using HTTPS, SSH, or using the GitHub CLI (Command Line Interface).

Open your terminal and clone the repository like so: git clone https://github.com/ProjectURL

To work on the project, switch to the right folder: cd ProjectURL

You can also open the entire project using Codespaces, GitHub's embedded code editor / cloud development environment, or GitHub Desktop.

Lastly, you can download the code in a zipped folder.

A few more interesting things about GitHub

You can star, watch and/or "fork" any public repository on GitHub. You can find your starred repositories in the top-right drop-down menu. It's like bookmarking, but for code.

Projects have an issue tracker, mostly on GitHub in the "Issues" tab unless indicated otherwise, where people discuss issues related to the project. And the Pull Requests tab is where people discuss and review changes that are in progress.

Projects might also have discussion in forums, mailing lists, or chat channels like Slack, Discord or IRC.

Take a look around your new GitHub repo and try a few things, like editing settings, adding information to your repo, and creating a project (like a Kanban board). There's a lot you can do!


🚀 Challenge

Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes.

Post-Lecture Quiz

Post-lecture quiz

Review & Self Study

Read more about contributing to open source software.

Git cheatsheet.

Practice, practice, practice. GitHub has great learning paths available via skills.github.com:

You'll also find more advanced courses.

Assignment

Complete the First Week on GitHub course