Stepping away from the GitHub Desktop Client: Intro to the Terminal
I remember a few months ago learning to use git for the very first time. I’d done a Code First: Girls course but the course had only discussed the desktop client, and every time I went to look up something (*cough*becauseIbrokestuff*cough*), I’d be shown how to solve the problem using the terminal instead. So I realised that I’d need to learn how to use the terminal sooner or later.
But, I actually found it really hard to find a guide anywhere that explained what exactly I needed to do, in simple terms, for beginners. It certainly doesn’t help that the desktop client uses different terms for the same concepts! It took me some time, but I figured it out with course friends.
Some months on, I now regularly use git. So, I thought I’d write a really simple tutorial that tells you the basics of cloning a project down onto your computer and then getting any changes you’ve made back up to GitHub. That’s what I first learnt!
In this walkthrough, I’ll talk through the following:
- Using the terminal to navigate between folders
- Get code from from a GitHub repo onto your computer
- Once you’ve made changes, how you get them up to GitHub
What do you need for this tutorial?
- a folder inside your Documents folder called ‘GitHub’
- a repo of your own up on GitHub — it can be empty if you want, it doesn’t really matter what’s in it to start off with! It will have to be for now one that nobody else is working on.
This tutorial will be basic, and will skim over lots if important concepts like branches and what staging is. They are useful things to learn, so do research and read up on them further when you’ve got the time! But for now I wanted to show you how to get started with using git.
First of All, What is git?
git and GitHub are actually separate things. It took me a while to click what that! GitHub is the website that you navigate to. But git is something separate; it is a terminal language of sorts, that GitHub works with. GitHub isn’t the only thing that uses git; there are other services such as Git Labs which use it too.
Setting git Up
Go to this page here:
Git - Downloads
Various Git logos in PNG (bitmap) and EPS (vector) formats are available for use in online and print projects.
…and download the appropriate one for your operating system. This should set it all up for you, and there is accompanying documentation. If it feels hard, do perseverance — it’s worth it! Once you’ve done this, open up the terminal.
For a Mac, you’d do this by going to Finder, Utilities and then opening it from there. For Windows, it is a little less straightforward. The documentation with the above website should show you what to do; on my slightly older Windows set up, I do a search on my computer for the ‘powershell’ program and use that.
Word of Warning about the Terminal
The terminal is super useful and helps you do things really quick. If you use it wrong though, it is also possible to erase everything on your computer and wreak all sorts of havoc. So do use it with caution!
If you stick exactly to the steps I’ve detailed in this tutorial, you should be absolutely fine. If you do encounter an unexpected error though, stop what you’re doing, take a screenshot and send it to a tech friend and get some help. I’m always happy to look over anything if I have the time!
Navigating between folders
You’re probably wondering why this section is here. Well, if you use the terminal, you need to navigate to where the files and folders you want to work with are. It’s super easy though!
You know when you open the Finder in Mac and you’re taken to ‘All my files’ and you can choose to go into Desktop, or Documents, or whatever else is on the side menu? Or ‘My Computer’ in Windows and you have similar options? And then from both of these options you navigate down into the folder you want to drop folders and files into for your project? Well, if you’re gonna use the terminal, you’ll need to know how to do this in the terminal too!
By default, the terminal will point at the top level, which will be your user — for me it is ‘beverley’. I want to use the terminal to go down into my Documents folder and then into my GitHub folder, where I store all my projects. So to start, I do the following command:
Once you’ve typed it, you’ll need to press enter — as you will for each of the command you enter. ‘cd’ moves you down into the folder you’ve specified. Note it only takes you down, not up. Now, you’re in the Documents folder. I next want to go into my GitHub folder, which is inside Documents, so I then do:
Hurrah! Now we are in the right place for cloning in a project!
Cloning a Project
Now we want to get the URL of the project, so we find the project we want to clone on GitHub, and look for the ‘Clone or download’ button, which is shown below.
click the clipboard icon next to to the link to copy it.
Next, go to the terminal, and type:
git clone PASTEURL
Once you’ve hit enter, the project will be downloaded. Awesome right?? You can open up the Windows Explorer or Finder and navigate into your file to check visually if you’d like. It should now be there along with any other folders in that GitHub folder.
Pushing Code Changes up to a Project
In the Desktop client, you just click ‘sync’. But the desktop client hides stuff from you, and what clicking this button does actually breaks down into several steps with git. It actually hides more than I will cover in this tutorial, for example how it handles differences between your code and the code on GitHub. I’ll write a tutorial on how to deal with that — using git pull — at a later date. But that is the reason why this tutorial is only suitable for projects that nobody else is contributing to.
First off, we need some changes though. Open whatever text editor you use, open the project you’ve just cloned down and make some code changes. If it’s blank, add in an index.html file. Then, go back to the terminal again and enter:
You should now see a list of files in red that you’ve made changes to! If you added an index.html file, that’ll appear in red. Don’t be alarmed by the red, it just means it isn’t ‘staged’ yet. As I mentioned before, the desktop client does hide a lot of stuff from you and staging is one of those things. An analogy of what staging is is kind of parcelling it up ready for going up to GitHub. There are three steps to this. The first is:
git add —-all
Now, if you type ‘git status’ again, you’ll see that your index file has turned green. Hurrah!
Now, we want to commit the file. This is the final step before we push the code up to GitHub. To do this, type the following:
git commit -m “short description of the change you made”
This gives the change you made a name. It’s good to keep your commits small so that if you make a mistake, you can unpick it a lot easier!
Next up, we ‘push’ the code up to the master branch on GitHub! Pushing to the master branch isn’t ideal and is only really suitable for your own personal projects. I’ll write a separate blog post on something called branches at a later point, which you would use in someone else’s codebase. But for now, it’s good to start off practising the basics with a smaller project as a learning ground!
Now, the last step is:
git push origin master
Master is the name of the branch you’re pushing to. As previously mentioned, you wouldn’t generally speaking push to the master of other people’s code. But for the purposes of this demo and learning the very basics that’s what we’ll do.
Once you’ve done that, you should see your changes up in the repo on GitHub! Congratulations; you’ve successfully used git and the terminal!!!
If you found this hard, don’t worry. This is all tricky stuff, and using the terminal for the first time is pretty intense! Keep it up though, and it’s great that you’ve interested enough to visited this blog and make it all the way down to this paragraph! It does all get easier with time and practise.
If anyone has any trouble with any of these steps, has any questions, or any amendments, do let me know by leaving a comment or messaging me on Twitter. My handle is @WebDevBev =)
Recap of steps
cd Documentscd GitHubgit clone PASTEURL
Once you’ve done the steps up to this point once, you don’t need to do them again — the repo will just be there on your computer. If you want to then add changes to the repo on GitHub, just follow the below steps)
git statusgit add —-allgit commit -m “name of commit”git push origin master