Follow me on Instagram and Twitter

Instagram Twitter

Hi

In this article we are going to learning how to add your project to github, how to create “branches”, how to work on those branches, and how to merge the branches to the “master file”.

Note: You must have git installed on your machine.

The workflow will look something like this

Push project to Github.

Clone the Repo.

Make changes, and commit them.

Create a new branch.

Switch between branches

Pull Request + Merge

Creating a Project

The first thing we’re going to do is create a project. Just a basic web page that we can work with for this tutorial.

Commands for setting up project.

This is how we set up our project (using the command line).

Changed our working directory to where we want the project saved. Made a sub-directory for our files. Created our index page, and style sheet for the project.

Once you’re all set up, navigate to where the files are, and edit them to anything. Here is a screenshot of the site i’m working with. (The code for this tutorial will be on Github if you wan’t to copy it).

Screenshot of website.

Pushing the project to Github

Our next objective is to create the repo and push the project to Github.

Start by heading to GitHub and creating a new repository by clicking clicking the ‘+’ icon at the top right of the page, and select “New Repository”. From here give the repository a name, and ensure “Initialise this repository with a README” is left unchecked.

You will now be given the commands to push your project to Github.

These are the same commands you will be presented with after creating the repo.

Initialise the repository. Check the status of the files. Add all (You can add individual files by using ‘git add filename’ Commit and enter a description.

You can then push using “git add -u origin master”. You may be required to login to github.

Well Done. You have pushed your project to Github.

Clone the Repository

One of the benefits of Github is that you don’t need your personal laptop to work on a project. You can use any machine you want. Picture this scenario. You are at work, and you made some changes to a project the night before, but these changes are on your personal machine. If your project is not on github, you eitheir have to reimplement the changes, or wait until you get home.

Here is where Github comes in handy. If you added the changes to your repo, you can simple clone the project, and continue working on it.

This is how we do that.

In your repo click the “Clone or Download” button, and copy the link provided.

Github Repo Link

Go back to your terminal, navigate to where you want the cloned project to be stored and enter the command “git clone <link>”

Gitclone

Here we navigated from our Desktop, and moved to the Downloads folder. We then simple ran the git clone command, to clone the project. The project is now in our downloads folder.

Open the files and work away as you wish. To add the changes to GitHub you simple add them like we did in the previous section.

Navigate to our clone directory in the Downloads folder. Check the project status, to see what changes were not committed. Add the file(s) with updates. Commit files, and add message with details of changes. Push the changes.

We changed the background from “Tomato” to “Light Slate Grey”.

Update Project

Creating a new Branch

So, say for example you went to test something on an existing project. But you are not 100% sure if it should be a feature on the main application. It’s a pain to copy and paste your workspace and have multiple copies, lying around on your machine. This is where branhes come in. You can clone your repo, create a branch, and work away. If you’re happy with the end result you can merge it into to master branch, if not, you can delete the branch.

Clone the repo to your desired directory. Navigate into that repository. Create your branch. Make changes to project. Commit & Add changes. Create pull request. Merge branch with master.

Commands to do the above

git clone <repoUrl>

cd <directoryName>

git checkout -b <nameofbranch> eg git checkout -b NewLandingPageBranch

We can check all current branches using “git branch”

Start making changes. I changed the background the midnight blue.

Use git status to checkout the status.

git commit -m “changeBackgroundColorAgain”

git push — set-upstream origin <branchName> eg git push — set-upstream origin NewLandingPageBranch.

If this is successful, go to your Github repo, and you should see the following.

Click the “Compare and Pull Request button”

Option to create pull request.

Here you can create a “pull” request, and leave a description. Click the “Create Pull Request” button.

Create Pull Request

Once successful, click merge. This is merge your branch, into your master.

Merge branch into master.

If everything works as it should. You should see the following in your repo.

Notice that we now have 2 branches, as opposed to one.

Final Result

Follow me on Instagram and Twitter

Instagram Twitter