Using Git for Beginners: Github for Desktop

As I have mentioned in my introductory two posts, Using Version Control and My Development Workflow, I use Git in my development. This post will focus on using Github for Windows GUI with lots (maybe too many) images (I prefer images because I am typically too impatient to watch videos). Github for Desktop is the first of three posts that I will walk-through and demonstrate. I personally have never used Github for Desktop but I know a few people that do. The primary reasons I never used it are twofold: (1.) by default the repositories are public and (2.) I was too cheap to pay for the private repositories.

As I mentioned and in way of review, I am going to share how to use Git with 3 different methods:

1. Github Desktop
2. Bitbucket's SourceTree
3. TortoiseGit

Summary

To use Github for Deskotp, we will take these steps:

1. Install Github for Desktop
2. Setup Github for Desktop
3. Create the Github Repository (Repo)
4. Add WordPress
5. Remove Default WordPress Themes (this step is only for Genesis developers)
6. Add Genesis & Genesis Sample to the Github Repo
7. Begin Development with Git
   1. Change Genesis Constants (functions.php)
   2. Publish Github Repo
   3. Change Theme Details (style.css)
   4. Sync Github Repo
8. Reverting with Github

Using Github for Desktop

1. Install Github for Desktop

To install Github for desktop, download the installation file from Github. On the Security Warning, click Install. This will download the full installation file and install the program.

After installing the program, you will need to setup Github for Desktop.

2. Setup Github for Desktop

To setup Github for Desktop, you first need to enter your Github credentials. If you have not already, create a Github account. Even if you do not plan to use Github for your site development, it is good to have a Github account for entering issues with plugins and various other libraries and repositories that you may use. If you already have a Github account, skip to Step 2.3: Complete Setup.

2.1 Create Github Account

To create a Github account, go to Github:

1. Enter a username
2. Enter your email
3. Create your password
4. Click Sign up for Github

2.2 Select Plan

After the intial form, you will be asked to select a plan. If you want to use the free plan, just click on Finish sign up.

2.3 Complete Setup

The first time you run Github, you will need to setup Github for Desktop.

1. Login: To create the Github repo, enter your Github account information and click on Log in.
2. Configure: Here you will enter your name (public) and email (public) and click on Continue.
3. Then it will search for your repositories. Either wait for it or click on Skip, which is what I did.

Then you will be brought to the tutorial screen, and now you are ready to create the Github Repository.

3. Create the Github Repository (Repo)

This will create .gitattributes (which you should not worry about at this time) and .gitignore.

If you would like, please feel free to replace/merge the .gitignore with one of the WordPress .gitignore files (.gitignore versions WordPress, .gitignore does not versions WordPress)).

4. Add WordPress to the Github Repo

Next you would either clone WordPress from Github, download it from WordPress.org, check it out of the WordPress SVN, or ideally use your own copy with your default themes and plugins already packaged with it.

These next two steps are for Genesis developers specifically where we will remove the default WordPress themes and add the Genesis themes.

5. Remove the Default WP Themes from the Github Repo

If you do not have a pre-packaged WordPress with Genesis and your child theme, then you will want to remove the WordPress default themes.

6. Add Genesis & Genesis Sample to the Github Repo

Next we want to add our Genesis theme and our default Genesis child theme, in this case, the Genesis Sample.

7. Begin Development

Now, we are ready to begin development. To begin with, we have this functions.php file.

Now, we want to make a few modifications:

7.1 Change Genesis Constants

The first thing I usually do is change my constants.

7.2 Publish the Github Repo

This is usually when I would publish the repository with Github. Now publishing the git repository in Github only creates the repository. It does not push the existing files or commits. This can be done earlier, but I tend to hold this off until this point. Sometimes I would do it before the Genesis constants change, sometimes much after. It really depends on you.

7.3 Change style.css

Next, I change my style.css to match. At first, I have this with my CSS:

After personalizing style.css, I now have this:

7.4 Sync the Github Repo

Then, I commit those changes and sync the repository.

So now you should be familiar with basic Github for Desktop usage. Next, I will briefly show how to revert files.

Reverting with Github

Here is how you can revert changes and track those changes with Git commits. Click on the Revert at the top right.

Here is how you can revert changes and not track those changes with Git. Click the gear/cog icon at the top right and click on "Undo most recent commit"

Conclusion

We have reviewed general usage of Github for Desktop. For your convenience, this is what we covered:

1. Install Github for Desktop
2. Setup Github for Desktop
3. Create the Github Repository (Repo)
4. Add WordPress
5. Remove Default WordPress Themes (this step is only for Genesis developers)
6. Add Genesis & Genesis Sample to the Github Repo
7. Begin Development with Git
   1. Change Genesis Constants (functions.php)
   2. Publish Github Repo
   3. Change Theme Details (style.css)
   4. Sync Github Repo
8. Reverting with Github