Creating a Personal Website

Using GitHub, RStudio, and Quarto
Brian Harrold
October 7, 2025

Motivation

  • Show real work: authentic portfolio of papers, posters, code, datasets, and notebooks.
  • Reproducible examples: Quarto notebooks with math/citations.
  • Real tooling & credibility: Git/GitHub workflow; issues/PRs show collaboration and history.
  • Own it + publish fast: portable repo, custom domain, free hosting via GitHub Pages.

Agenda

  • Getting started with GitHub
  • Ready to roll with RStudio
  • Quick guide to Quarto
  • Customizing your content

GitHub

Create a New Repository

  1. Log in
  2. Click the green “New” button
  3. Name it

Some Details

  • Give it a professional-sounding name
  • Add a description
  • Choose “Public” visibility
  • Add a README file

Why Public?

If you want GitHub Pages to host your website for free, then the repository must be public. If you make your repository private, then you have to pay for GitHub to host your website.

Create

Click “Create”

Once created, copy the link to your repository from the URL

RStudio

Open the Repository

  1. Open RStudio
  2. File -> New Project -> Version Control -> Git
  3. Paste the URL (everything else should auto-fill)
  4. Choose a subdirectory
  5. Click “Create Project”

Check it

Project name should match the repository

Open a Terminal

Tools -> Terminal -> New Terminal

Quarto

In the Terminal

quarto create-project mysite --type website

New Folder

Open the new folder mysite/ in the Files pane.

  • _quarto.yml
  • index.qmd
  • about.qmd
  • styles.css

In _quarto.yml

project:
  type: website
  output-dir: ../docs

In the Terminal

quarto render mysite/

You should see a new docs/ folder in the Files Pane.

Pushing to GitHub

Under Git Options

  1. Commit… (Ctrl+Alt+M)
  2. Check to “Stage” all updates
  3. Add a commit message
  4. Press Commit
  5. Press Push

Deploying Pages

In GitHub:

  1. Settings
  2. Pages
  3. Source = Deploy from branch
  4. Choose main and /docs from the drop downs

Customization

Components

  • _quarto.yml = Website Structure
  • *.qmd = Website Content
  • styles.css = Website Formatting

_quarto.yml Project

project:
  type: website
  output-dir: ../docs
  render: 
    - "*.qmd"               # render real site pages
  resources: 
    - assets/**             # copy static assets
    - "!assets/**/*.qmd"    # but never copy .qmd slide sources

execute: 
  freeze: auto              # for faster builds

_quarto.yml Website

website:
  title: "Brian Harrold"
  site-url: https://stat-brain.github.io/bharrold/
  search: true                   # allows users to search your site
  navbar:
    collapse-below: lg
    right:
      - href: index.qmd
        text: Home
      - href: research.qmd       # add new files for each new page
        text: Research
      - href: about.qmd
        text: About
      - icon: github             # can add social media icons
        href: https://github.com/stat-brain
        aria-label: GitHub

_quarto.yml Format

format:
  html:
    theme:
      - cosmo              # base Bootswatch
      - brand              # your SCSS theme (optional)
    css: styles.css        # extra tweaks (optional)
    toc: true              # page sidebar
    toc-location: right
    anchor-sections: true  # adds linkable headings

*.qmd Content

Works like R Markdown

  • YAML at the top of the document
  • Formatting is similar
  • Add content, text, code, etc.

*.qmd YAML

---
title: "Brian Harrold"
format: html
title-block-banner: assets/banner.jpeg
page-layout: full
toc: false
---

styles.css

  • Loads after the base theme (cosmo)
  • Sets fonts
  • Changes colors
  • Polishes links, code, etc.

Drop-in Code

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@600&display=swap');
body { background: rgba(115,0,10,.06); color:#111; }
h1,h2,h3,h4 { font-family: "EB Garamond", Georgia, serif; }
.navbar { background:#73000a !important; }
a { color:#73000a; }

Examples

Note: you can get a domain name and use that with your GitHub website

Thank you!