Recently I’ve been exploring ways to showcase my work as I progress. I had originally intended to take web pages I’d built, add them to my web site, add a link, include a couple jpg’s (screen captures) of my code, and be done. Then I learned about GitHub, an online site to post your web pages, apps, or whatever project you’re working on so that prospective employers, colleagues and friends, can see what you’re doing. Yes, Git does a lot more than that, but this is all I was looking for at the time. All right then, how to set it up? That’s when it all went south!
If you’re already a command line ninja and you’re familiar with Unix or even remember Dos then maybe Git will make sense right away but if, like me, your developer skills are still in the early stages and you just want to post your website creations to GitHub then a lot of the info you’ll find about Git is probably overkill and won’t answer the basic question “How do I post my work on GitHub?”.
I’m pretty savvy regarding most things tech and Internet. I’ve been able to set up, install, trouble shoot and basically figure out every program I’ve ever wanted to use with out having to make a call to technical support but, every now and then, I come across something that just frustrates me no end. Enter Git. As is often the situation its not Git itself that’s confusing, its the documentation and endless tutorials that end up making you want to pull your hair out, and I don’t have enough hair to spare!
So, with the hope of helping other new coders, let me chime in with one more tutorial on Git. Lets call it ‘Git for Absolute Newbies’
First, What is Git:
Git, at it’s most basic, is free versioning software which you install on your home computer. It takes a ‘folder/sub-folders and files’ and records them, then keeps track of the changes you make. Git also allows the original author (you) to look back at your changes, make a separate version of you file, try out some things then merge the changed file into the original (or not) its up to you. Other people can also take your files, work on them, then submit them back to you. You then review the changes/additions and decide whether or not to incorporate them. This also allows you to work on other peoples projects for your own interest or to try to help them advance their project. Git also allows you to roll back, explore previous versions, compare versions etc. Git is so much more than what I’ve described but that’s about all you really need to know at this point.
Next, GitHub. GitHub is a free (with paid option to upgrade) web site where you can upload your project into a ‘repository’ allowing others to see what you’ve done by allowing your code to be inspected, and it lets them contribute to your project, if you wish. In the free version you can upload as many projects as you want but they will all be public so be aware that everyone can see what you post! At some point in the Git installation process you’ll be asked to register an account with GitHub, do it, you’re going to need it.
Finally, GitHub Pages. GitHub Pages allow you to create (free version) a single multi-page web site to showcase your work or create as many single web pages (one page per project) as you need. GitHub lets others see your code, GitHub Pages, makes the preview so they can see it in action. But there’s an even easier way to see yours and other’s projects rendered as web pages or usable apps. GitHub Preview. I’ll explain that in a bit.
Why should I use Git?
You don’t have to. You can do like I suggested at the start of this post and just put your project on your own web site, add some jpg’s of the code, and be done. BUT, (from what I’ve read) many developers use Git and it does give you access to lots of projects others are working on that you can inspect, learn from, and contribute too, giving you experience and something to show for your efforts. I’m not going to get into all the other things Git does, that could take a quite a while, once you’re up and running you can explore the features and options on your own time… now back to Git.
How to use it.
First you’ll want to install Git. Click this link Git then follow the installation instructions for your system (I’m using Windows 10 so I can only talk about that experience). I chose
https://git-scm.com/download/win I chose this download over the ‘Git Desktop’ option which uses a GUI interface because the ‘Hard Core’ users use the command line interface and since I want to be Hard Core too… that’s what I used 🙂 . For Windows I selected the option to install Git Bash as my command line. Once installed, open it up and you’re ready to add versioning to your projects.
IF you have no projects you can create one through the Git interface but I opted to use folders I had already created. I just wanted to add Git to them. This is done by navigating to the folder holding your project using the command line interface you’ve chosen (Git Bash for me), it can be an empty folder, a complete project or any stage in-between. Using Git Bash you get to the directory you want by using the command cd (change directory) i.e. at the Git Bash prompt ‘$’ enter
cd /c/Code/Project01 press: ENTER. To change drives enter
cd d: then navigate to your project folder and enter
git init ENTER (init = initialize). Git will add a hidden folder and return the message
Initialized Git repository in C:/Code/Project01/.git/. Git has now recorded the initial state of your folder and will keep track of any changes you make, but, not automatically. You have to tell git when you want to save a new version (more on that shortly).
The command you’ll use most often is
git status try it now.
If you failed to initialize the folder or you’re in a folder that is not being tracked by Git you’ll see
fatal: Not a git repository (or any of the parent directories): .git.
If you’re in a Git tracked folder but it’s is empty you should see
On branch master No commits yet nothing to commit (create/copy files and use "git add" to track).
If your folder has a file(s) in it you’ll see
On branch master No commits yet Untracked files: (use "git add ..." to include in what will be committed) in my case it also said
index.html nothing added to commit but untracked files present (use "git add" to track). In this case I’ve added a file ‘index.html’ after I initialized Git. Git is telling me there is a file in the folder that is not being tracked and that I should use ‘git add’ to have it be tracked by Git.
You tell Git to track a file by adding it to the list of files Git is tracking using the command
git add <name of file> (don’t include the <> brackets), or if you have a lot of files to add use
git add . (that’s a space and a period after add). That will add all files and in that folder and any sub folders to Git. But, after you add the files to Git, Git still isn’t tracking those files, they’re what is called ‘staged’. To add them to Git you run the command
git commit -m "" what you put between the quotes (include the quotes) is notes about the file, why it was changed, what was changed etc. so that when you look back on it five versions later you’ll remember what you did. Now that the file is committed Git is tracking it. Next you’ll want to send a copy to GitHub.
To put a copy of your project on GitHub got to
https://github.com and login to your account (create an account if you haven’t already done so). Then, in the Nav Bar at the top of the page you will see a + sign with a drop down arrow. Click it and select ‘New repository’. Give it the same name as the project folder you created on your computer. Add a short description of the project. If you’re using the free version you have to leave the ‘public’ option selected. You can check the box to ‘Initialize this repository with a README’ or not. the readme and gitignore can be added later as well. Click ‘create repository’. You’ve created a repository but its not yet synced with the project on your computer so the next page Git shows you is instructions on how to take the next step.
At the top of the page you’ll see ‘Quick Set-up’. At the far right of that line (after the address for your repository) you’ll see a copy to clipboard symbol, click it. Now go back to Git Bash and (still in your project’s folder) enter
git remote add origin (remote repository URL) with (remote repository URL) replaced with the address you copied to your clipboard. i.e.
$ git remote add origin https://github.com/YourAccountName/Project04.git ENTER. Then type
git remote -v. This will verify (v) that you have connected the two. You should get a few lines that show that the project has been connected. Now type
git push -u origin master and Git will send all the files in the ‘Master’ which is on your computer to the repository on GitHub. The two folders are now in sync! IF you created a readme at the time you created the repository on Git Hub. Or if you add files to the repository directly (i.e.create a readme later through GitHub) you’ll get a message that the two folders aren’t in sync and suggestions to use ‘fetch’ and ‘merge’ before you can ‘push’. What this means is that the repository is out of sync with the home folder… just follow the directions. ‘Fetch’ and ‘merge’, will bring the files from the repository and add then to the folder on your computer. When that’s done you can use ‘push’ to send the files you created in your Master folder to the GitHub repository. You’ll know you’re done when you use
git status and you get the message
'On branch master Your branch is up to date with 'origin/master'. nothing to commit, working tree clean'.
That’s it! Now you have a folder with Git versioning active on your computer and a matching folder on GitHub. The beauty of this is that now someone else can download a copy of any file your repository contains and work on it then save it back as a new version, BUT, the new version stays separate unless YOU decide to merge it back in. Meanwhile you can provide links to your repository allowing friends, colleagues, employers to see the code you’ve written. Oh, one thing that will save you some time. When you’re ready to quit Git Bash…. just close the window. I haven’t been able to find any command that quits the program.
But, there’s still one thing missing. When someone goes to your folder on GitHub and double clicks a file, the index.HTML file for instance, what they’ll see is the code, not the web page you designed. The easiest way to let them see the web page rendered is to use GitHub Preview. Your repository will have a web address like
https://github.com/Your Account Name/Project01/index.html just prepend
http://htmlpreview.github.com/? so your address looks something like this
http://htmlpreview.github.com/?https://github.com/Your Account Name/Project01/index.html. And you’ll see what the page looks like. You can also use this page GitHub Preview to use Preview to look at your projects and projects by other Git users.
There, you’re up and running with Git! Of course Git can do a whole lot more and everything I showed you can be done in different ways AND I’m sure you’ll come across problems I didn’t anticipate, but Git does a good job of prompting when things go wrong. Just follow the instructions or search for an answer on one of the many sites willing to explain the intricacies of Git.
I hope you find this useful – Tony