Other Pages

Expand All

Create A Github Pages Repository

Goals

  • Create a new git repository locally

  • Create a new git repository on GitHub

  • Push your local repository to GitHub

Steps

Go to your Portfolio folder which contains the index.html file you were working on and 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:
mv ../index.html index.html

This moves the index.html file, which is located one level above your github.io directory, into your github.io directory and names it index.html again. The '..' means go to one directory above the current one. And the second 'index.html' is what you want to name the file after it's been moved to your current github.io directory. The name of the file has to still be index.html after the move. This is important because a web browser will automatically display the page if it is named index.html.

Type this in the terminal:
ls

This lists all the files in your current github.io directory. You should see your index.html file listed here.

Type this in the terminal:
git add index.html

This tells git that you want to add the index.html file. 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: Create a new repo via the UI on your Github page

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]/ in your web browser

Click on the arrow next to the '+' sign in the upper right corner of your Github page to get a drop down menu, and select 'New repository'.

Type [your-github-user-name].github.io into the 'Repository name' box. Leave the rest of the settings at their default values. You may leave the Description box empty for now. Click on the 'Create Repository' button.

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

Step 5: Connect to your remote Github repository

Connect to the remote repository you just created on Github from your local machine. This will allow you to later push your local project files to your remote Github repository, and allow those files to go live on the web. Go back to your Terminal or Command Prompt app to perform the next steps.

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

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.

Refresh your browser at the link https://github.com/[your-github-user-name]/[your-github-user-name].github.io . You should see your index.html file listed there now.

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 the portfolio page you made: this is great! You're looking at your code, 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.

Next Step: