Git for Web Development: Get to Know the Typical Workflow of a Project

Web development is intrinsically related to collaboration. Most of the time you’ll be working with other developers, and even if you don’t, Git can help you in many other ways.

Git is the software that controls the version of the applications we make. It’s used by solo developers, big companies, and even Linux, the biggest open source project in the world.

As a web developer, it’s extremely important to know how to use Git for web development properly. We’re not just talking about “git add”, “git commit”, and “git push”. You should know the whole workflow of creating a web project with Git.

Not convinced yet? Let’s start!

Why Use Git?

These are just some of the reasons to start using Git:

• Organization: Instead of managing your project in folders like v1, v2, v3, etc, you have one project with a special database that stores all the versions of the files
• Collaboration: Git lets you and other people work on the same project at the same time without creating conflicts.
• Open-source: Git is open-source, but it’s also the tool we use to collaborate and create great open-source software. Anyone can make pull requests to open-source projects on platforms like GitHub or Bitbucket.
• Platform flexibility: Nowadays, you have many different Git hosting services to choose from, such as Gitlab, GitHub, Bitbucket, and SourceForge. You can even use a self-hosted solution for all your projects.
• Easy backups: Undo mistakes with ease, and never lose your project codebase.

body a.novashare-ctt{display:block;background:#00abf0;margin:30px auto;padding:20px 20px 20px 15px;color:#fff;text-decoration:none!important;box-shadow:none!important;-webkit-box-shadow:none!important;-moz-box-shadow:none!important;border:none;border-left:5px solid #00abf0}body a.novashare-ctt:hover{color:#fff;border-left:5px solid #008cc4}body a.novashare-ctt:visited{color:#fff}body a.novashare-ctt *{pointer-events:none}body a.novashare-ctt .novashare-ctt-tweet{display:block;font-size:18px;line-height:27px;margin-bottom:10px}body a.novashare-ctt .novashare-ctt-cta-container{display:block;overflow:hidden}body a.novashare-ctt .novashare-ctt-cta{float:right}body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta{float:left}body a.novashare-ctt .novashare-ctt-cta-text{font-size:16px;line-height:16px;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon{margin-left:10px;display:inline-block;vertical-align:middle}body a.novashare-ctt .novashare-ctt-cta-icon svg{vertical-align:middle;height:18px}body a.novashare-ctt.novashare-ctt-simple{background:0 0;padding:10px 0 10px 20px;color:inherit}body a.novashare-ctt.novashare-ctt-simple-alt{background:#f9f9f9;padding:20px;color:#404040}body a.novashare-ctt.novashare-ctt-simple-alt:hover,body a.novashare-ctt.novashare-ctt-simple:hover{border-left:5px solid #008cc4}body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta{color:#00abf0}body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta,body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta{color:#008cc4}It’s time to learn more than just ‘git add’, ‘git commit’ and ‘git push’ Dive into everything you need to know about a typical Git workflow in this guide Click to Tweet

We’ve mentioned the term GitHub once or twice now, so what’s the difference between Git and GitHub?

This may confuse you if you’re totally new to Git. To put it in simple words, Git and GitHub are related yet different tools.

Git is the version control system (VCS) we use to keep control of the changes of our files, while GitHub is a service we use to store our project files and their Git history online (located in the .git/ folder of your project).

Git is installed locally, on your machine, and without hosting services like GitHub or GitLab, it would be very difficult to collaborate with other developers.

GitHub supercharges Git by adding other features that improve collaboration, like cloning, forking, and merging. Together, these two tools combine to bring you a relatively friendly ecosystem to develop, manage, and show your project to other people.

Basic Git for Web Development Workflow

In the next sections, you’ll learn more about Git workflow for web development through hands-on practice.

Installation Requirements

If you’ve not installed Git yet, this is a perfect time. It’s easy to install and available on most operating systems.

Download it from the official downloads page, or install it with a package manager if you’re using Linux or macOS:

To test that everything went fine with the installation, fire up a terminal on Linux or macOS by searching for “Terminal” in your applications menu, or by opening Git bash on Windows (which comes installed with Git by default).

Then type:

git --version

If you get a Git version as a response, you’re good to go.

We’ll also need a GitHub account, so make sure to sign up or log in to GitHub:

Once you have Git installed and have logged into your GitHub account, you can move on to the next section.

Basic Git Workflow for Collaborative Projects

As mentioned earlier, most of the time you won’t be developing solo projects. Collaborating is a key skill, and Git and GitHub help us to make it a simple yet effective process.

The typical workflow of a Git project looks like this:

1. Get a local copy of the project by cloning a repository, or repo. If you’re collaborating, you should fork the repo first.
2. Create a branch with a representative name of the feature you’ll be working on.
3. Edit the project.
4. Commit the changes to your local machine.
5. Push the changes to the remote repo.
6. Create a pull request to the original repo.
7. Merge and solve conflicts in the main branch of the original repo.

Tutorial

Now it’s time to get our hands dirty!

In this guide, you’re going to create a simple HTML website. For practical purposes, you’ll fork the base project from the HTML site repository to your GitHub account. This can be done for all public available repositories.

To fork the HTML site, go to this GitHub repository and click on the Fork button located at the top right of the page:

Now you have a fork of the original repo that’s only available on your GitHub account. It’s the exact same repo — until you start to commit changes.

As you can see, forking a public repo takes just a couple of seconds. This is great for open-source projects, but bear in mind that if your organization has a private repo, you’ll need to be included as a contributor before trying to fork it.

It’s time to bring your fork to your local machine. To do this, you need to clone it with the command git clone, which retrieves the Git repository from the remote server:

git clone remote_url

You need to replace remote_url with your fork’s URL. To get the exact URL of a GitHub repo, go to its page and click on Code. Then choose SSH, and copy the link it gives you:

The command you would run to clone the forked repo is:

git clone git@github.com:yourusername/HTML-site.git

When you clone a repo, you get a folder with its name. Inside of that folder is the project’s source code (in this case, the HTML site) and the Git repo, which is located inside of a folder named .git.

You can see the list of files inside the new directory by opening the new folder in a graphical file manager, or by listing them directly from the terminal with the ls or dircommands:

# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site
.git images .gitignore index.html LICENSE README.md styles.css

This HTML site is very simple. It uses Bootstrap for practical purposes and a few pictures from Unsplash, where you can download free images for your site.

If you open the index.html file in your browser, you’ll see a simple page with a few images:

It’s time to play around with this project. It feels very empty, and maybe a header with the name of the site could enhance the user experience.

To do that, enter the HTML-site directory and create a branch named header. In this new branch, we can edit all the files and implement as much code as we want because it won’t affect the main (original) branch.

Run the following command:

git checkout -b header

This will create a branch named “header” and switch you over to it right after this. It’s equivalent to:

git branch header
git checkout header

To confirm everything went fine, run:

git status
# On branch header
# nothing to commit, working tree clean

You’ll see that you’ve been shifted from the “main” branch to the “header” branch, but the working tree is still clean since we haven’t edited any files.

In your favorite code editor, open the index.html file in your branched project. This file includes some links to Bootstrap 5, so we can take advantage of the framework’s ready-to-use components.

Add the following code to the index.html file inside the <body> tag and above the image container:

<header>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">HTML site</span>
    </div>
  </nav>
</header>

Much better-looking! Feel free to make other branches and changes you wish.

Once you’re done editing the project, it’s time to commit all the changes to your local repo. Inside the project directory, type the following into your terminal:

git add --all
git commit -m "Added simple header in index.html file"

When you first start a project, it’s common to have descriptive commit messages, but with time and shifted focus, the messages’ quality tends to go down. Make sure to keep up with good naming practice.

Now you’ve made a commit to your local repo (which is still only available on your computer), it’s time to push it to the remote repository.

If you try to push the commit as normal, it won’t work because you’re currently working on the header branch. You need to set the upstream branch for header:

git push --set-upstream origin header

Starting from August 13, 2021, GitHub requires the use of SSH authentication, so make sure you have your keys correctly set up.

After this, you should be able to see a new branch named header in your forked repository (e.g. https://github.com/yourusername/HTML-site/branches):

To create a pull request to the original repo, click on Compare, down in the Active branches section.

This will guide you to a pull request, where you’ll need to choose what branch (the original or your fork) you want to merge with. By default, it shows the option to merge with the base repository:

Once you click on the pull request option, you’ll need to write a short description of the changes made, just as with your earlier commits. Once again, try to be concise yet descriptive:

Click on the Create pull request button and wait for the base repository owner to accept or give you feedback on your changes.

Congratulations — you’ve just completed all the steps of a common Git workflow for web development!

This was a really basic example, but the logic extends across projects of all sizes. Make sure you implement this workflow closely in bigger collaborative projects as well.

How to Use Git at Kinsta

If you’re a Kinsta user, you already have two ways to use Git and GitHub from within your MyKinsta portal.

Let’s start with the first option. You can easily SSH in and pull a repo from any Git hosting service like GitHub, Gitlab, or Bitbucket.

To do this, go to your Sites tab, select a site, and go to your SSH details section, and copy the SSH terminal command.

Login via SSH to your site by pasting the command above in your terminal, and entering to your site’s public folder (located under /www/yoursitename/). Here’s where all of your WordPress files are located, so you can pull down a Git repo with a custom theme or plugin that you’ve been working on.

Here’s how you’d pull down a Git repo in a simple command:

ssh yourkinstasite@1.2.3.4 -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Now, introducing the new GitHub deployment feature at Kinsta, you can deploy a full WordPress site from a GitHub repository.

Your GitHub repo should include a copy of the WordPress core files, and of course, your site’s content inside of the wp-content folder.

Let’s take a quick look at this option.

Go to one of your company’s sites and create a staging environment. This wouldn’t take longer than a couple of minutes.

Once you’re in your staging site, go to the Deployment tab and click on Begin setup button. You’re going to see a GitHub modal that will let Kinsta connect with your GitHub account.

Now, select the repo you’re going to pull your site from.

Finally, deploy your site and visit it through your staging site URL.

This feature is still in Beta, but soon every Kinsta user will have access to it.

Using Git and Kinsta can be a powerful combination if you know to use them well. While our tutorial here presents just a simple example, you can learn much more from our Git knowledge base article.

Step up your Git knowledge with this guide to a typical project workflow Click to Tweet

Summary

Nowadays, Git is a must-learn tool for web development, since most of the time you’ll be collaborating with others to create the best project you can.

In this article, we’ve discussed some important reasons to use Git in your projects, and we’ve shown you the basic workflow of collaborating in a Git repo.

Git is such a powerful tool that you can extend its usage even to WordPress hosting, so it can only benefit you to learn and implement it as part of your web development skills arsenal.

Do you have any other suggestions for improving this basic Git workflow for web development? Let us know in the comments section!

The post Git for Web Development: Get to Know the Typical Workflow of a Project appeared first on Kinsta®.