Learn it fast with expert-taught software and skills training at lynda.com. Start your free trial

By Scott Fegette | Monday, June 30, 2014

GitHub for the Rest of Us

GitHub_Logo

Designers often work alongside coders on technical projects ranging from traditional web design to interactive documents and books, HTML5 web applications, and more. This not only means that we’re having to learn a little code ourselves these days, but also to integrate with code-centric workflows. And increasingly, the interaction between creative and technical professionals is happening on GitHub.

Although sharing and collaboration are popular reasons to use a GitHub repository to manage project assets, backup and recovery are even more fundamental reasons to “git” with the program and start using version control yourself. GitHub helps manage (and back up) text-based design assets like CSS, HTML, and JavaScript, and it can also help track graphic and binary files as well. Once you get started, you’ll find a lot of reasons to keep GitHub looking over your project assets.

What is GitHub?

GitHub is basically a social network built around a hosted instance of Git, a popular version-control system created by computing legend Linus Torvalds. Linus has a history of tackling big problems; he also created the Linux operating system. Git is at it’s core a command-line application, but it also has handy and easy-to-use desktop apps that give you access to the core features of Git without having to go command line-native.

It’s dead simple to use the GitHub desktop app to commit “snapshots” of your files to a cloud-based repository on GitHub as you work, and roll back to prior versions when you need to. Ready to go? Let’s get started.

Create a GitHub account

This part’s easy. Just visit github.com, and create a new account. We’ll use the free GitHub account. The key limitation with a free GitHub account is that your repositories are public, which means they can be found and followed by other GitHub members. No worries, though—if you need private repositories to keep your projects hush hush, GitHub offers paid plans allowing private repositories and other upgraded features. Make sure to note your email address and password while creating your account, as you’ll need them when we get back to the desktop. After you’ve created your free account, you’ll see the GitHub welcome page.

GitHub_Welcome_Page

This is your new GitHub home page, so make a bookmark! You’re currently in the News Feed view, which also shows the GitHub Bootcamp strip and many helpful links for learning more about Git and GitHub, in case you want to dig a bit deeper. To see your GitHub profile, click the name in the upper right of the browser window (in this case, the fictitious user IDigCode). You’ll now have a slightly different view.

IDigCode-Profile_Page_Contributions

The current Contributions view gives an overview of your activity, and how you’re working across your repositories. To edit your profile and personalize it, you can use the Edit profile button in the upper right. Your repositories (i.e. the collection of files you’ll be managing via GitHub) can be found by clicking the Repositories tab, which shows that we don’t have any repositories just yet, either.

IDigCode_Repositories-EMPTY

Let’s create a new repository on our desktop we can manage with GitHub.

Installing the GitHub app

Visit either windows.github.com or mac.github.com and download the appropriate desktop client for your system. Although we’re using the Mac version of the desktop client (and GitHub in a Mac-based browser), the two versions of the app look quite different, but function in the same way. If you’re on Windows, here’s a movie from James Williamson’s course GitHub for Web Designers that explains the Windows app and how it differs from the Mac GitHub app in more detail.

Once you’ve installed the app, go to its Preferences and enter your GitHub login information.

05-Accounts-LOGGED_OUT

Click Sign In and you should be set, with your GitHub profile shown prominently in the resulting screen.

06-Accounts_-_LOGGED_IN

In the Advanced tab of the Preferences, set your name and email address, so that GitHub can note who did what as it stores your committed changes.07-Git_Config_Options__Advanced_

Close the Preferences dialog and let’s create your first repository.

Creating your first repository

Choose the Create New Repository… menu item from the plus-sign button at the bottom of the GitHub app. Side note: the Add Local Repository… option lets you create a GitHub repository for an existing directory of files on your system, which is handy if you’ve already got files on your local system you’d like to create a repository for.

09-create-new-repo

Enter a name for your new repository—in our example case, My First Repository. You can also give it a friendly description so you and others recognize it more easily. Be sure to check the Push to GitHub option, as this will create the repository both locally and on the GitHub service. You also have the option to upgrade to a paid GitHub account, should you want to use the greyed-out checkbox, Keep this code private. Finally, choose the local directory for your files in the Local Path field; this is where you’ll eventually put all your project asset files, so Git can manage them.

10-Create_New_Repo__LOCAL_

