How to use Github: Our guide to setting up a development workflow

Quick Summary – In this article, we’ll explore how to use GitHub in your website development workflow. You’ll learn how to get starting with Git and the benefits of using it. Github is a great way to store copies of your website files and development, either if you’re a lone dev or work as a part of a team.

What is Git?

Git is software for tracking changes in any set of files within your website projects. These files can range from theme files, Javascript, images and everything that makes your website work.

GitHub (https://github.com) is an online provider of hosting for web development and version control using Git. The basic package is free and there are monthly subscriptions if you need more space for files.

In today’s developing world, it is important to keep daily tracks of your website development. Keeping well-commented version files of your projects can aid your workflow, save time working with others and get you out of sticky situations when your code doesn’t do what it’s supposed to.

Is GitHub easy to set up and use?

Yes, it is and it doesn’t need any specialist knowledge of coding or command line stuff. Once you get in the flow of using GitHub daily, you’ll find it fits seamlessly within your projects.

I use GitHub daily to privately archive our internal website development activity. It comes in handy when I’m working with my teammates. Even when I’m on annual leave, our team can jump into GitHub and within a short period, be fully aware of where all our digital projects are at.
At 4 pm every day I ‘push’ all my day’s website changes to GitHub and within 5-10 minutes they are archived. It gives me a lot of peace of mind knowing that I have a historical backup of everything.

What do I need to get started?

Ok, let’s jump straight over to Github.com and signup for one of their free accounts. All you need to choose is a unique username, email address and password.
Once you’ve got signed up and verified your account (should only take 5 minutes), we’ll talk through the really useful Github desktop app.

There’s a really helpful Github Desktop App?

Before we talk more about the app, jump over to https://desktop.github.com/ to start downloading it. It’s free, shouldn’t take long to download and will become the hub of the whole operation. It is really useful!
The GitHub desktop app is where you’ll spend most of your time whilst using Git. It tracks everything for you throughout the day and all you have to do is comment on your group of changes and press the ‘Commit’ button.

Where are my files stored, how do I manage them?

Your files are stored locally on your computer and also stored privately within your GitHub account.

I store all my website projects in a folder name GitHub locally on my computer. They are all in one place and lets me keep them organised.

The desktop app is linked to a folder on your computer, keeping everything clear and organised. A web devs dream.

Let’s get your first ‘Repo’ up and running.

Repo is short for Repository. It’s the name given to the area where your projects are stored.

Setting up your first project:

• Log in to your GitHub account online and click the ‘Start a project’ button.
• Give your Repo a name and a short description.
• Choose ‘Private’.
• Ignore the three options for initialising your project for now.
• Click ‘ Create repository’.
• You’re all set up.

Bringing your new Repo into the desktop app.

Now we’ll connect your new GitHub project to the desktop app. On the project screen of your GitHub project, click the ‘Set up in Desktop’ button.

This will open up your desktop app and will ask you to ‘Clone’ your repo.

Clone in GitHub terms means to make an exact copy of your project. This is the key function of using Git. Two copies of your project both locally and stored online.

Once you’ve clicked ‘Clone’ everything is now set up and ready.
Any files you put in this folder on your computer will be tracked by the app.

Let’s use WordPress as an example of using Git.

WordPress is widely used by many developers and our web dev Scott is a huge fan of it.

Combining my WordPress themes with GitHub is seamless and has improved my workflow a lot.

We are going to store a theme and a child theme for our WordPress website in GitHub. We’ll then make some changes and see the desktop app note these changes. All we need to do then is commit our changes to GitHub.

Here are our steps to follow:

• On your computer open your GitHub folder.
• Copy your themes over to that folder.
• Open the desktop app.
• The files will now appear within the app.
• Name your first commit (We use usually call it ‘Initial Commit.
• Press ‘Commit to master’.
• Your files will now be uploaded to your GitHub Repo for safekeeping

Every change we make to our WordPress theme in this folder will now be tracked and recorded. At any time during your development, you can commit your changes. It’s always best to do it at least once a day and after any major change.

Slide HeadingLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Click Here
Previous
Next

What should be committed to GitHub?

There isn’t any need to commit heavy, static files such as the WordPress core or third party plugins. These type of files are constantly updated by WordPress and other developers. It’s only advisable to store and archive your development files such as themes and custom plugins.

Oh no, I’ve broken something, can my GitHub archive help?

This is one of the strongest cases for using Git. We all make mistakes from time to time and being able to fix them quickly is essential.
GitHub tracks every change we make and we can go back to versions of our project that were stable.

Yes, you can always roll your hosting server back, however that tends to mean you’ll go back 12-24 hours and will lose some of your amended files that do work.

Reverting to a previous file:

• Within the Desktop App, select the project you want to revert.
• Select the ‘History’ tab.
• Right-click on the commit you’d like to revert (choose one from before the file stopped working).
• Select ‘Revert this Commit’.
• This will return the file to your local computer and just needs uploading to your hosting server.

Slide HeadingLorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Click Here
Previous
Next

Wrapping Up

Git has become an essential part of website development. We are now even seeing it on job vacancy requirements for website developers.
The main benefit of using GitHub is its version control system. It allows for seamless collaboration within your teams.

Using Git keeps track of all your hard work, helps fix issues immediately and gives you confidence in knowing you have a full history of all your projects.

Using GitHub has saved me time, helped me work better within our team and has given me plenty of peace of mind during our digital projects.
I highly recommend using it as a part of your workflow.