Skip to content
DIG 245 Critical Web Design

1-2Github Pages

Aug 26

📌 Complete before class

  • 📚 0.0 Introduction (1–6)
  • 📚 Module 0.1 How This Book Is Organized (6–10)
  • 📚 Module 0.2 Technical Requirements (11–15)
  • 📚 Module 0.3 Conventions & Resources (16–18)
  • Take the day 1 survey
Learning Objectives
  1. Create a GitHub repository, add an index.html file with proper HTML structure, and commit the changes.
  2. Enable GitHub Pages to publish a repository as a live website.
  3. Install and configure Git locally, and troubleshoot at least one peer’s setup issue.

👉 Git Introduction

Section titled “👉 Git Introduction”

Today we’ll setup Git and Github so we can build and publish entire websites.

  • How do you currently manage versions of your projects, papers, etc.?
  • Git & Github slides (5-14 only)

👉 How to Set Up a New Web Project with Git

Section titled “👉 How to Set Up a New Web Project with Git”
ExcerptExercise 1.2.1

This exercise establishes best practices for setting up a new website project, including the index.html page, and tracking and publishing with Git. Document every step you get stuck on — this becomes your troubleshooting log for the semester.

  1. Login or create an account at https://github.com
  2. Click the plus button at the top right of your page to create a New Repository.
  3. Name the repository first-website and enable Add README.
  4. Click “Create repository.”
  5. Click “Add file” to create a new file in your first-website repo, and name it index.html.
  6. Add the html, head, and body elements that define the structure of an HTML file. Your code should look like the following:
<html>
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>
  1. Press Commit changes . . . and add a commit message about your changes, such as “Create new file.” Press Commit and the code you added to your file will be saved. You can verify this under the History tab.

👉 Enable GitHub Pages

Section titled “👉 Enable GitHub Pages”
FollowExercise 1.2.2

GitHub Pages is a service that lets you publish web pages for the world to see. In this exercise you will publish the contents of your repo as a live website.

See page 38 in the book for instructions or check the wiki for a video demonstration of these exercises.

👉 Install Git

Section titled “👉 Install Git”

The Critical Web Design book shows how to use Github Codespaces. You are free to use this method, but I recommended running Git, Github Desktop, and VS Code on your own machine, which gives you more flexibility.

  1. Install and Configure Git
  2. Continue following Git Milestones

Finished before class is over?

Section titled “Finished before class is over?”

Find one person who got something working that you didn’t, and one person you can help. Spend 15 min solving each other’s setup issues. Report unresolved questions to the class.

📌 Homework

  • ❓Quiz 01 - Git
  • 📚 Ch 1 Context (19–27)