Create your first repository, make a change, and save it in Github.com

Getting started with Github

You've probably seen people talking about Github, GitLab or Bitbucket. All of these services do the same thing, but getting started can seem scary and difficult.

But it's not hard to get started with Git.

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
https://git-scm.com/

Well that was a useless answer. And that's what I typically find when someone answers, "what is Git?".

At it's core, Git allows you to keep a history of your work, collaborate with other developers, and if you make a mistake you can go back to a prior version — this is called versioning.

If you'd rather watch the video, we have you covered!

Let's get started with Github

Github.com is a service that uses Git. You can browser through entire projects and view then entire source code.

You'll see the word "repo" and "repository" a lot as a developer. Repo is short for repository. A repo is simply a place where you store your code. These are important in web and software development. What happens if your laptop died today, and the only source code you had was on there? Game over. This is why repo's are so important.

Step 1. Create a Github.com account

If you don't have an account already.. go make one! It's 100% free for projects that are open source. If you want to hide your projects from the public, you'll have to pay (or use GitLab.com, their private repositories are free).

Open your Github.com account here

Step 2. Create your first repo

Once you're signed in, create your first repository by clicking the button below.

Step 3. Create your repo form

Below is a screenshot of what you should fill in. The Repository Name and Description can be anything you want. I went with something simple for the sake of this article.

Step 4. Clone your repo

Cloning is the term we use for "copying a repo". Why do we use different words for this? Nobody knows. But it's a common word so make sure you're familiar with it!

Here's the top part of the next page. It has a very important URL you will need.

And below this is some code we can enter in our command line. It looks like this:

echo "# example-repo" >> README.md
git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/KalobTaulien/example-repo.git
git push -u origin master

Note: your repo will have a different URL.

First, you'll need to clone your repo to your computer. We'll do this using the command line. There are also plugins for Sublime, VS Code, and Atom that let you do this visually. But one day when you're on a server, you won't have that luxury, you'll just have command line — I'm preparing you for that day by teaching you the command line method right now.

You'll need to have Git installed on your computer. If you're on Windows, there's a Git for Windows program. For Mac and Linux users, open your terminal (or bash).

You'll need to get to a place where you can edit your files. Most people put their websites in their profile, beside My Documents in a folder called Sites (or Websites). Feel free to create that folder. This folder isn't needed for Git, it's just a way to stay organized.

Next, inside of your command line, you'll need to change directories to your new folder. This is where I can't help you, because I don't know what folder you made and where you made it. But I can give you the tools to change directories.

cd ~/Sites

  • "cd" stands for "change directory".
  • The ~/ is a shortcut for "Home".
  • "Sites" is the folder I made, called Sites.

Once you've successfully navigated to your new folder (or you've navigated to the folder of your choice), we'll need to clone to repo. This part is very easy.

git clone https://github.com/KalobTaulien/example-repo.git example_repo
  • "git" is the first word, meaning "execute a git command".
  • "clone" means "copy the repo".
  • The URL is the HTTPS version of your repo.
  • example_repo is the folder it will put your repo in. You can name this anything you want.

Now cd example_repo and you'll be inside your new repository on your computer. You won't see anything in here, so let's create a new file called README.md. This is the text you see on the front page of a repository. The .md extension stands for Markdown, which is a way of formatting this file. We'll keep this very simple for now.

Step 5. Create your README.md

Create a new file inside your example_repo folder called README.md

Inside your README.md file, add the following:

# Sample Readme Title
Hello world, this is my first repository!

Save that file, and that's it!

Step 6. Staging and Committing your work

The acts of "Staging" and "Committing" work together. Staging is when you have changes to a file (or added, or deleted a file). And Github doesn't know what you've done until you "commit" the work. We'll dig into this right now!

Staging
Inside your command line (terminal, bash, Git for Windows, etc) type:

git status

You'll see something along these lines:

The README.md that's in red, that's an untracked file. It means Git doesn't have any history with this file yet, it's brand new!

Anytime there are new changes to a file they will show up in red.

Now type:

git add README.md
git status

You'll see something like this:

Your new file is in green. Anytime you have a change (or file) that's in green, that means it's in "staging".

Staging is for files that are ready to be sent to Github via the Commit command.

Staging is for files that are ready to be sent to Github via the Commit command. And that's what we'll do next.

Committing
The act of "committing" means you are ready to send your staged files to Github. If you go to your Github repo right now (its the same URL you used to clone the repo), it just says it's an empty repo. That's useless.

In your terminal, type the following:

git commit -m "My first commit!"

Once you've committed, your terminal should look kind of like this:

No errors, 1 file changes, 2 insertions, created a README.md file. Perfect!

Your local version of Git (local is your computer) now thinks there's some code ready to be sent to Github. If at this point you're thinking, "OMG Kalob! This is taking forever!"... well, you're right! But I promise it gets faster and faster for you, the more you do it!

I can stage, commit and send files to Github in a matter of seconds now. But I've been doing this for a while and have lots of practice.

Step 7. Pushing to Github

This is the last step! And it's really easy! Type the following:

git push origin master
  • git to execute a git command
  • push to push your committed work to Github
  • origin is the branch (don't worry about these yet)
  • master is the main branch where your production-ready code should live

Github will ask you to sign in by giving them your username and password. This is absolutely normal and safe. If you don't want to be asked for your username and password every time you push, you'll need to add your computers public key. This article doesn't teach you about that, but that'd be a great next step for you (after this article)!

  • It asked me to sign in with my username and password
  • Compressed the committed files for faster transfering
  • Sent the files to my repo
  • No errors or other steps to take

Now go to your repo on Github (it's the same URL you used to clone the repo). In my case, it's https://github.com/KalobTaulien/example-repo.

You'll see something like this (provided I don't make more changes to this repo)


Next steps!

Want to get more hands on practice? Try these short tasks:

  1. Create a new file in your repo with some text
  2. Edit your README.md file
  3. Stage, Commit and Push your work to your Github repo.

Support this article with the click of a button!

If this article was helpful to you, you can either share it with your friends and fellow developers on Twitter and in Facebook groups... OR, you can take the Github approach, and "Star" my repo.

If you go to https://github.com/KalobTaulien/example-repo you'll see 3 buttons at the top right of the page that look like this:

Click the middle button that says Star. This is how you tell other developer you enjoyed their work.

Sign up for the newsletter!

Sign up for my free newsletter. No spam, all dev talk and only awesome articles. Opt out at any time, no hard feelings.





About the author

Kalob Taulien

Full stack developer. Entrepreneur and dev teacher. Over 100,00 students world wide.

I started making websites long before CSS had rounded corners, before JavaScript was more popular than oxygen and videos could only be played through Macromedia Flash. 

Today I'm a full stack LAMPP (PHP and Python) developer that enjoys teaching web development and working with startups. 

Connect with me: