Code sharing and version control

Part 7, how to use Git and Github to keep your code safe

Buy the book

These articles are excerpts from the book's manuscript draft. You can read the book here or in an easier-to-read format and finalized by purchasing the finished book.

Table of Contents

Whatever you do, you should always take good care of your backups. In this article, I will explain how to backup the code files and, if you so like, share the code with others. And if not with others, you can share the code between your other computers. Automatically, or at least almost. This article will give you the basic information of git and GitHub to keep version info of your work and keep your files safe.

Code version control and sharing

Versions, what and why?

Versioning gives you a chance to return to earlier versions of your files. So, if you want to return to an older version of a file, you can do it. Why would you do it? Well, because you may find that the code you did, does not serve the purpose you intended, or you just want to go back and try something else. There may be many reasons for that.

The real benefit of versioning is not being able to traverse back and forth in file versions but to make sure no one ever replaces newer code with an older version. At least not accidentally. And this brings us to the other important feature of the same system; code sharing.

Sharing, what and why?

Alright, I work primarily by myself. So I do not need to share my code with other team members, but I share code between multiple computers. Some days I use my iMac at home and sometimes on my Macbook Pro where ever I happen to be or… My Lenovo X1 Carbon Linux laptop with an ultrawide external screen in my office. Developing with multiple machines is not recommended. But it just happens to be usual. I’m not the only one to do that.

This same system you can use to share code with multiple computers enables sharing the same code with multiple developers. The beauty of it is that everyone always has the most up-to-date version of the code. I can do work with one machine and continue with another.

I use git and GitHub to store my code. Here I explain how. Remember, this is my system, and you can create your process as long as you create one. Take care of backups. There are many tutorials on using git and GitHub, so why write one more? I want to save your time and offer you a working system without going too deep into these systems. This lets you start, and if you need something more, you can find the info somewhere else.

The concepts; git and GitHub

Git and GitHub are not the same!

I’ll simplify the concepts and show you an easy workflow. Please notice I do not use any graphical client software with Git and GitHub. I use only command line commands, and so should you. If you are more into graphical interfaces, feel free to find an app that suits you best. I’m just saying that everyone should have basic knowledge of command line work. A graphical interface does not always make things easier. Let alone faster.

Let’s get going.

Git - What it is?

Git is a free and open-source distributed version control system designed to handle everything in all kinds of projects. Note that Git is a local application to get the version control system on your development computer.

Find the download link and documentation from git-scm.com.

GitHub, what it is?

GitHub is the home for your code in the cloud. And as the code (backup and versions) live in the cloud, you can easily share the code with multiple computers or users.

Working with git and GitHub

Here I will introduce one method of creating a local git repository and the basic git commands for practical work with Git. Then I show how to create a remote repository in GitHub and connect it with the local repository we created earlier. And all the necessary commands to do all this.

So, what we are going to do:

  1. create a local git repository
  2. add files into the repository
  3. commit changes into the repository
  4. create a remote repository in GitHub
  5. add the remote repository to a local repo
  6. push changes from local to a remote repository

Create local git repository

Open the terminal to create a local git repository, navigate to your project folder, and initialize the repository.

But before we do it, I create a file to instruct Git to ignore some files. The file is called .gitignore .This is done because Git will keep track of all files, and often our project and project folders contain files that are created by OS and are not part of the project. So, we need to ignore these files.

Ignoring some files – gitignore -file

Git will keep track of all files in the repository location but there may be files we want to ignore and not store in the version control. To ignore those files we need to provide git a file that lists all the files to ignore. This file is called .gitignore. Notice the dot at the beginning. It means that the file is a hidden file and thus not visible in normal file listing.

You can get suitable ignore files (content) from GitHub or just google them. Here I show you the basics and one simple file to exclude MacOS hidden files and some other usesless files.

Create a gitignore file. I’m using Linux command line commands but you can use any method you like to create a new file. Just remember to save it as .gitignore

				
					touch .gitignore<enter>
vim .gitignore<enter>
				
			

Then open the file for edit. Here I’m using Vim to edit the file. So, again just use the command line. This is the content of my minimal ignore file.

				
					# ignore general Mac OS files
.DS_Store
.Trash

# ignore all hidden files. i.e. files starting with .
.*

# track .editorconfig file (i.e. do NOT ignore it) 
!.editorconfig

# track .gitignore file (even though we ignore files starting with .)
!.gitignore
				
			

Initialize a local repository – git init

To initialize a local repository you use command:

				
					git init
				
			

The git init command will create a hidden folder .git. This is good to know but do not need to go in there anytime. If you ever want to delete the local repository you can do it by removing the folder
rm -rf .git 

Add files to repository

Now that our repository is initialised we can add all the files in it. Add all files with command

				
					git add .
				
			

or

				
					git add *
				
			

You can add specific files one by one by naming them. Or any common Command Line syntax version like:

				
					git add file.txt
				
			

Check status

Now, that you have add files it is time to check the status of your system use command

				
					git status
				
			

Here you can see an example

Terminal window displaying git status results.

Commit changes to repository

To commit the changes you simply do a commit. As this is our first commit I use “Initial commit” as the commit message. The command is:

				
					git commit -m "Initial commit"
				
			

And there we have it. Our code is in the version control.

Next we create a remote repository in GitHub for safe storage in the cloud and to enable sharing with other developers or as I do, between multiple computers.

Create a GitHub repository

You can create a GitHub account for free and store your code safely in the cloud. I’m using a paid account, so I can also create private repositories for my use. No one else can see them. To create an account, navigate to GitHub

Create an empty repository in GitHub

Remember the repo you create in GitHub must be empty. Otherwise, you will stumble later on errors. The point is that we already have a git repository on our local machine, and we want to upload it to the cloud to be safe in GitHub

GitHub create repository dialog.

Notice that my repo here is Private as I plan to publish it later if needed. At this point it is only for my eyes.

So, what now? We have our repository locally and an empty repository in GitHub. Next, we will connect these repositories by telling our local repository what the remote repository (address) is and then push the contents from the local repository to GitHub.

Define the remote repository for git (local)

GitHub setup for new repository.

use the git remote add command to add the remote repo to your local repository. Remember to use the SSH command style as the https version does not work with command line authentication.

The command syntax is

git remote add origin git@github.com:/.git

Luckily you can copy it from your GitHub repository if you do not remember it. Create the repository with command

				
					git remote add origin git@github.com:KariSelovuo/wpsmithy.git
				
			

I then renamed the branch as “main” instead of “Master” which was default. This will upload the stuff into the default branch in GitHub repository.

Change the branch name with command

				
					git branch -M main
				
			

Now we have local and remote repositories. Next we will push the code from local to remote using git push command.

Push code to remote repository (GitHub)

As everything is already set up, we can use the push command.

				
					git push -u origin main
				
			
Terminal window displaying git push remote command results.

And there we have it. Our code is safely in our local machine and in the cloud, stored in GitHub repository.

GitHub page displaying initial commit content.

About the workflow

So, how do we work then? Just normally. You add files in your development environment, write code, debug, test, and save. And at the end of the day, you save your work, commit the changes and push them to the remote repository.

How to pull code from remote to local

If multiple developers are working with the code, you need to check that you have the most up-to-date version of the code to edit. 

To do this, you Pull the code from remote to a local repository. 

Update local repository 

				
					git pull
				
			

The workflow in a nutshell

Save all the files and use commands:

				
					git add .
git commit -m "message"
git push -u origin main
				
			

Only the theme is in the repo, not all of WP

I store all the code in the git repository for my tutorials. I save the code and push it into the remote repository. I will use different computers, so the screen capture images may sometimes be from my Mac and sometimes from my Linux machine. This is possible because I can have the same theme code on multiple computers.

The negative thing is that I can not have the same WordPress installation, database, and site content like pages, articles, text, and images synchronized. But that is not a problem. I am developing a theme, not a site.

Picture of Kari Selovuo

Kari Selovuo

Leave a Reply

Your email address will not be published. Required fields are marked *