Creating Your Website


To start, we will create a repository (you can think of this as a folder for your project).

  1. On GitHub.com, the top menu bar has a “+” icon. Click it.
  2. In the drop-down that appears, click “New repository”.
  3. This will re-direct you to a page titled “Create a new repository” with various fields to fill out.
  4. Under the field “Repository name” you need to enter [username].github.io where [username] is replaced by your actual username.
    1. For example, if your username is “pandabear”, then your repository would be called “pandabear.github.io”.
  5. Add a quick description in the “Description” field, such as “My professional website”.
  6. Under visibility, select “Public”.
  7. The other fields can be left on their defaults.
    1. Start with a template: “No template”
    2. Add README: Off
    3. Add .gitignore: “No .gitignore”
    4. Add license: “No license”
  8. Now you can select the green “Create repository” button.
  9. GitHub will now re-direct you to the repository page. There should be nothing in it.
  10. In the blue section called “Quick setup—if you’ve done this kind of thing before”, look for the blue “creating a new file” link. Click it.
  11. GitHub will now re-direct you to the file page.
  12. First, close to the top, you should see in blue “[username].github.io/” followed by a text-box. In that text box, type “index.html” (this will be a quick test for your home page).
  13. Inside the file, copy and paste this text:
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Hello World</h1>
    <p>I’m hosted with GitHub Pages.</p>
    </body>
    </html>
  14. Click the green “Commit changes…” button at the top right. In the pop-up, you don’t need to change the defaults. However, in the future, it may be useful to leave descriptive commit messages that tells your future self what you changed in that version in case you need to go backwards!
  15. Click the green “Commit changes” button in this pop-up.
  16. Check to make sure that the commit pushed. At the top of the files list, you should see your commit message on the left near your username. On the right, you should see a commit ID, followed by how long ago you committed your code and then the number of commits.
  17. Now we can check our actual website by going to [username].github.io. It should say in very basic styling:

    Hello World

    I’m hosted with GitHub Pages.

  18. If your actual webpage is not appearing:
    1. First wait a few minutes and try again. Sometimes it takes a bit of time for GitHub to create the website.
    2. If issues still persist, we need to manually tell GitHub to create the website.1 To start, click the settings icon on your repository page.
    3. On the left-hand side menu bar, click “Pages”.
    4. Leave the “Source” field to “Deploy from a branch”.
    5. Under “Branch” select “main”. The page will slightly change to show “main” and “/root” in boxes.
    6. Click “Save” next to these boxes.
    7. The page will refresh. At the top you should see a box that says, “Your site is live at” followed by a link. This means that your page deployed correctly.
  19. Before we get to customizing your site, one helpful tip is to add your website link to the “About” section of your repository.
    1. On the right side menu, next to “About”, select the settings icon.
    2. In the pop-up “Website” text-box, either copy-and-paste your website URL or check off the box that says “Use your GitHub Pages website”
  20. Great, now we are ready to customize our site!

  1. In fact, if we are creating a GitHub Page that has a different name than our username, e.g., a project webpage, we will need to do this manually, anyhow.↩︎