Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:28Length:1.7 hours
Speedy workflows with atom.io
  • Overview
  • Transcript

5.1 Basic GitHub Integration

As developers, we can spend a lot of our day switching back and forth between GitHub and our code editor. Since Adam was made by GitHub, you'd expect to see a lot of GitHub integration. Let's say you wanna take this project and send it out to a repo in GitHub. First thing we'll do is we'll initialize a local repo. There are a couple of ways to do that, but we're gonna initialize this in the terminal. Since Speedy is just on my desktop, all I had to do was point into my desktop, and seedy into the Speedy directory. Now that we're here and we have Git installed, we're going to type in git init. We get a message notifying us that Git initialized an empty repository. So let's go back into our editor. When we get back into the editor, we can see some differences in our tree view. First we have this div.directory for Git. And we also see that all of our files have turned green. The div folder will indicate to us that that file won't be checked into our GitHub repo. And all the green files indicate that they're newly added. Let's go and push these changes into a GitHub repo. I'm going to make this repository speedy. I'm not going to provide a description and we're going to make it public. Now we get a set of instructions and since we're dealing with an existing repository, we're going to use the ones down here. We'll add our origin and then we want to push origin master. Now we'll paste in that method and set the origin. We don't get a message back but that's fine. Now before we can push to GitHub we need to actually commit some changes. So we'll set our tracking, and now we'll do a commit. Now that we've committed we can push to our master. Now that we've pushed successfully, we'll go back and check our editor. When we get back we can see all of our files have reverted from being green and in the GitHub Repo, we see our latest commit. Essentially what we saw here is that our preview will indicate to us our Git status. To see this photo in action let's actually modify this file. We'll go create another module and before we save our changes we can see that there's these green lines in the gutter to the left. These are called div lines. They indicate that there's been a change made to this file from source code. And one other thing to look at is the bottom right. When we saved you might have noticed that this changed. What this is telling us is that we're on the master branch, we've added twelve lines and removed one. And also if we look in the tree view, we can see that another JS is now orange, which indicates that we've modified this file. And these are really powerful tools for us to use when we're going through our daily workflow. And as powerful as these features are, we still have to switch back and forth from GitHub to our code editor. It would be cool if we actually could just hit a command and open up the things we need to see in GitHub. So in the next lesson we are going to learn a couple of key bindings that allow us to quickly switch from GitHub and Adam.

Back to the top