Very Basic Site

Although the index.html file from your git repository is not valid HTML, browsers will render basic text as a text file. This means that our existing git repo is already has everything needed to build a website.

GitHub Pages

To enabled GitHub Pages on this git repo:

  1. Navigate to your git project on GitHub

  2. Click Settings (in the top menu)

  3. Click Pages (in the side menu)

  4. Source should already be set to Deploy from a branch

  5. Change Branch to main/master

  6. Click Save

  7. Periodically refresh the page, until Your site is live shows up:

../_images/pages_setup.webp

  1. Click View site to see how a web browser will render your index.html:

../_images/first_render.webp

Improving the Page

The page above is rendered from an index.html file that has only three lines of text. We now want to replace this content with a proper HTML page.

Replace the content of index.html with the following:

<!DOCTYPE html>
<html>
<head>
  <title>Home Page | DemoSite</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This <b>bold</b> exists within paragraph tags.</p>
</body>
</html>

Now create a high quality commit message and then push origin. After a few moments, your website will now be updated with these changes.

../_images/second_render.webp

Second Page

With a valid index.html HTML webpage, we can now create a second file, named second.html:

<!DOCTYPE html>
<html>
<head>
  <title>Second Page | DemoSite</title>
</head>
<body>
  <h1>Page Number Two</h1>
  <p>This is a second page <a href="/">with a link</a> to the Home page.</p>
</body>
</html>

Add another set of paragraph tags to index.html with the following:

<p>Check out <a href="/second.html">Page #2</a></p>

GitHub Desktop should show the following diff:

../_images/second_diff.webp

Push these changes to GitHub and wait for your website to be updated.

Your website will now have two web pages with links back and forth!

../_images/second_page.webp

Chapter Recap

At this point, you have now created a Static Website and put it onto the internet using a subdomain of github.io (<subdomain>.github.io). A second page was added and then both linked to one another. You can even browse through each of these historical changes.

The complexity of maintaining these links grows exponentially as websites grow. Fortunately, tools exist to make this easier.