Do-It-Yourself Projects

Project #1

Build a Live Website for Free in Under 30 Minutes

Use GitHub to Deploy on GitHub Pages in 5 steps

Output of Project 1.

You will need: an email address and your computer (the downloads folder)

  1. Create a free account on GitHub.com
    1. Enter your email
    2. Create a password
    3. Create a username
    4. Use the code sent to your email to verify
    5. Sign in with your username/email and password
  2. Create a repository (‘repo’) on GitHub’s servers to store your files
    1. Click the ‘Create Repository’ button (or, click on your username in the upper left and in the upper right you will see a ‘+’ button, and you can choose new repository)
    2. Set Repository name: hello-world
    3. Accept all the default settings and click ‘Create’
  3. Set up your files
    1. Download this image from a well-known, trusted stock images site. (Accept the 1280 x 720 default size.)
    2. Back in the web browser at github.com, add this file by clicking on ‘Choose your files’ and select the image from your downloads folder (or, click on the name of your repo and you will see an ‘Add File’ button to the left of the green ‘Code’ button).
    3. Next, highlight the following text and copy it (Edit/Copy or Ctrl-C):
      4.       
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Welcome to GitHub!</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
    </head>
    <body>

      <div class="box">
        <h1>Hello World</h1>
        <p>Congratulations to you!!! This site is live! You can share the link in the address bar with your family and friends!</p>
      </div>

      <div class="photo">
        <img src="keyboard-886462_1280.jpg" alt="A keyboard with white keys.">
      </div>

    </body>
    </html>
    4. Then, in your repo, click on ‘Add File’ and select ‘Create new file.’ In the blank section that appears, paste (CTRL-V) the text from above.
    5. Name the file: index.html
    6. Click the green “Commit changes” button.
    7. Edit the commit message if desired, then click the green “Commit” button.
  4. Make your repo ready for GitHub Pages
    1. In the upper left corner under the GitHub logo, you will see ‘Code,’ ‘Issues,’ ‘Pull Requests,’ … and at the far right of that line, ‘Settings.’ Click on Settings.
    2. On the left of the page, look down the list toward the bottom and click on ‘Pages’
    3. In the ‘Build and Deployment’ section, under ‘Branch,’ change the dropdown that says ‘None’ to ‘main’ and click ‘Save.’
  5. Check out your live website!
    1. Refresh the Settings/Pages page by clicking CTRL-R
    2. Where it says, ‘Your site is live at….’ Click on the link. Voila!