All set? Click the Create Repository button when you’re done, and you’ll get a very different view of the GitHub app. Success!

11-Just_Created_First_Repo

This is the History view of the app, which shows all the changes you’ve made to this project repository—currently empty as you haven’t made any.

Adding your first file to the repository

Let’s hop over to your GitHub account in the web browser and see what’s changed there. Refresh (or click on) the Repositories tab, and you should see your new Repository listed. Score!

12-IDigCode

From this view you can get a listing of all the repositories you’re managing with GitHub. Click the title of your new repository to go into the detailed Repository view. You’ll notice there’s just no files there now. Let’s change that.

Committing changes – from GitHub

The README file is what’s generally shown by default in this view of a repository, and standard to have in your GitHub project. Fortunately there’s a convenient set of links in a yellow box to help you create a new one. We’ll create a new README file and edit it both in GitHub and on the desktop to illustrate the workflow of using GitHub day to day. Click the README.md link underlined in the screenshot below.

12-IDigCode_testrepo

You should now see the GitHub online editor (yes, you can even edit text-based files directly on GitHub), with the contents of your new README.md file within it, created from your repository’s title and description.

13-Create_New_README_File

The form at the bottom is the critical point to focus on. But first, edit your README.md file as you see fit, and when you’re ready, head down to that area near the green button and let’s take a peek.

Create_New_README_File

The first field is a summary of the changes; Create README.md is the default text (and it’s rather appropriate), but this could be Changed italic to bold or Updated CSS styles with new colors in the course of a project. If you have more details to add on the changes you’ve made to your file, enter those in the second field, then click the big Commit new file button. This will not only add the new file to the repository but register those changes as a version you can roll back to, if needed. The repository view now shows the README.md file’s contents by default, like a project home page.

Syncing remote changes with the GitHub app

Let’s switch back over to the GitHub app on the desktop and see what happened there. Click the Sync Branch button in the upper right of the app and you should see a new entry in your History reflecting what you just did up on the GitHub site (if not, click the History icon in the left-hand menu).

First_Commit_-_Desktop_View

Open the repository directory in the Finder and you should also now see your new README.md file there. It’s basically just a text file that supports the Markdown syntax for copy formatting and metadata.

Repo_in_Finder

Congratulations! You just synched your local directory with the new file created in your remote repository.

Committing local changes to GitHub

Let’s take this a few steps further. Open the README.md file in a text editor (any should do), make a change to it, then save the file and return to the GitHub app and you should see new changes in the Changes view:

Changes_View_-_DIRTAY

The red lines are the original lines in our README file, and the green lines are the edits we made to change it. This gives us a quick, easy view of what this set of changes entail without having to open the files directly. We can now commit this snapshot of the changes to our file by entering another Summary (and optionally, Description) of our changes, and hitting the big Commit button. But this time, when we do, something different happens: It shows up as a line underneath the Unsynced Commits section.

Unsynced_commits

This is significant, and means that you can work locally, saving individual snapshots of your work without syncing them to GitHub. Ready to sync them all with the master repository on GitHub? Click the Publish Branch button at the upper right of the GitHub app window, and you’ll do exactly that—no matter how many committed changes you’ve made.

Publish_Branch_Button

A regular workflow

Now that the repository’s been created, use it! You can add files and directories to it in the Finder (or Windows desktop), edit them as you see fit, and commit snapshots of your progress to GitHub for a specific history of your project you can revert to at any time. It’s common to leave the app running 24-7 so it can watch your repository directories for changes, and prompt you to commit them.

Rolling Back and Reverting to older versions

Now that you’re tracking your project assets, you’ll inevitably reach the point in which you need to step backwards through your progress and go back to an earlier commit or “save” of your file. Just go to the History tab of the GitHub app, find the version you want to roll back to, and click the small gear icon near the header, and you’ll have the option to roll back the project to that snapshot. Simple!

Rollback_Revert_To_Old_Commit

With the GitHub desktop apps, you can easily store and manage your project assets, and also share them with colleagues with the GitHub online service. But there’s a lot more underneath the hood of Git and GitHub to explore. Get a deeper overview of Git (and GitHub) in James Williamson’s course GitHub for Web Designers on lynda.com. Happy versioning!

Start your free 10-day trial

Begin learning software, business, and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start your free trial


Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Start your free trial

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.