Easy web publishing
with github

Data 304

Outline

  1. Create a github repository. (posible name: data304)

    • Either make your repo public or add me (rpruim) as a collaborator.
  1. Create a docs/ folder in the repository.
  1. Create an index.html file in the docs/folder.

    <h2>My Web Page!</h2>
    • This is temporary, so it doesn’t matter what you put in it.
  1. Modify github settings to serve docs/ folder as a website.

GitHub settings

Settings of pages in github

GitHub settings

After a brief delay, your site will be live.

Settings of pages in github

Accessing the website

  • file: docs/path/file.ext

  • URL: <username>.github.io/<repo name>/path/file.ext

  • You can use subfolders to keep your files organized.

  • A file named index.html will be served when the folder is accessed.

Slightly fancier: netlify

If you create an account with netlify, you can link it to a github repository and netlify will host your site.

  • You can configure netlify to serve any folder (not just docs/).

  • You can server multiple websites from the same repo.

  • This is how our course website is done.

Cloning your repository

Step 1. Copy the url for your repository from github.

  • Two options: HTTPS and SSH.

Cloning your repository

Step 2. Clone your repository locally.

  1. from commandline: git clone <repo-url>

  2. from RStudio: New Project > Version Control

Adding more files

  • You can do all of your work in RStudio (or VS Code) now.

  • Put files for your website in docs/ (or sub-folders of docs). (You can put other files outside the folder if you don’t want them to appear online.)

  • If generating from a quarto doc, either use

    embed-resources: true

    in your YAML header or make sure all the neccesary resources are also in the repositiory.

  • When you are ready to “publish”, just commit and push the files to GitHub.

    You can do this within RStudio or from the commandline.

Working with Quarto

Instaed of writing HTML, it is easier to create quarto files and render them to HTML – especially when you start adding in R/Python code, graphics, etc.

Here is a simple example for index.qmd to replace index.html:

---
format: html
---
## My Web Page! 

Render this as index.html and add the HTML file to the repository to have it included in your website.

Structuring your website

  1. You can create folders within docs/ (e.g., docs/hw/, docs/portfolio/, docs/data/, etc.) to keep your files organized.

  2. In each folder, you can maintain an index.html (created from index.qmd) with links to things in that folder (or elsewhere).

Getting fancy with Quarto

Document Features

If you are wondering how to include some feature in a quarto document, there is lots of documentation on quarto features.

Quarto Websites

Quarto has a website project type designed for creating websites. That’s how I do the class website. If you want to learn about that, see

It isn’t required, but it isn’t very hard either.