The Practical Guide to Contributing to Open Source Projects
Tags: github, git, webdev, tutorial
Published: 2022-09-07 06:39:32

## Table Of Contents
- [Introduction](#introduction)
- [Using GitHub](#using-github)
  - [Creating a local git repository](#creating-a-local-git-repository)
  - [Creating a repository on GitHub](#creating-a-repository-on-github)
  - [Pushing code to the GitHub repository](#pushing-code-to-the-github-repository)
- [Contributing to Open Source Projects](#contributing-to-open-source-projects)
  - [Step 1: Finding the repository to contribute to](#step-1-finding-the-repository-to-contribute-to)
  - [Step 2: Forking the repository](#step-2-forking-the-repository)
  - [Step 3: Cloning the fork](#step-3-cloning-the-fork)
  - [Step 4: Navigating to local repository](#step-4-navigating-to-local-repository)
  - [Step 5: Checking the "origin" remote](#step-5-checking-the-origin-remote)
  - [Step 6: Adding the "upstream" remote](#step-6-adding-the-upstream-remote)
  - [Step 7: Pulling the latest changes](#step-7-pulling-the-latest-changes)
  - [Step 8: Creating a new branch](#step-8-creating-a-new-branch)
  - [Step 9: Making changes](#step-9-making-changes)
  - [Step 10: Committing changes](#step-10-committing-changes)
  - [Step 11: Pushing changes to fork](#step-11-pushing-changes-to-fork)
  - [Step 12: Creating a pull request](#step-12-creating-a-pull-request)
  - [Step 13: Discussing the pull request](#step-13-discussing-the-pull-request)
  - [Step 14: Adding more commits to the existing pull request](#step-14-adding-more-commits-to-the-existing-pull-request)
  - [Step 15: Discussing the pull request again](#step-15-discussing-the-pull-request-again)
  - [Step 16: Deleting branch from the fork](#step-16-deleting-branch-from-the-fork)
  - [Step 17: Deleting branch from the local repository](#step-17-deleting-branch-from-the-local-repository)
  - [Step 18: Synchronizing the fork with the project repository](#step-18-synchronizing-the-fork-with-the-project-repository)


## Introduction

**Mike:** Hey VT, you taught me about `git` [over here](https://dev.to/vishwastyagi/practical-guide-to-use-git-for-beginners-4ln4). Since then, I am having a good time working with `git`.

I recently heard about the terms **GitHub** and **Open Source Software**. I am curious to know about them. Can you tell me something about them?

**VT:** Yeah, sure.

> 💡 **GitHub** is basically a cloud-based website where you can host git repositories and collaborate with other people.

> 💡 **Open Source Software** is a type of software that has freely accessible source code and is distributed under a license that allows you to examine, modify, and use the code without restriction.

**Mike:** Could you please explain how I can use GitHub?

**VT:** Ok, let's get into it.

## Using GitHub

**VT:** Let's create a git repository and push it onto GitHub.

**Mike:** Ok, I'm excited.

> 📌 Make sure you have `git` installed before moving forward.

### <u>Creating a local git repository</u>

#### 1. Initialize a new git repository

**VT:** First, we have to create a git repository on our computer.

Open a terminal (or command prompt) in an empty folder or a project folder and run the following command:

```console
$ git init
```

**Output:**
![Oputput of command git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wnxsp0upmiwrsgcnces.png)

#### 2. Create a file

**VT:** We now have a `git` repository set up. Let's create a new file.

Create a new file (or modify an existing one) in the folder where we set up the git repository.

![Screenshot of index.html file with git repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3g3ru24wikterwct6ao.png)

Let's call our file `index.html` and add the following code to it:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GitHub Guide</title>
  </head>
  <body>
    <h1>Hello GitHub!</h1>
  </body>
</html>
```

Save the file.

**VT:** Now, we can run this command to see our changes tracked by `git`.

```console
$ git status
```

**Output:**
![Output of the command git status](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17jaj3osvc7uz8tllfhe.png)

#### 3. Commit changes

**VT:** Let's commit our change.

Run the following commands:

```console
$ git add index.html
$ git commit -m "added index.html"
```

**Output:**
![Output of command git commit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83ze0smb5oyelob8xe14.png)

**Mike:** Ok, I have successfully committed my changes. What's next?

**VT:** Next, the exciting part, we will create a repository on GitHub.

### <u>Creating a repository on GitHub</u>

#### 1. Log in to GitHub

**VT:** First step, log in to GitHub.

> 📌 If you are new to GitHub, create a new account on GitHub.

![GitHub sign-in page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wym8ylag56k2lwbtqfyl.png)

> 📌 For security purposes, GitHub provides a **PAT** (Personal Access Token) to use in place of a password while pushing code to GitHub. Please generate your PAT as soon as you log in to GitHub for the first time. You can generate your PAT by following [this guide](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).

#### 2. Create a repository on GitHub

**VT:** Click the `+` icon in the upper right corner of the GitHub homepage.

![Plus icon on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtvkjsmssla8jvp4c4mg.png)

Select `New repository`.

![New repository button GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bcwwr52tf4f0dpzs4s2s.png)

A page will open to create a new repository.

Enter the name and description (optional) for the new repository.

![New repository name and description input fields](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u2hb3jvd39mjj1x55bf.png)

Choose whether to make the repository `Public` or `Private`.

![Repository options Public or Private](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rkjdpp2wgchaz0lfadr.png)

Click the `Create repository` button at the bottom of the page.

![Create repository button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or0fuia8lk4mzy561349.png)

**VT:** We now have a GitHub repository set up. Let's see how we can push our code to the GitHub repository.

### <u>Pushing code to the GitHub repository</u>

#### 1. Add remote to the local git repository

**Mike:** What do you mean by adding remote?

**VT:** Connecting our local git repository to a remote (online) repository, such as a GitHub repository, is what adding remote means.

It enables us to pull updates and push our changes to the remote repository.

We can add remote to our local git repository by running the following command:

```console
$ git remote add origin URL_OF_GITHUB_REPOSITORY
```

> 📌 Make sure to replace `URL_OF_GITHUB_REPOSITORY` with the URL of your own GitHub repository with `.git` added at the end.

![Output of git remote command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yactfi73b00svcde67y.png)

#### 2. Rename the branch from `master` to `main`

**VT:** Before we can push our git repository to GitHub, we must rename the branch `master` to `main`.

**Mike:** Why do we have to rename the git branch?

**VT:** It's because GitHub uses `main` as its default branch, whereas git uses `master`.

Run the following command to rename the current branch to `main`:

```console
$ git branch -M main
```

#### 3. Push code to GitHub

**VT:** Now, it's time to push our code to GitHub.

Run the following command:

```console
$ git push -u origin main
```

When prompted, enter your GitHub username and password.

> 📌 Use your PAT (Personal Access Token) in place of the password.

![Output of git push command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apny4wd3ihn0kdp08ww5.png)

**Congratulations!** We now have a complete GitHub repository.🎉🎉

<img src="https://media.giphy.com/media/3oz8xAFtqoOUUrsh7W/giphy.gif" height="250">

<hr>

## Contributing to Open Source Projects

### <u>Step 1: Finding the repository to contribute to</u>

**VT:** To contribute to an open-source project, we must first navigate to the project's GitHub repository.

But, for practice, I've set up a GitHub repository called `github-playground`. You can find it [here](https://github.com/vishwast03/github-playground).

> 📌 I recommend that you follow this guide and contribute to the GitHub repository (`github-playground`).

**VT:** Go to https://github.com/vishwast03/github-playground

### <u>Step 2: Forking the repository</u>

**Mike:** What do you mean by 'forking'?

**VT:** Here, 'forking' means copying the original repository to our own account.

To **Fork** the repository, click on the `Fork` button in the upper-right corner of the repository.

![Fork button on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcc54p1vyquodwhbkg4w.png)

On next page, click `Create fork` button at the bottom.

![Create fork button on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4iila13kx1zrkkgg2wx.png)

### <u>Step 3: Cloning the fork</u>

**VT:** Now, we have to `clone` the forked repository to our local machine using `git`.

**Cloning** means copying a remote repository to our local machine. It is done to be able to work on the project.

To **clone**:

- First click the `Code` button on the forked project on your GitHub.

![Code button on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79ns7r56sz283ud97ort.png)

- Copy the URL from the tab opened.

![Repo URL tab on GitHub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yix5m3jm07qwsp2t3q7w.png)

- Run the following command to clone the forked repository.

```console
$ git clone URL_OF_FORK
```

> 📌 Make sure to replace `URL_OF_FORK` of with the URL you have copied in the previous step.

**Output:**
![Output of git clone command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogvlerfq4s730rbsy6hw.png)

### <u>Step 4: Navigating to local repository</u>

**VT:** Use the following command to navigate to the local repository:

```console
$ cd NAME_OF_REPOSITORY
```

### <u>Step 5: Checking the "origin" remote</u>

**VT:** Now, we will check if our fork is added as remote `origin` or not.

Use the following command to list all the remotes:

```console
$ git remote -v
```

The output of above command should look like this:
![output of git remote command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b39tr6d5532bxgci2cly.png)

> 📌 If your fork was not added correctly as `origin`, you can use the following command to add it manually:

```console
$ git remote add origin URL_OF_FORK
```

> 📌 Make sure to replace `URL_OF_FORK` with the URL of your fork on GitHub.

### <u>Step 6: Adding the "upstream" remote</u>

**VT:** Before we start working on the project, we have to add the original project repository as remote `upstream` in our local repository.

It enables us to pull updates from the main project.

Use the following command to add remote `upstream` to our local repository:

```console
$ git remote add upstream URL_OF_PROJECT
```

> 📌 Make sure to replace `URL_OF_PROJECT` with the URL of the original project (not fork).

You can check if the remote was added or not by running the following command:

```console
$ git remote -v
```

The output should look like this:
![Output of git remote after adding upstream](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vr6001qak0jx505pbdsf.png)

### <u>Step 7: Pulling the latest changes</u>

**VT:** It is the best practise to always download the most recent changes from `upstream` before beginning work on a project.

Run the following command to pull the latest changes from `upstream` into our local repository:

```console
$ git pull upstream main
```

**Output:**
![Output of git pull command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w40ivj48wl4zplpsmbyd.png)

### <u>Step 8: Creating a new branch</u>

**VT:** Let's create a new branch to begin our work.

> 💡 Always create a new branch before working on the project.

Run the following command:

```console
$ git checkout -b BRANCH_NAME
```

> 📌 Make sure to replace `BRANCH_NAME` with the name you want to give to your branch (e.g. `feature`).

You can list all your branches by running the following command:

```console
$ git branch
```

**Output:**
![Output of git branch command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2crhcb707lk1u4yy0c5.png)

### <u>Step 9: Making changes</u>

**VT:** It's time to make some change to our project.

If you are working on `github-playground` project then, open `Players.md` file in your favourite text editor.

Add the following line to `Players.md` file:

```md
- [YOUR_NAME](YOUR_PROFILE_URL)
```

![Name and profile added to Players.md](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ts1zxdeau5muxqudflt.png)

> 📌 Make sure to replace `YOUR_NAME` with your real name and `YOUR_PROFILE_URL` with your profile URL (you can share any profile that you want, e.g. GitHub, Twitter, dev.to, etc.).

> 📌 If you don't want to share your profile, write your name like this:

```md
- YOUR_NAME
```

![Only name added to Players.md](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xdklncqxim0fkxuw1t4.png)

Save the file.

### <u>Step 10: Committing changes</u>

**VT:** Let's now make a commit to the repository.

Run the following command to add the change to staging area and make a commit to the repository:

```console
$ git add .
$ git commit -m "DESCRIPTION_OF_CHANGES"
```

> 📌 Make sure to replace `DESCRIPTION_OF_CHANGES` with the actual description.

**Output:**
![Output after running git commit command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e571fcv30ujsi7wlul0q.png)

### <u>Step 11: Pushing changes to fork</u>

**VT:** We will now push our changes to our forked repository.

**Mike:** Why do we have to push the changes to the forked repository? Can't we just push to the original repository?

**VT:** We can't push the changes directly to the original repository. We don't have access to that repository.

We must first push the changes to the forked repository, then we will make a pull request from there.

Run the following command to push the changes to the forked repository:

```console
$ git push origin BRANCH_NAME
```

> 📌 Make sure to replace `BRANCH_NAME` with the name of the branch you are working with.

When prompted, enter your GitHub username and password.

> 📌 Use your PAT (Personal Access Token) in place of the password.

**Output:**
![Output of git push command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1vf7pm4eiwkq3z3zg0q2.png)

### <u>Step 12: Creating a pull request</u>

**VT:** Now it's time to make a pull request.

Navigate to the forked repository on GitHub.

A prompt to make a pull requset must have appeared.

Click the button labelled `Compare & pull request`.

![Compare & pull request button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3s2mtqy8u3dcq1d27a9.png)

On the next page, add the `Title` and `Description` to your pull request.

![Pull request title and description input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gscbzioywe4mds90g12v.png)

Now, click `Create pull request` button at the bottom.

![Create pull request button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzzsvn7ar5gnnqd3wjeg.png)

We have successfully created a pull request. Cheers!

![Pull requset created successfully](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0btrwth1sxylehxyrwh.png)

**Mike:** Oh! Great! What do we have to do next?

**VT:** Now we must discuss the pull request with the maintainer of the repository and, if necessary, make additional changes.

### <u>Step 13: Discussing the pull request</u>

**VT:** Now that we've made a pull request, the repository's owner/maintainer will be notified about it.

The maintainers may initiate a discussion about the pull request and, if necessary, suggest changes.

If they are satisfied with the changes we have made, they will either merge the changes back into the original repository or suggest some changes.

If they have suggested any changes, we must implement them and make another commit to the existing pull request.

### <u>Step 14: Adding more commits to the existing pull request</u>

**VT:** If we need to make changes after submitting a pull request, we must go to our local git repository and make the changes there.

To do so, we must switch to the branch on which we were previously working.

Run the following commands to check and switch the branch:

```console
$ git branch
$ git checkout BRANCH_NAME
```

> 📌 Make sure to replace `BRANCH_NAME` with the name of the branch you were working with.

**Output:**
![Output while switching branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp7uqodantgy9vqyla65.png)

Now that we've switched to the branch with which we'll be working, we simply need to repeat steps 9 through step 11.

### <u>Step 15: Discussing the pull request again</u>

**VT:** We must now re-discuss the pull request with the repository's maintainers.

If the maintainers approve and merge your changes, you will have made your first contribution to open source. It's time to celebrate.🎉🎉

<img src="https://media.giphy.com/media/kyLYXonQYYfwYDIeZl/giphy.gif" height="250">

**Mike:** Yay!!

### <u>Step 16: Deleting branch from the fork</u>

**VT:** We now need to do some cleanup.

We have to delete the branch from our fork on GitHub.

To do so, we must first navigate to our forked repository page and open the dropdown labeled with the branch name `main`.

![Branch dropdown menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bi6ub8fz0o4ab6h1t44.png)

Click `View all branches` at the bottom of the dropdown menu.

![View all branches link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exfr3tgqjmplmsyb8cs2.png)

Click the delete button corresponding to the branch with which we were working.

![Delete branch button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2oh1yrw84pe5xu5q7qm.png)

Click `Delete` from the popup which will appear.

### <u>Step 17: Deleting branch from the local repository</u>

**VT:** Now, we will delete the branch from our local repository.

First switch to the `main` branch by running the following command:

```console
$ git checkout main
```

Now, run the following command to delete the branch from local git repository:

```console
$ git branch -D BRANCH_NAME
```

> 📌 Make sure to replace `BRANCH_NAME` with the name of the branch you were working with.

**Output:**
![Output of delete branch command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv83hya86zx843bunomz.png)

### <u>Step 18: Synchronizing the fork with the project repository</u>

**VT:** Finally, if we intend to contribute to this project in the future, we must synchronise our fork with the project repository.

Just run the following command to do so:

```console
$ git pull upstream main
$ git push origin main
```

Enter the username and password when prompted.

> 📌 Use your PAT (Personal Access Token) in place of the password.

These commands will pull the most recent changes from the project repository and push them to our fork.

**Congratulations on your first contribution to open source!🎉🎉**

I hope you found something helpful in this post. You can also follow me on LinkedIn and Twitter.

Cheers and see you in the next one! ✌️