Collaboration is an integral part of web development. You will most likely be working with other developers. Even if you don’t, Git can still help you in many ways.
See how Kinsta stacks up against the competition.
Select your provider
WP Engine
SiteGround
GoDaddy
Bluehost
Flywheel
HostGator
Cloudways
AWS
Digital Ocean
DreamHost
Other Compare
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 filesCollaboration: 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.It’s time to learn more than just ‘git add’, ‘git commit’ and ‘git push’ 
This guide will cover all aspects of a typical Git workflow.
Click to Tweet
We’ve already mentioned the term GitHub a few times now. So what is the difference between Git or GitHub?
If you are completely new to Git, this may be confusing. Git and Git are both related tools, but they’re not the same thing.
Git is our version control system (VCS), which we use for keeping track of changes to our files. GitHub is a service that we use to store project files and their Git history online (located under the.git/ folder in your project).
Git is installed locally on your computer. Without hosting services such as GitLab or GitHub, it would be difficult to collaborate with other developers.
Git is boosted by GitHub, which adds other features to improve collaboration such as merging, forking and cloning. These two tools together create a friendly environment for you to manage your project, develop it, and then show it to others.
Basic Git for Web Developer Workflow
You’ll find out more about the Git workflow for web-development through hands-on experience in the next sections.
Installation Requirements
Git is now available for download. It is easy to install, and it’s available on all operating systems.
You can download it from the official site, or you can install it using a package manager if your operating system is Linux or macOS.
Git downloads page.
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
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:
GitHub signup page.
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:
Get a local copy of the project by cloning a repository, or repo. If you’re collaborating, you should fork the repo first.Create a branch with a representative name of the feature you’ll be working on.Edit the project.Commit the changes to your local machine.Push the changes to the remote repo.Create a pull request to the original repo.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.
Info
A fork is a separate copy of a repository that you can manage and modify without affecting the original project. Cloning a repo, on the other hand, merely creates a local copy of the files.
To fork the HTML site, go to this GitHub repository and click on the Fork button located at the top right of the page:
GitHub fork.
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:
SSH URL.
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:
The simple web page we’re creating.
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:
Sign Up For the Newsletter
Want to know how we increased our traffic over 1000%?
Join 20,000+ others who get our weekly newsletter with insider WordPress tips!
Subscribe Now 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 tag and above the image container:
HTML site
Our web page with a new 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”
Important
All Git commit messages must be clear and meaningful. Every time you add a commit, you and your teammates should be able to identify what happened in that commit so that if a bug occurs, you can fix it easily.
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.
Tired of subpar level 1 WordPress hosting support without the answers? Try our world-class support team! Check out our plans
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):
The “header” branch.
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:
Creating pull requests on GitHub.
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:
Writing a pull request message.
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.
SSH details section.
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”>
Important
SSH should be used by advanced users. If you’re not proficient in doing this don’t hesitate to contact Kinsta support first.
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.
Staging environment.
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.
GitHub deployment tab.
Now, select the repo you’re going to pull your site from.
Connect Kinsta to GitHub.
Finally, deploy your site and visit it through your staging site URL.
Deploy now button.
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
Git is an essential tool in web development. You’ll often be working with others to make the best possible project.
We’ve covered some of the most important reasons Git is useful in projects and shown how to collaborate in Git repos.
Git is a powerful tool you can use even for WordPress hosting. It can only be beneficial to you to learn it and to implement it in your web development skills.
Are there any other ideas for improving the basic Git workflow in web development? Please leave your feedback in the comments section.
Git for Web Development: Learn the typical Workflow for a Project
