Want version control? Set up Git on your website

When you’re building your website, version control is a major part of it. Sure, you could just keep files on your desktop, naming them “version 1”, “version 1.1”, “version final”, “version revised final”, and so on, but wouldn’t it be great to have a website where the version control is beautifully organised, giving you the ability to swap between versions, and gives you a copy of your website located somewhere other than just on your hosting package and your home computer?

Welcome to Git

(If you’ve used Git before, you can skip ahead to the main directions, but if you haven’t, let me explain.)

Git gives you easy version control, where you have a main version, and can then fork off from that main version to let you make changes without touching the original version.

Think of it like that hot new meme that’s going around. Everyone knows the original. But everyone’s also been making their own versions, all following the same theme. You can trace back to the original, but you might like the version your best friend passed along more.

How do I use Git?

You can set up Git on your main computer, making it easy for you to code away on there and then push to another server. There are a lot of tutorials out there to help you too. Aditya Sridhar’s guide on FreeCodeCamp explains things really well, from what Git is to how you use it to how you set it up. And Roger Dudler’s git – the simple guide is a great reference for those beginning commands.

You can also use an online repository to hold your code. At Eco Web Hosting, we use GitLab, but there are plenty of others out there.

How do I use Git to manage my website?

You can set up an online repository to hold your code, then push to your website from there. I’ll take you through the steps using my test project on GitLab and test site on an Essential package here. This guide is designed for anyone who’s bought a hosting package from us, so if you’re with another company, things might be different for you.

Set up SSH access for your website

We offer SSH access for all our hosting packages, and our Support Knowledgebase has a great tutorial on how to set it up. I went with the two-factor authentication method because I already had Google Authenticator on my phone. Set up the password, get Google Authenticator working, and you’ll be able to connect.

Set up your project in GitLab

If you have an account on GitLab already, just click on the New Project button, give it a name, and you’re ready to get started. Keep the browser tab with all the Command Line instructions open, because you’re going to need some of those shortly.

Screenshot of the Create Blank Project screen in GitLab.

Create a new file in your project

If you don’t already have website files ready to go, you can test all this out with a simple HTML file. Click New File, and get typing.

If you already have files, whether they’re HTML files, images, or whatever, you can also upload them using the Upload File button.

In this case, I had one image and I made a very very simple page to show it off.

Screenshot of the code editor in GitLab with the HTML for my page.

SSH into your hosting package

Open up a terminal window on your computer, and SSH into your hosting package. If you’ve used two-factor authentication, you’ll need to make sure you have your authenticator open as well.

The command is:

ssh yourhostingpackage.tld@ssh.stackcp.com
Screenshot of the SSH login in a terminal window.

If you ever aren’t sure, you can always find it on the SSH Access page in your web hosting control panel.

Check that Git is installed

If you’re able to SSH into your hosting package, you’ll have Git installed, but if you’re like me and always need to double-check, type in:

git --version

This shows you what version you have installed.

Set up your global configuration

Since you’re using GitLab, you’ll need to make sure that GitLab knows exactly who’s using this server. You’ll need to know your GitLab username and email address.

First, type in:

git config --global user.name you

Where you is replaced by your username.

Then type in:

git config --global user.email email

Where email is your email address.

Once you’ve done those, you can check by typing in:

git config --global --list
Screenshot of the response when you type in git config --global --list

Go into your website’s main folder

If you type in:


You should see a directory called public_html.

That’s where your website will live. You can move into it by typing:

cd public_html

Now you’re ready to get connected!

Convert your public_html directory into a Git repository

GitLab needs to know it’s okay to put files in this directory. So, once you’re in your public_html directory, type in:

git init

This sets everything up for the big connection.

Connect your GitLab project with your public_html directory

Type in:

git remote add origin git@gitlab.com:username/projectpath.git

Where username is your GitLab username and projectpath is your project’s name.

Once it’s finished, you can check by typing in:

git remote -v

Which’ll show you what you’re connected to.

Screenshot of the results of typing in git remote -v

Push everything in your repository to your website

Now it’s time for the fun part. Type in:

git pull origin main

That pulls everything in main (your primary code version) from the origin (your GitLab project).

You’ll need to enter in your GitLab username and password, but once you’ve entered those in, it’ll do the magic.

Screenshot of the results of typing in git pull origin main

Enjoy your new website

And there you have it — GitLab, your website, and version control all set up!

Screenshot of my Animal Crossing-themed website, with a screenshot of the video game.

What can I do now?

Once you have everything set up, you can do a lot more with GitLab and your website. Set up an SSH key, and you won’t need to keep logging into GitLab every time you make a push. Create a fork of your existing project, and build entirely new websites based on your main template. Add more users to your project, and get everyone on your team working on the same version.

What if I have a problem?

If you’re having trouble with these steps, our Support Team is on hand to talk you through it. Good luck!

(Featured image by Kevin Ku on Unsplash.)