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 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.
Scroll down to the GitHub Pages section and select master branch from the Source pulldown. Then click Save.
This will update your settings page, showing where on the web your page is being served (e.g., https://colarusso.github.io/hello-world/).
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.
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.
You can cut and paste the code from here:
<html>
<head>
<title>Hello world!</title>
</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.
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.
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.
