Create Your Website


We can now start building the website.

These instructions largely follow the instructions from GitHub, found here.

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

  1. On your computer, create a folder somewhere. We recommend naming it something like “my_website”.
  2. On GitHub.com, the top menu bar has a “+” icon. Click it.
  3. In the drop-down that appears, click “New repository”.
  4. This will re-direct you to a page titled “Create a new repository” with various fields to fill out.
  5. 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”.
  6. Add a quick description in the “Description” field, such as “My professional website”.
  7. Under visibility, select “Public”.
  8. 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”
  9. Now you can select the green “Create repository” button.
  10. GitHub will now re-direct you to the repository page. There should be nothing in it.
  11. In the blue section called “Quick setup—if you’ve done this kind of thing before”, click the copy button all the way to the right. This will copy the git HTTPS link to your repository.
  12. Now, open up RStudio.
  13. In the top tool bar, select File > New Project. In the pop-up, select “Version Control”, then “Git”, and then paste the link from GitHub in the field titled “Repository URL”. You can leave the “Project directory name:” field blank. For the “Create project as a subdirectory of:” field, use the “Browse” button to select the folder you made in step 1. Click “Create Project”. This is sometimes called “cloning” your repository. If you know how to do this from the command line, feel free to!
  14. RStudio will open a new project for you, tied to your GitHub repository.
  15. Now, you can begin to create a new file inside of your repository called “index.html”.
    1. In the top tool bar, select File > New File > HTML File.
    2. In the text-editing pane, you can now edit this file.
  16. 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>
  17. Save your file by clicking the save icon. Make sure to name it “index.html” and that it is in the correct repository.
  18. Commit and push your changes to GitHub.
    1. In the top-right pane of your RStudio, you should see a tab called “Git”. Click it.
    2. Select .gitignore and index.html. Do not select the .Rproj file.
    3. Then click the “Commit” button.
    4. In the pop-up screen, add a commit message in the top-right pane, e.g., “Initial commit”.
    5. Then click the “Commit” button.
    6. You can close out of the second pop-up window.
    7. In the original pop-up screen, you can now click the top-right green arrow that is pointing up and says “Push”.
    8. When that is done, you can close out of both pop-ups.
  19. Check in your GitHub repository to make sure that the commit is pushed. You should see index.html with the commit message that you gave it.
  20. Check your actual website by going to username.github.io. It should say (in very basic styling):

    Hello World

    I’m hosted with GitHub Pages.

  21. 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.
  22. 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”
  23. Great, now we are ready to customize our site!


If you need more instructions about committing and pushing to GitHub, or if you want to use the Terminal/Command Line, check out our Git and GitHub Guide.

  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.↩︎