By Scott Fegette | Monday, June 30, 2014
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.
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.
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.
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.
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.
Let’s create a new repository on our desktop we can manage with GitHub.
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.
Click Sign In and you should be set, with your GitHub profile shown prominently in the resulting screen.
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.
Close the Preferences dialog and let’s create 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.
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.
All set? Click the Create Repository button when you’re done, and you’ll get a very different view of the GitHub app. Success!
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.
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!
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.
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.
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.
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.
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.
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).
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.
Congratulations! You just synched your local directory with the new file created in your remote repository.
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:
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.
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.
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.
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!
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!
Begin learning software, business, and creative skills—anytime, anywhere—with video instruction from recognized industry experts.
Share this article:
Tags: Web Design, Scott Fegette, Git, GitHub, VCS, Version Control
You can change your email preferences at any time. We will never sell your email. More info
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.