Your First Webpage Deployment With GitHub Pages

TIME LIMIT: 2 HOURS

In this chapter, we are going to deploy your webpage to the Internet.

Get The Boss Out Of Your Office

The Boss comes in again.

The Boss: Heyyyyyyyy buddy.

You: Yes. Hello. Hi.

The Boss: I am tired of walking to your desk every time I want to see the current version of the Hello There site. Is there some way you can give me a World Wide Web link? I want to look at it in my own browser.

The Boss: You know. Can you deploy a website for me?

You: Give me ten minutes, then you should be able to see it from https://zero-to-code.github.io/hello-there. I’m going to make a GitHub Page for it.

The Boss: I don’t know what a GitHub Page is, but I like your flexible engineer’s mind. Anyways, I have to demo Hello There at 8AM tomorrow, so don’t screw this up.

You: Ten minutes, Boss.

GitHub Pages In A Nutshell

GitHub Pages is a super-simple, free hosting option that lets you easily turn git repositories into webpages. To generate a GitHub Page in the simplest way possible, there are two basic requirements:

1) Your repository must have an index.html at its root directory (the top-level directory). 2) You must push a branch named gh-pages to your GitHub origin that meets requirement #1.

Once you do this, GitHub will generate webpage for you. It uses your GitHub user name and the project name to create a URL for it using the following schema:

https://<your-github-username>.github.io/<repository-name>

We have already met requirement #1. So let’s focus on #2.

The Magical `gh-pages` branch

It’s easy to overthink it, but don’t – gh-pages is just another GitHub branch. Let’s create it and push it to our origin repo.

From the Terminal, from the ~/Desktop/hello-there repository:

git checkout master
git status # Make sure you saved your work.
git checkout -b gh-pages
git push origin gh-pages

That’s it. If your project is in working order - i.e. has a working index.html file in its root directory - you should have a webpage at https://<YOUR-GITHUB-NAME>.github.io/<GITHUB-REPO-NAME>. It may take a few minutes to show up.

You can see ours at https://zero-to-code.github.io/hello-there.

Now You Have a Webpage

This lightweight deployment process has the potential to bear enormous fruit. You now know how to deploy live webpages. You can put all kinds of crazy shit on the internet now. What a great power to have gained!

You will be deploying many more webpages using GitHub Pages throughout Parts 3 and 4.

Exercises

Run the following command in your Terminal:

git help checkout

Scroll down this help page (by hitting spacebar), until you find the documentation for the -b option.

Run git help <command> on at least 2 other commands.
Spend 5-10 minutes reviewing the GitHub Pages documentation - https://help.github.com/categories/github-pages-basics/
It is important to understand the anatomy of a URL. URL stands for “Uniform Resource Locator” – all of the resources on the Internet have a URL. Read “What is a URL?” on Mozilla Developer Network. https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL

CHAPTER 13