This chapter is from the book
This chapter is from the book
This chapter is from the book
11.4 A Surprise Bonus
As hinted at the end of the last section, it would be nice to be able to confirm that the new character encoding works on a live web page. But this requires knowing how to deploy a live site to the Web, and that’s beyond the scope of a humble Git tutorial, right? Amazingly, the answer is no. The reason is that GitHub offers a free service called GitHub Pages, and any repository at GitHub containing static HTML is automatically available as a live website.
There is one minor prerequisite to using GitHub Pages, which is that you have to verify your email address with GitHub. Once you’ve done that, though, all you need to do is configure your repository to use GitHub Pages on the main branch, which you can do by going to the settings (Figure 11.22) and then selecting the main option (Figure 11.23) and saving the changes (Figure 11.24).
)
Figure 11.22: The settings for a GitHub repository.
)
Figure 11.23: Serving our website from the main branch.
)
Figure 11.24: Saving the new GitHub Pages settings.
That’s it! Our website is now available at the URL
https://<name>.github.io/website/
where <name> is your GitHub username. Since my username is mhartl, my copy of this tutorial’s website is at mhartl.github.io/website/, as shown in Figure 11.25.
)
Figure 11.25: A production website at GitHub Pages.
Note that the URL https://<name>.github.io/website/ automatically displays index.html, which is the usual convention on the Web: The index page is understood to be the default, so there’s no need to type it in. This is not the case with other pages, though, and if you follow the link to the About page you’ll see that the filename appears in the address bar (Figure 11.26). As seen in Figure 11.27, the trademark character ™ also renders correctly on the live website, just as we hoped it would.
)
Figure 11.26: An explicit about.html in the address bar.
)
Figure 11.27: The About page in production.
Because static HTML pages by definition don’t change from one page view to the next, GitHub can cache them efficiently, storing them for the next user who visits the site. This makes GitHub Pages sites both fast and cheap to serve (which is why GitHub can afford to offer them for free). You can even configure GitHub Pages to work with a custom domain, letting you replace <name>.github.io with something like www.example.com; see the free tutorial Learn Enough Custom Domains to Be Dangerous (https://www.learnenough.com/custom-domains) to learn how to do it. This combination of high performance and support for custom domains makes GitHub Pages suitable for production websites—for example, the Learn Enough blog (https://news.learnenough.com/) is a static website running on a custom domain at GitHub Pages.
The example website in this tutorial is really just a toy, but it’s a great start, and we’ll build on this foundation to make a nearly industrial-grade website in Learn Enough HTML to Be Dangerous and a fully industrial-grade site in Learn Enough CSS & Layout to Be Dangerous.
11.4.1 Exercises
On the About page, add a link back to index.html. Commit and push your change and verify that the link works on the production site.
As noted in Section 2.3, two of the most important Unix commands are mv and rm. Git provides analogues of these commands, which have the same effect on local files while also arranging to track the changes. Experiment with these commands via the following sequence: Create a file with some lorem ipsum text, add & commit it, rename it with git mv & commit, then remove it with git rm & commit again. Examine the results of git log -p to see how Git handled the operations.
To practice the process of making a new Git repository, make a second project called second_website in the repos directory. Create an index.html file with the content “hello, again!” and follow the steps (starting in Section 8.2) needed to deploy it to the live Web.
Make a third, secret project called secret_project. Touch files called foo, bar, and baz in the main project directory, and then follow the steps to initialize the repository and commit the initial results. Then, to practice using a service other than GitHub, create a free private repository at Bitbucket.