Other Pages

Deploying To Github

If you have already deployed your app to GitHub, go on to Deploying to GitHub again.

If you have any problems with these steps, ask a volunteer for help. If you don't know if you have Git installed or have a GitHub account, it's okay to do these steps later instead.

Goals

  • Create a new git repository locally

  • Create a new git repository on GitHub

  • Push your local repository to GitHub

Steps

If you have a 'railsbridge' folder on your computer or some other place you like to keep project files, cd to that directory and then follow the steps below.

Step 1: Make a special new directory

To get started on the project, you'll need to open up your command line. If you have a Mac, open up the Terminal app. If you're on a PC, look for a program called Command Prompt. You'll also need to know your GitHub user name and password. Wherever you see [your-github-user-name], you'll replace that with your user name (and delete the braces: the [ and ]).

Type this in the terminal:
mkdir [your-github-user-name].github.io

mkdir stands for 'make directory.' You just made a new directory that you'll put your project files in.

Step 2: Initialize a new local git repository

Type this in the terminal:
cd [your-github-user-name].github.io

You just changed directories and moved into the folder you just created.

Type this in the terminal:
git init

You just initialized an empty repository, i.e. told git, 'I want to start a new project here.'

Step 3: Make a commit

Type this in the terminal:
touch index.html
git add index.html

This creates a blank, new file called 'index.html'. The next line tells git you want to stage the file.

Type this in the terminal:
git commit -m 'first commit'

You just made an initial commit. (Think of it as a snapshot of your project that you can come back to later.)

Step 4: Add GitHub as a remote

You really do have to type your user name three times in the next command. Get ready for it.

Type this in the terminal:
git remote add origin https://[your-github-user-name]@github.com/[your-github-user-name]/[your-github-user-name].github.io.git

You just set up a 'remote' — a git repository somewhere else (in this case, on GitHub) that also holds your project files.

Step 5: Create a new repo via the GitHub UI

You can skip this step if you've created a [your-github-user-name].github.io page previously.

Navigate to https://github.com/[your-github-user-name]/

Click 'Create a new repo' in the upper right

Type [your-github-user-name].github.io into the 'Repository name' box

Do not choose 'Initialize this repository with a README' when creating the repo.

Step 6: Push your code to GitHub

Now, push the new file you just committed to GitHub.

Type this in the terminal:
git push -u origin master

You'll probably be prompted to type your GitHub password at this point. After you do, you'll have just pushed your project to GitHub's servers!

If you have existing content in your GitHub Pages repo, this command will fail, and you will have to do a git push -uf origin master instead. Verify with a volunteer first that you're doing the right thing.

Step 7

Woohoo!!! Take a breath and wait a few minutes.

Since you gave your GitHub repository a special name (in the format [your-github-user-name].github.io), GitHub will automatically take the contents of this one repository and make them your personal web page on GitHub. However, there's a small lag between the first push and being able to see your content on the web.

In a few minutes time, when you visit [your-github-user-name].github.io in a browser, you should see a blank white page: this is great! You're looking at the index.html file you just created, now live on the web!

Explanation

What is Git?

Git is an open-source tool for tracking and managing changes to source code. If you've used tools like SVN or CVS, you can use Git to do the same things.

Git is not required for front end development at all — some people use other source control tools like SVN, and there are wild and crazy coders who don't use source control at all.

But here are some good reasons to use a source control system:

  • You can commit different/earlier versions of a project, and get them back later if you change your mind.
  • It's easy to also copy these versions to another server or computer, so you have a backup if your laptop is stolen or your hard drive gets damaged.
  • Other coders can more easily work on a project with you. Source control systems have an automated way to 'merge' or combine changed files together.

And there are some neat things about Git specifically:

  • Git is distributed. Each person or computer working on the project has a full copy of it. There isn't a remote server you have to connect to that has the 'official' copy somewhere.
  • Git makes it easy to 'branch' or work separately for a while on an alternate version of the project, and then 'merge' those changes back in if you want to.
  • Git is ultra-powerful, and even many experienced developers are mystified by its wily ways.

What is GitHub?

GitHub is a web application that will store copies of your git repositories for you. It's a convenient place to keep a backup of your projects, and it has a nice-looking web interface that makes it easy to see your files and changes.

Projects that you make public (i.e. open source) can be stored on GitHub for free.

Back to Basic Javascript