Introduce Yourself Online

class: title-slide, center, bottom
background-image: url(img/gopher-hero.svg)
background-position: 50% 20%
background-size: 25%
background-color: #ffffff

# Introduce Yourself Online

## A workshop @ rstudio::global(2021)

### Dr. Alison Presmanes Hill

---
class: inverse, center, middle

# Why Hugo?

---
class: center, middle

# Why Hugo?

Markdown first

Content organization (subfolders!)

Layouts

Multilingual sites

Powerful taxonomies

Magical [list templates](https://gohugo.io/templates/lists/)

---
class: inverse, center, middle

## What *is* Hugo?

`themes/hugo-apero/layouts/`

---
class: middle

```html
<header class="post-header">
  <h1 class="f1 lh-solid measure-narrow mb3 fw4">{{ .Title }}</h1>
  {{ if .Params.subtitle }}
    <h4 class="f4 mt0 mb4 lh-title measure">
    {{ .Params.subtitle }}
    </h4>
  {{ end }}
</header>
```

![](img/hugo-single.png)

---
class: bottom, center
background-image: url(img/mustache.jpg)
background-size: 25%
background-color: #ffffff

## Hugo = a double curly brace templating system

## `{{ <hugo code goes here> }}`

---
class: middle

# Use your YAMLs 🍠

AKA "frontmatter"

.pull-left[
```yaml
---
title: "Using panelsets"
subtitle: "How to add panelsets..."
---
```
]

.pull-right[
```go

```
]

---
class: middle

# Hugo Page Bundles

```
.
├── content/
│   ├── privacy/index.md       # => a leaf bundle
│   └── faves/                 # => a branch bundle
│       ├── _index.md          # => AHA!
│       ├── roses/index.md     # => a leaf bundle
│       ├── kittens/index.md   # => another leaf bundle
│       └── kettles/index.md   # => yet another leaf bundle
```

---
class: middle

# Hugo list vs single templates

.pull-left[
![](img/hugo-list-page.png)
]

.pull-right[
![](img/hugo-single-page.png)
]

---
class: middle

# Hugo list vs single templates

```
.
├── content/
│   ├── privacy/index.md       # => single page
│   └── faves/                 
│       ├── _index.md          # => **list all faves**!
│       ├── roses/index.md     # => single page
│       ├── kittens/index.md   # => single page
│       └── kettles/index.md   # => single page
```

---
class: activity, center, middle

# ⏱

## To configure your new Hugo site!

🕚 10 minutes