Git Collaboration Workflow

Sept 17, 2020 by Niall Kader

This article demonstrates the workflow that we'll use to collaborate on this blog site project.

Cloning the Repository

I will need your BitBucket user names so that I can grant you WRITE access to the repository. Once I've set you up, you'll be able to clone the repository. Make sure that you are in the doc root directory when you clone it. Run this command to clone the repository: 

git clone https://niall_kader@bitbucket.org/wtc-student-site/student-blog-site.git

Create Your Own Branch

To avoid conflicts, each student will create his/her own branch. When you use your own branch, you don't have to worry about other students making commits that could conflict with your own commits. You'll create a branch using your first name and last initial. So, for example, here's the command that I would run to create my own branch: 

git branch niallk

You are currently working in the master branch, so you'll have to switch to your new branch by using the git checkout command. For example, here is how I would switch the branch I just created: 

git checkout niallk

Now each student working on the project will have their very own branch, and we don't have to worry about stepping on each others toes (making changes that conflict with one another). All of the commits that you make now will affect your branch only.

Putting Your Blog Post Into the Project

Create a new .html file in the appropriate folder of the site. Since everyone's first blog post is about JavaScript, you'll create a new file in the the JavaScript folder. Note that the name of the file should describe what the article is about. So, if you write an article about JavaScript functions, you should name your file something like javascript-functions.html. File names for our web pages should be all lowercase letters and use dashes to separate words.

I have created a template for all the pages that we add to this site, it's in the templates folder. Copy the contents of the template into the file you just created. Then replace the 'dummy' content with the appropriate information, make sure to update the following:

  • The TITLE element
  • The META/Author and META/Description elements
  • The blog post heading, which is an H2 element inside the MAIN element
  • The date, and your name (as the author) within the MAIN element
  • The brief description of the article, which is just under the date

Now go ahead and put your blog post into the page. All of your content should be placed inside the DIV element that has a class attribute set to blog-post. If you include any images in your page, the image files should be put into the images folder.

Committing Your Blog Page

Make sure that you commit your changes every time you work on the project. 

git add .
git commit -m "Put a message here"
git push yourbranchname

Merging Into Master

Once your blog article is finished and polished, we'll want to merge it into the master branch. But it will have to go through a review process before it gets merged. To start this process, you will make a pull request. Here are the steps that you must follow to create a pull request:

  1. Go to the repository page on BitBucket (you should see your repositories when you log in)
  2. Click on Pull Requests on the left
  3. Click on Create Pull Request (in the upper right corner)
  4. You want to request that your branch gets merged into the master branch. So the drop down on the left should be set to your branch, while the one on the right will be set to master.
  5. Make sure to assign a reviewer (I will tell you who to assign it to).

The reviewer will take a good look at all of the changes you made and either approve and merge, or decline the request. The review process will help to make sure that the master branch is free of errors.

Synching Your Branch With The Master Branch

You'll want to update your branch with the master branch periodically, so that you can get all the changes that other students have made. To do that, run this command: 

git pull origin master