Lesson Weekend

This lesson is set up to take one person through the process of publishing a website to github. As we're working in pairs today, each person should go through this lesson for themselves. Set up an account for one of you, go through the whole lesson, then switch and do the whole process again with the next pair.

Our site is looking good! We have HTML content formatting and styled using both our own custom CSS, and the Bootstrap CSS framework. And it even includes an interactive jQuery form to update the site on the fly! Great work. Next up, let's actually publish our new site for the world to see. In this lesson we'll briefly explore tools called Git and GitHub in order to publish our page online using a special tool known as GitHub pages.

Git and GitHub

Professional web and software developers have a wide range of tools at their disposal to help build, monitor, and collaborate on projects. One of the most common types of software is called version control software. The goal of good version control software is to take micro-snapshots, frequently, as a project is being built. This helps track little changes along the way, and makes it easier if you need to go back to an old version, see how something was done "back when it was working" or something like that. Good version control software also has many other uses. One is the ability to move projects around from machine to machine using the Terminal.

The most common version control software in use is called Git. It's easy to access via the command line or Terminal, and ties easily to one of the most common open-source code-sharing websites, GitHub. Our goal in this section is to help you get your code saved with Git, and hosted on GitHub so that you can view your code, or even visit your site from any computer.

Let's open the Terminal and enter a few commands. Git is complex software, that does a lot more than we need it for today. Stick to these commands, and you can't go wrong.

Make sure you're in the My_Project directory with pwd, then enter the following.

git init
git config user.name your_name (use quotes if you want to use a multiple word name)
git config user.email your_email

You're now set up as the author of this project.

Now we need to create a GitHub account for you. Good news, they're free, and are a staple of the developer's life. You can create an account at github.com. After creating the account you'll need to visit the email address you provided, and click the link in the confirmation email GitHub has sent you.

Pick a good user name! As a developer, it might end up on your resume! GitHub also functions as a social network for developers. You can connect with people, collaborate on projects, and even find cool new libraries and tools to use.

Once you successfully register for a GitHub account, you should see a welcome message like this:

github-welcome-message

Now that you have an account, let's create a repository on GitHub. A repository is like creating a place to store and single project on your GitHub account. To create a new repository (almost always called a repo) select the + option in the upper-right corner of the GitHub welcome page. Then, select New repository from the dropdown menu, as seen in the image below:

create-new-repo-option

This should take you to a screen that looks like this:

create-new-repo-screen

When it asks for the name of the repo, use something easy to identify, like workshop_project. You don't need to alter any of the other options here, besides your Repository name. After entering a name, click the Create repository button. This should take you to a page that looks like this:

new-empty-repository

Now that we have a GitHub account we need to link the copy of our project saved to our computer to our new repo we've just created for it on GitHub. Copy that new URL GitHub has given you, and move back to the Terminal.

new-github-repo-url

Enter the following line into the terminal.

git remote add your_name your_URL

This is setting up something called a remote within GitHub. A remote is simply an address of a repo.

Next, enter the following commands.

git add .
git commit -m "add workshop project to git"

This will tell Git to collect all the work we've done today, and add it to a package, called a commit. That commit is the thing we're going to send to our repo on GitHub.

Finally, you can enter the following:

git push your_name master

Git will ask you to enter your username and password for GitHub, just to verify that you have the right to store your project there.

Once you've entered your password, Git will send your the local version of your project from your computer to your repo you've just created on GitHub. You can view the files online by refreshing your repo.

project-files-on-github

Let's take one last step. Let's let GitHub host our project, live, online.

Within your repo, click Settings at the top.

github-repo-settings-option

In the settings area, scroll down until you see a box labelled GitHub Pages. Within this box, you'll see a dropdown reading None. From that, select master branch. Then click Save.

publishing-to-gh-pages

It may take a minute to compile, but you can now scroll down to see the URL of your new hosted site! Try it out!

github-pages-url