github pages

by frankthetank

examples

R

Python

open a quarto project

files

.
├── _quarto.yml
├── about.qmd
├── index.qmd
├── make-ghpage-doc.Rproj
└── styles.css

1 directory, 5 files

• _quarto.yml yaml for all documents
• about.qmd example qmd file
• index.qmd main document, keep this
• .Rproj R project file
• styles.css add spice to the site

styles.css

.pink {
  color: pink;
}

index.qmd

---
title: "make-ghpage-doc"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.

_quarto.yml

project:
  type: website

website:
  title: "make-ghpage-doc"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

editor: visual

nav bar

add more files

folder tree
.
├── _quarto.yml
├── about.qmd
├── fancy-site-doc.Rproj
├── home
│   ├── how_to.qmd
│   ├── link_code.qmd
│   └── renv.qmd
├── index.qmd
├── plots
│   └── plot1.qmd
├── scripts
│   └── script.qmd
├── styles.css
└── styles.scss

4 directories, 11 files

_quarto.yml
project:
  type: website

website:
  title: "fancy-site-doc"
  navbar:
    left:
      - text: Home
        menu: 
          - href: index.qmd
            text: "0: Intro"
          - href: home/how_to.qmd
            text: "1: How to create this doc"
          - href: home/link_code.qmd
            text: "2: How to link code to doc"
          - href: home/renv.qmd
            text: "3: Virtual Environments"
      - text: Scripts
        menu:
          - href: scripts/script.qmd
            text: "0: my script"
      - text: Plots
        menu: 
          - href: plots/plot1.qmd
            text: "0: my plot"

format:
  html:
    theme: cosmo
    css: styles.css
    scss: styles.scss
    toc: true

editor: visual

nav bar results

# Code chunk to document
(df <- airquality |>
  arrange(desc(Month)) |>
  as_tibble())

link external code to documentation

external_script.R

# ----- Read in Libraries ----- #
## ---- libraries
library(dplyr)
library(magrittr)
## ---- stop

# ----- Read in the File ----- #
## ---- read-chunk
(df <- airquality %>%
  arrange(desc(Month)) %>%
  as_tibble())
## ---- stop

# ----- Make a Plot ----- #
## ---- make-plot
(
  plot <- df |>
    ggplot() + 
    geom_point(aes(Ozone,Temp)) +
    facet_grid(~Month)
)
## ---- stop

scripts/script.qmd

# ```{r setup}
  knitr::read_chunk(file.path(getwd(),"external_script.R"))
# ```

# ```{r libraries}

# ```

# ```{r read-chunk}

# ```

# ```{r make-plot}

# ```

github actions - let’s automate 🍕

github actions

.github/workflows/quarto-publish.yml

on:
  workflow_dispatch:
  push:
    branches: main

name: Quarto Publish

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Check out repository
        uses: actions/checkout@v3

      - name: Set up Quarto
        uses: quarto-dev/quarto-actions/setup@v2
        
      - name: Setup Renv
        uses: r-lib/actions/setup-renv@v2

      - name: Render and Publish
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          target: gh-pages
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

github actions

scss/css/sass

styles.scss

/*-- scss:defaults --*/
/* potential themes */
$light-blue: #ABBECB;
$back-blue: #160e1d;
$med-back-blue: #274E5A;
$crash-blue: #88AEB3;
$fade-blue: #BDCFD4;
$text-blue: #DEE2E2;
$light-back : #bdcad4;

/*-- scss:rules --*/
.myframe {
  box-shadow: $back-blue 10px 5px 5px 0px;
}

.slide1{
  h1 {
    font-size: 1.5em;
    color: $text-blue;
    z-index: 1;
  }
  h2, p, pre {
    color: $text-blue;
    font-size: 2em;
    z-index: 1;

  }
  ul {
    text-align: center;
  }
  
}

html

<iframe width="500" height="500" src="https://dplyr.tidyverse.org/" title="Quarto Documentation" class="myframe"></iframe>

js