How to push a project to Github

In a previous post, I mentioned that every developer should be using Github.  Github is a cloud-hosting service that creates backups of repositories, or projects.  These projects can be viewed, shared, or edited by other members of Github.  Github creates a wonderful experience because it creates a worry-free backup of your work and other people can contribute towards your work, which can create bigger and better projects.  

In order to use Github, you have to be a little bit familiar with a command-line interface, such as terminal for Mac.  It's been a few months since I've pushed a project to Github, so I thought I would go over the steps to both help you and myself.

Before I begin with the initial Github push, there are three basic steps when pushing a project.  First, edit content.  This means editing a piece of code, adding images, added documents, whatever.  Second, you commit the changes, which means you kind of create a save state.  Three, you push the save state to Github.

Step One - Create Your Repository

This is actually an easy step and it doesn't require the command-line interface.  Visit Github and perform the necessary on-screen steps. Be sure to name your repository and remember the name, because we will have to refer to it in step three.   It doesn't matter what you select for the README; we are going to wipe out the settings in a second!

Also, make sure you have a folder on your desktop for your project.  The beauty of Github is that you can work offline and then push your content online.

Step Two - Install Git

Git is required in order to push projects to Github.  If you don't have it installed already, you can actually install it from Terminal.  Follow the steps provided at the Git website.

Step Three - Initialize Git

Now that you have Git installed, you can get started!

In Terminal, cd to your local project folder on your computer.

Type the following in the Terminal:

git init

This creates a git repository in your project folder on your computer.

Then add files to the Git index:

git add .

Commit the added files:

git commit -m 'Whatever you wish to say'

Commiting is like a save state for your project.  You can add messages to help you remember where you are at within your project's progress.  This is added in between the single quotation marks.

Create a connection with Github

git remote add origin https://github.com/username/your-project.git

Make sure to change the your-project to your project's url address. You can get the url from the repository you created through Github.

Push Project to Github

git push -u origin master

This sends your commits in the master branch of Github. Basicaly, this is sending your save state to Github.

Final Thoughts

That's all!  Using Terminal for the first commit and push is required. Once you have done this, you can download a Github client that will make it easier to commit and push; it doesn't require Terminal. I prefer Github for Mac. However, you can always commit and push to Github through Terminal like we just did. This time, this is all you have to do for the next commit and push:

git add .

git commit -m "type your commit message here"

git push origin master

Resource Roundup - Keep Your Skills Up To Date With These Five Resources

Coding is similar to every other profession in that one needs to keep up to date with their knowledge and skill sets so that they don't fall behind.  This is possibly true for coding more so than any other profession because the technology changes so rapidly.  If you fall behind, you might fall out of your job.

Luckily, the coding community is an active bunch of bloggers, writers, and networkers.

In this week’s blog post, I’ll share some of my favorite resources that I have been following since my venture into front end development.

For Beginners:

CodeCademy

If you have never coded a single line of text in your life, then CodeCademy is a great stepping-stone towards front end development.  It has detailed, interactive tutorials on multiple languages including HTML, CSS, PHP, JavaScript, jQuery, Python, and Ruby.

For Everybody:

Hey, designer!

Hey, designer! is a great resource for both developers and designers.  A small portion of my blog is dedicated to web design, so why not share a resource that has both subjects underneath one website?  Hey, designer! is basically a resource gathering board; all of the links lead to external sites.  Posts range from educational blurbs about design to in depth JavaScript library tutorials. The best part of the site is the trending section, which shows which articles have been clicked on the most for the day, week, or month.

HTML5 / Javascript Weekly

If you’re looking for a once a week update that comes as one newsletter, these resources are great.  Once a week, an email will be sent in a newsletter format with the latest news surrounding each subject.  Each newsletter features a featured section, code and tools, watch, read, and a job openings section (ding ding!).  I recommend signing up for both.

Here’s an example issue for HTML5:

http://html5weekly.com/issues/125

Codepen.io

Like art, checking out other people’s work is a part of being an artist.  It keeps you on your toes, culturally up to date, and it might spark some inspiration.  Codepen.io is a great resource if you want to see what other people are doing.  Projects are hosted on Codepen with all of their code available for the world to see.  Most creations are on the brink of falling apart, but these people are trying to push the boundaries of coding.  However, when something works well and you want to use it on your site, you are able to by just copying and pasting the code.  Everything is shared.  After all, everything is stolen from somewhere nowadays.  You just have to steal correctly.

THE Front End Development Resource

I saved the best for last.  Yes, I meant to capitalize the; this resource is the resource to end all resources. I’m not sure who this person is, but they have combined every front end development resource out there into one, easy to navigate document.  Everything is split up into categories, so it’s easy to digest.  It might take you a year to go through it all, but it is definitely worth playing with.  And look, it’s hosted on GitHub.  This could be a project that a lot people have worked on.

GitHub: the open source backbone for your projects

If you are unfamiliar with GitHub, it is a code sharing community where programmers can network to tackle projects together.  In the beginning, it was mostly intended for code use, but now people are going beyond that and hosting non-code documents and files so that multiple people can work on one project. 

Users can host their projects on the site by “pushing” their content through Git, which is the source code management (CSM) software behind GitHub.  Linus Torvalds, who was the lead developer behind the Linux operating system, created Git in 2005.

Git operates by hosting projects in directories, or in GitHub’s case, repositories.  These repositories are then hosted on GitHub where anybody with an account can “fork” the project.  Forking a project creates a copy of the existing project and places it underneath your profile.  From here, you can continue to view the project, but the most important feature is the ability to edit the code.

My GitHub profile.

For developers, this is big.  GitHub is excellent for new open source projects.  With several developers forking and editing a project, a project can become so much more than what one person could complete.

For new users, GitHub can be kind of overwhelming.  It involves using Terminal, or whichever command-line software your operating system uses.  Because of this, many people don’t use GitHub.  To help, here are two tutorials to get started:

• Introduction to Git
• Open Source DIY

My two cents:

As an aspiring front-end developer, I’ve questioned whether or not it is worth using GitHub.  I recently used it for a project in which I was in South America without internet access for most of the day. 

Using GitHub actually promoted good coding practices.  GitHub provided a backup of my site in case I happened to lose or damage my laptop, which was a very strong possibility in one of the biggest cities during the rain season.

It is also promoted working offline.  I could code during the day without Internet access and push what I had completed when I arrived at the hotel.

It allowed for easy collaboration.  I worked closely with a professor during this time.  When we ran into a problem, we would fork each other’s work and push our ideas back at each other.  It was a smooth and painless process.

Finally, I had a complete project to show off on GitHub.  To me, having the final product on GitHub was like a trophy.  It documented all of my hard work; it showed every update I completed.

In the end, if you learn how to use GitHub, you’ll be strongly rewarded.  On top of learning some great coding practices and being a part of a popular, active community, you’ll have the opportunity to be a part of the next big project.  You might just fork and edit the code for the next Facebook.