Other Pages

Deploying To Github Pages

If you haven't yet deployed to Github, start at First-time setup. Otherwise, start at Every time.

If you have any problems with these steps, grab a TA and have them help you out.

If you don't know if you have Git installed or have a GitHub account, it's probably better to develop locally (and not do these steps for now) and install Git later.

First-time setup

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, so go ahead and double-check it if you don't remember. Wherever you see [your-github-user-name], you'll replace that with your user name (and delete the braces).

Type this in the terminal:

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:

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:

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:

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:

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:

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:

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 TA first that you're doing the right thing.

Step 7

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

Because 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. But there's a small lag between the first push and being able to see your content on the web.

In 15 minutes, 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!

Every time

Goals

  • Commit your changes to locally

  • Push your changes to Github

Step 1: Commit any pending changes to git

Github will only receive the files we've committed into our local git repository. So we need to make sure all changed files have been committed.

Type this in the terminal:

Terminal
git status

git status shows you any pending changes you've created. If it has no output, you're already ready to deploy! Otherwise...

Type this in the terminal:

Terminal
git add .
git commit -m "Some helpful message for your future self"

Your commit message should reference whatever your outstanding changes are: something like 'added new cat picture'.

Step 2: Push changes to Github

Type this in the terminal:

Terminal
git push origin master

This takes all changes you've committed locally and pushes them to Github.

Step 3: Visit your site

Go to your browser and navigate to [your-github-user-name].github.io

You should see the changes you made, but ON THE INTERNET!

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 Add More Elements