Even though I’m probably creating a guide that has been done (100) times before, I have no intentions of reinventing the wheel. I just want to share the most basic/raw workflow that I have managed to figure out over the past few weeks. I am by no means an expert, nor would I consider this guide a comprehensive Git workflow… With that said, I wish I would have been able to find something similar a few weeks ago.

Some URL’s:

Git’s website (if you use GitKraken there is no need to download this software directly):https://git-scm.com/

I’m going to assume you have already set up accounts, downloaded, installed and logged into all software.

File Explorer:

Create a folder called “dev” in “Documents”.

Create a folder “GitKraken” inside of “dev”.

GitKraken:

Click “Preferences” under the “File” menu.

In “Authentication” click the “Generate” button.

I leave it titled “gitkraken_rsa” and place it in the “GitKraken” directory created above.

GitKraken will generate rsa keys and show you “Success!”.

Click the “Copy file contents to clipboard” button.

GitLab:

Click your user avatar, then click “Settings”.

Click “SSH Keys”.

Paste your RSA key into the “Key” field and give the key a name. I reference the computer and what it’s being used for. Then click “Add key”.

Go back to “Projects”.

Create a new Project.

Name your project, give it a description, and select a visibility level.

From the Project’s main page, click the “Copy URL to clipboard” button.

Back to GitKraken:

Exit Preferences.

Click the Folder at the top left of the window.

Click “Clone”.

Click “Browse” and navigate to the “dev” directory you created earlier, paste your URL into the URL field, and click “Clone the repo!”.

GitKraken should do its thing, then offer the option to open the new repo at the top. Click “Open Now” at the top.

This is a new repo so it will need to be initialized. Click “Initialize”.

Atom:

There are many software options for development (Atom, jEdit, Notepad++, and many others). So far, I prefer Atom, although for a text editor it is extremely resource intensive. A nice thing about Atom is that it integrates with Git to show changes since last commit. If you choose to use Atom, and this is your first time using Atom…

Click “File”, click “Add Project Folder…” and navigate to your project folder, in this case “website” that GitKraken created in the “dev” folder.

I’ll create a basic HTML file for the guide and click save.

index.html will show up as green because it is new since that last commit.

Back to GitKraken:

GitKraken senses that there is work in progress because files have changed.

Click WIP.

GitKraken shows the Unstaged Files, in this case there is a new file named “index.html”.

Click “Stage all changes”.

Title the Commit, provide a basic description, and click “Commit”.

There are now (2) Commit’s saved locally that haven’t been pushed to GitLab. Select the most recent Commit and click “Push”.

Click Submit.

Now you can see that both the source of the repo and the local “dev” directory are both on the master branch and are on the same Commit.

Back to GitLab:

From the GitLab project page we can see that there was a commit titled “Home Page” by “User”. Click the “Issues” link.

On the Issues page, click the “Labels” link.

Click the “Generate a default set of labels” link.

I’m going to create a handful of labels myself as well.Click the “Issues” link again.

Click the “New issue” link.

Title the issue, give it a description, add a label or two, and click “Submit issue”.

You and other users can add additional comments as you think up relevant ideas or solutions. Click the “New branch” button.

Back to GitKraken:

GitKraken has already spotted the new branch on the server, but if it hadn’t we could click the caret next to “Pull” and click “Fetch All”. Double click the branch on the remote server to check it out.

Back to Atom:

We’re now editing the new branch. I’m going to add a directory right in Atom, but of course you can add them using File Explorer in Windows or mkdir in everything else. Create a file “styles.css” in the directory “css” and save it. Atom will display the new directory and file as green because they are new since the last commit.

Back to GitLab:

While creating the CSS file we or someone else realizes that JavaScript will need to be implemented as well. Create a new issue in GitLab for JavaScript.

Click “New branch” for this issue.

Back to GitKraken:

Again, GitKraken has updated to show the new branch on the server, but that’s moot. We’re working on the CSS branch. GitKraken shows there is work in progress to the current branch. Click WIP, stage all changes, name and comment the commit, then click “Commit”. I’m in the habit of pushing commits to the server as soon as I make them.

This probably doesn’t seem like a logical work flow, but some people need to jump all over while being creative. I’m also attempting to sort of simulate multiple people working on the same project. The most important thing is that you get your ideas or bugs documented ASAP so they don’t get forgotten. That’s what GitLab is for. Anyway, now we have the urge to bust out some JavaScript. Double click the JavaScript branch under Remote to check it out.

Now when we look at the “website” directory in File Explorer we’ll see there is no css folder or styles.css file. Those files were not present when JavaScript branched off the Master. This will be addressed later during a merge. For now, create the js directory and scripts.js file. Atom will show the new directory and file as green again as they are new since the last commit.

Back to GitKraken:

Now is when the benefit of GitKraken and its GUI start to show some value. We can see the branches starting to form in a visual way. Click WIP, stage all files, Name the and describe the commit, then click submit.

Now let’s go back to the CSS branch. Double click the CSS branch under the local section.

Now that we’re working with the CSS branch, click the (3) dots next to master (only visible when you mouse over them), and select “Merge CSS into master”.

There were no conflicts so this automatically creates a commit.

To update the master on the server, double click “master” under Local to tell GitKraken to work with the master branch, and click push.

While reviewing the master, we notice that we did not reference the new CSS file in our html file. Double click the CSS branch under Local.

Back to Atom:

Open the “index.html” file and make a change. If using Atom, we see a green mark next to our new row to reference we added a row, and “index.html” is colored orange to indicate there has been a change to that file.

Back to GitKraken:

Stage all changes (the files are color coded to indicate a change to the file), name the commit, add a description, and click “Commit”.

Double click the JavaScript branch under local to continue to work with JavaScript.

Back to Atom:

Open “index.html” and finish adding JavaScript to the page, make sure to save your changes. If using Atom, you’ll see the orange indicators to show that a change has been made.

Back to GitKraken:

Select WIP and commit your changes to the JavaScript branch.

Now let’s merge JavaScript branch into the master branch.

First click the (3) dots next to master, and select “Merge master into JavaScript branch”. Again there are no conflicts so a new commit is automatically generated. If we look around the project directory we see that there is now both a “js” and a “css” folder, and inside them there is a scripts.js file and a styles.css file respectively.

Now we can click the (3) dots again and select “Merge JavaScript branch into master”.

Our last act in this guide will be to merge the final version of the CSS branch into the master branch. Double click the CSS branch under Local. While making the guide I missed a screen shot and reverted to a previous state. When doing so I lost the CSS referenced commit, so my screen shots will look slightly different than what your final version looks like.

Double click the CSS branch under Local to activate that branch. Click the (3) dots next to master, and select “Merge master into CSS branch”.

We’re dealing with the CSS branch now so the “scripts.js” file is new, and the “index.html” file has changed.

Click “index.html” to see what has been changed. You may have expected to see the CSS reference being shown here as well, but remember this hasn’t changed since the “CSS Referenced” commit. The only lines actually changing are the lines referenced. Hit the “X” to close this view.

Click the (3) dots next to master again and select Merge CSS branch into master.

Double click master to activate that branch, click the final commit created by the merge, and push that to GitLab.

You now have a fully functional webpage that was theoretically worked on by one person doing CSS and another doing JavaScript. Not only can you go back in time to any of those commits to see what the project looked like at that time, but you also have a graphical representation of the workflow in GitKraken.