Personal and Professional Website Workshop

@ Center for Vital Longevity

Ekarin E. Pongpipat & Micaela Chan

2026-05-14

Goal

Make a personal and professional website using quarto and host it on GitHub (learning git along the way)

Why?

  • Why make a website?
  • Why use quarto?
  • Why use git?
  • Why use GitHub?

Why make a website?

  • Another way to showcase your work and skills
  • More flexible and creative way than a CV or resume
  • Can post blogs

Why use quarto?

  • Fairly intuitive if you’re already using R and RStudio
  • A lot of documentation and examples
  • Uses markdown language, which is fairly easy to learn and use
  • Can incorporate multiple languages in addition to R

Why use git?

  • Version control, version control, version control
  • Collaboration

Why use GitHub (GH)?

  • Most popular option for hosting git repositories
  • Host and publish website for free
  • Showcase coding ability and use of version control

Prerequisites

Create GitHub repository

  • Go to GitHub and create a new repository with the name <user>.github.io

    • <user> is your GitHub username
    • Website: https://<user>.github.io

[Reference]

Setup GH repo

  • Check the setup page
    • Go to Settings > Pages
      • Source: deploy from branch
      • Branch: main /docs
      • Save

[Reference]

Clone repository

  1. In terminal, navigate to your home directory, then your Documents directory
cd </path/to/home/directory>/Documents
  1. Create a GitHub directory
mkdir GitHub
cd GitHub

For mac users:

mkdir ~/Documents/GitHub
cd ~/Documents/GitHub
  1. Copy and paste info from the GitHub page

Clone repository

  • Using git
git clone git@github.com:<user>/<user>.github.io.git
  • Using GH CLI
gh repo clone <user>/<user>.github.io 
- Note: You will have to authenticate/login if you haven't used it before.

Create quarto website

# Navigate into the newly cloned git direcotry
cd <user>.github.io

# use quarto to create a new website!
quarto create project website .

[Reference]

Modify: _quarto.yml to output your website into ./docs

  • Add the line output-dir: docs under project:
project:
  type: website
  output-dir: docs
  • Press Render in RStudio

Initial commit

git add *                         # adds files to track
git commit -m 'Initial commit'    # groups set of changes with message


git fetch       # looks at what prior changes were made
git pull        # merges prior changes to what you currently have
git push        # pushes changes back to GitHub


Check website: https://<user>.github.io

Modify quarto website

Modify: _quarto.yml

  • What is .yml?
    • YAML - YAML Ain’t Markup Language
    • Human friendly data serialization language
  • What is _quarto.yml?
    • Contains easily modifiable configuration information for quarto project

Modify: _quarto.yml example

project:
  type: website
  output-dir: docs

website:
  title: "<name>, Ph.D."
  navbar:
    search: true
    right:
      - icon: "bi bi-file-earmark-person"
        text: "CV"
        href: cv.pdf
        target: _blank
      - icon: github
        text: GitHub
        href: https://github.com/<user>
        target: _blank
      - text: Connect
        menu:
        - icon: linkedin
          text: LinkedIn
          href: https://www.linkedin.com/in/<user>/
          target: _blank
        - text: ResearchGate
          href: https://www.researchgate.net/profile/<user>
          target: _blank
        - icon: twitter-x
          text: X
          href: https://x.com/<user>
          target: _blank
format:
  html:
    theme: cosmo
    css: styles.css

editor: source

Modify: _quarto.yml references

Modify: index.qmd

  • What is .qmd?
    • Quarto markdown file
    • Contains content and formatting information for a webpage
  • index.qmd is the homepage of the website

Modify: index.qmd example

---
title: "Ekarin Eric Pongpipat"
subtitle: "Ph.D. in Cognition and Neuroscience"
image: images/profile-picture-circle.png
about:
  template: jolla
  links:
    - icon: linkedin
      text: LinkedIn
      href: https://linkedin.com/in/epongpipat/
    - icon: github
      text: Github
      href: https://github.com/epongpipat

---
I am interested in understanding the relationship between brain architecture (e.g., networks and gradients) and cognition, and how this relationship can change as we age and for different groups of individuals (e.g., disease-disorder states and genetic predispositions). I’m also interested in statistics, research methods, intuitive data visualization, and open science practices (open source code, open data, and open publication access).

Modify: index.qmd note

  • About Templates
    • 5 options
  • Website can be only this page or you can create additional pages (personal preference)
    • Update the navbar portion of the _quarto.yml file accordingly

Commit again

git add index.qmd 
git add _quarto.yml
git add docs
git commit -m 'update index.qmd and _quarto.yml'


git fetch
git pull
git push


Check website again: https://<user>.github.io

Extras

Extras: Tips

  • Create an images/ directory to store all images
  • Create a data/ directory to store all data such as education, posters, and publications
    • Use R to parse the data and format it in a visually appealing way

Extras: Custom domain

  • Purchase a domain name from a domain name registrar (e.g., godaddy, namecheap)
  • Follow instructions on this GitHub custom domain name guide to change settings at your domain name registrar.

Extras: Blog

Extras: Icons

References