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:
We have already met requirement #1. So let’s focus on #2.
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
From the Terminal, from the
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.
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
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