Development
Publishing Your First GitHub Pages Website
with Mike Bifulco, Developer Advocate at Stripe
Learn how to get up and running with your first GitHub Pages Website in this tutorial.
Transcript
Publishing Your First GitHub Pages Website
with Mike Bifulco
In this tutorial, you’re going to learn how to create a GitHub Pages website. By the end of the video, you will have your own domain and a public place to post your work, similar to this one, jamesnasium.github.io. Of course, the first part of this address will be your own name (yourusername.github.io). To get some sample content for your site, you’ll take some text from a Wikipedia article, and place it into a simple HTML page like so.
To follow along, you’ll need an account on GitHub as well as GitHub Desktop, which is a standalone application for both Mac or Windows. You’ll also need a code editor that you’re familiar with. I’ll be using Visual Studio Code. GitHub Pages is a free service that allows you to host and publish a website. As a part of the larger GitHub ecosystem, it allows you to take advantage of version control and collaboration features. If you want to learn more about what version control is and why you should use it, be sure to check out our free course Introduction to Git and GitHub.
Step one is to create a new repository, commonly referred to as a repo. This is simply a folder where the source files for your project are stored. What’s special about a GitHub repo is there’s all sorts of magic happening behind the scenes to help you keep track of your work. You’ll get a chance to see this in action shortly, but first, go to github.com and login.
Next, type the following in the address bar github.com/new. This brings you to the Create a new repository page. Now, type in your own username in the Repository name field. In my case, it’s jamesnasium. Now, type .github.io. This tells GitHub that you want to create a GitHub Pages site. Again, it’s super important that the first part of this address matches your username exactly or else the whole thing won’t work. Apart from that, leave everything else as is.
Now, click Ceate repository and you’ll get a page just like this. Look for the button that says, Set up in Desktop and click it. You’ll be prompted to open up the GitHub Desktop client, assuming you have it installed. The app will launch, and now there’s the Clone a Repository window that you have to deal with. This window is basically asking you where on your computer you want to store your files.
Currently this doesn’t exist, so you’ll need to create it. In the section called Local Path, click the Choose button. On a Mac, an obvious place to put this is the Documents folder. An easy way to find this is by clicking Documents here in the sidebar and then click Open. On Windows, it’s a similar process.
Once you’ve done that, click the Clone button, and now your repo is set up to publish. Notice in the top left that the Current Repository is listed as jamesnasium.github.io and if you hover over that for just a moment, you’ll even see the path of the folder appear. Cool. This now means that any files you put into that folder will be detected and eventually be uploaded to GitHub Pages. But first, you need to make that file.
You can directly open your code editor of choice by clicking this button here (Open in…). I’m using Visual Studio Code, but any text editor, or IDE, will work. If you don’t see one listed, there’s a way to add it by clicking Preferences, and following the directions.
The next step is to create a new file and choose File > Save and call this index.html. Now, it’s very important that you’re saving this into the folder you created earlier. GitHub Desktop and my text editor are smart enough to know where this is, but you should double-check for yourself.
Now, type out the following barebones HTML tags. Feel free to pause the video if you need to.
<html>
<body>
</body>
</html>
Next, go to wikipedia.org and search for the term Shoebill. Once here, copy these three paragraphs and then go back to your code editor and paste them between the <body> tags, then choose Save. Back in GitHub Desktop, you’ll see it recognize that the HTML page was added and you can even see the content in this section here.
<html>
<body>
The shoebill was known to both ancient Egyptians[3] and Arabs,[citation needed] but was not classified until the 19th century, after skins and eventually live specimens were brought to Europe. John Gould described it in 1850, giving it the name Balaeniceps rex. The genus name comes from the Latin words balaena "whale",[citation needed] and caput "head", abbreviated to -ceps in compound words.[4]
Traditionally allied with the storks (Ciconiiformes), it was retained there in the Sibley-Ahlquist taxonomy which lumped a massive number of unrelated taxa into their "Ciconiiformes". More recently, the shoebill has been considered to be closer to the pelicans (based on anatomical comparisons)[5] or the herons (based on biochemical evidence; Hagey et al., 2002).[6] Microscopic analysis of eggshell structure by Konstantin Mikhailov in 1995 found that the eggshells of shoebills closely resembled those of other Pelecaniformes in having a covering of thick microglobular material over the crystalline shells.[7] A recent DNA study reinforces their membership of the Pelecaniformes.[8]
So far, two fossil relatives of the shoebill have been described: Goliathia from the early Oligocene of Egypt and Paludavis from the Early Miocene of the same country. It has been suggested that the enigmatic African fossil bird Eremopezus was a relative too, but the evidence for that is unconfirmed. All that is known of Eremopezus is that it was a very large, probably flightless bird with a flexible foot, allowing it to handle either vegetation or prey.
</body>
</html>
Before you publish this, it’s best practice to add a note describing the work you just did. Technically, this is called a commit message. Type something like, Created index.html page and added content. Now press Commit to master and then Publish branch, which will push your page to the GitHub Pages repo. That’s it. Within a few minutes, you should see your changes live in your browser. In my case, that’s at jamesnasium.github.io.
Meanwhile, imagine that you want to update the style of this page, which let’s admit it needs some help. Let’s first wrap these three paragraphs in <p> tags, which will give it some needed structure.
<html>
<body>
<p>The shoebill was known to both ancient Egyptians[3] and Arabs,[citation needed] but was not classified until the 19th century, after skins and eventually live specimens were brought to Europe. John Gould described it in 1850, giving it the name Balaeniceps rex. The genus name comes from the Latin words balaena "whale",[citation needed] and caput "head", abbreviated to -ceps in compound words.[4]</p>
<p>Traditionally allied with the storks (Ciconiiformes), it was retained there in the Sibley-Ahlquist taxonomy which lumped a massive number of unrelated taxa into their "Ciconiiformes". More recently, the shoebill has been considered to be closer to the pelicans (based on anatomical comparisons)[5] or the herons (based on biochemical evidence; Hagey et al., 2002).[6] Microscopic analysis of eggshell structure by Konstantin Mikhailov in 1995 found that the eggshells of shoebills closely resembled those of other Pelecaniformes in having a covering of thick microglobular material over the crystalline shells.[7] A recent DNA study reinforces their membership of the Pelecaniformes.[8]</p>
<p>So far, two fossil relatives of the shoebill have been described: Goliathia from the early Oligocene of Egypt and Paludavis from the Early Miocene of the same country. It has been suggested that the enigmatic African fossil bird Eremopezus was a relative too, but the evidence for that is unconfirmed. All that is known of Eremopezus is that it was a very large, probably flightless bird with a flexible foot, allowing it to handle either vegetation or prey.</p>
</body>
</html>
Next, let’s add a little bit of style to the paragraphs with CSS. You’ll need to type the following <head> and <style> tags first. Again, feel free to pause the video as you do this. And then add the CSS for their paragraph between the styles like so.
<html>
<head>
<style>
p {
font: 100%/1.5 sans-serif;
max-width: 33em;
}
</style>
</head>
<body>
<p>The shoebill was known to both ancient Egyptians[3] and Arabs,[citation needed] but was not classified until the 19th century, after skins and eventually live specimens were brought to Europe. John Gould described it in 1850, giving it the name Balaeniceps rex. The genus name comes from the Latin words balaena "whale",[citation needed] and caput "head", abbreviated to -ceps in compound words.[4]</p>
<p>Traditionally allied with the storks (Ciconiiformes), it was retained there in the Sibley-Ahlquist taxonomy which lumped a massive number of unrelated taxa into their "Ciconiiformes". More recently, the shoebill has been considered to be closer to the pelicans (based on anatomical comparisons)[5] or the herons (based on biochemical evidence; Hagey et al., 2002).[6] Microscopic analysis of eggshell structure by Konstantin Mikhailov in 1995 found that the eggshells of shoebills closely resembled those of other Pelecaniformes in having a covering of thick microglobular material over the crystalline shells.[7] A recent DNA study reinforces their membership of the Pelecaniformes.[8]</p>
<p>So far, two fossil relatives of the shoebill have been described: Goliathia from the early Oligocene of Egypt and Paludavis from the Early Miocene of the same country. It has been suggested that the enigmatic African fossil bird Eremopezus was a relative too, but the evidence for that is unconfirmed. All that is known of Eremopezus is that it was a very large, probably flightless bird with a flexible foot, allowing it to handle either vegetation or prey.</p>
</body>
</html>
If you save the file and preview it, you’ll see these improvements. But of course these changes are just local. You now need to push these changes up to your GitHub Pages site, so it’s back to GitHub Desktop you go. Again, you can see that the changes have been detected. Do you remember what to do? That’s right. Add a commit message here, such as Added paragraphs and styles, and then click Commit to master, and then Push origin.
Your changes will be pushed and shortly you will see the updates again. You’ll need to be a little patient. These changes won’t be instant on your GitHub Pages site. That’s it. I hope this helped and if you liked this video, be sure to check out our other Take 5 videos as well as the entire course catalog at Gymnasium.
