Legal Innovation & Technology Lab
@ Suffolk Law School

Hello World with GitHub Pages

Estimated Time (Reading & Exercises): ~15 min.

You are welcome to join our Slack Team. There you can ask and answer questions relating to this lesson under the #howto-github channel. See How To for more.

In this exercise, we're going to publish a website using GitHub Pages. GitHub Pages is a free service offered by GitHub to open source and publicly accessible content. What does it do? In short it serves your code from a webserver. What does that mean? Well to answer that we'll need some context. Here's a short (~5 min) video.

So to clarify, GitHub Pages places the code from your repo (or some subset of that code) on a webserver for others to access over the Internet. Yes, people can already see your code if they visit your repo's page on GitHub.com, but their browsers don't interpret that code. That is, they see the text of the code, not the result. By serving your code on a webserver you can actually place your code live on the Internet. GitHub Pages restricts what it will serve to something called static content (things like HTML), but that's all we need for our purposes.

Make sure you're signed into GitHub.com, and navigate to your hello-world repo on GitHub (e.g. https://github.com/colarusso/hello-world). Click on Settings.

screen shot

Scroll down to the GitHub Pages section and select master branch from the Source pulldown. Then click Save.

screen shot

This will update your settings page, showing where on the web your page is being served (e.g., https://colarusso.github.io/hello-world/).

screen shot

If you visit your page, you'll see the content of your README.md file served as a webpage. That's because the the README is the only file on your site.

screen shot

Customarily, webpages aren't Markdown files (.md). They're normally HTML files. We'll get in to HTML (.html)more in another exercise, but like markdown, they're just text files filled where content conforming to a set structure. Use your text editor to create a new "text" file named index.html in your local copy of the repo right next to the README file. It should have the following content.

screen shot

You can cut and paste the code from here:

<html>
  <head>
    <title>Hello world!
  </head>
  <body>
      Hello world!
  </body>
</html>

After you've saved your file, look at your repo in GitHub Desktop. You'll see that the addition of your file registered as a change. Commit and push the change.

screen shot

Wait a minute or two (it can take a few minutes for your GitHub Pages site to update), and visit your site. If everything worked, you should see something like this.

screen shot

If you're a Lab student, this final push is like turning in your work for this exercise. Just be sure that you use the GitHub account you provided to the Lab. We'll be looking at http://[your username].github.io/hello-world to check your work.



← GitHub Intro. Back to Main How To