Introduce yourself online

# Introduce yourself online
### Computation Skills Workshop

---

background-image: url(img/internet.jpg)
background-position: 50% 20%
background-size: 50%
background-color: #ffffff

# Why introduce yourself online?

---

# Why introduce yourself online?

Fame?

Fortune?

Friendship?

Findability?

Fun?

Functional?

---

# Why introduce yourself online?

~~Fame~~ ❌

~~Fortune~~ ❌

Friendship ✔️

Findability ✔️

Fun ✔️

Functional ✔️

---

# How to introduce yourself online?

Lots of ways!

Today:

1. GitHub profile 📛

1. A postcard (about page) 💌

1. A blogdown site 🍡

---

# "Must I blog?"

No.

But you can. And if you do, you may follow your own rules. It is *your* space.

---

# ⏱ To GitHub.com!

Let's make our GitHub name tags right now

---

background-image: url(img/index.jpg)
background-position: 50% 20%
background-size: 50%
background-color: #ffffff

# Why R Markdown?

---

# Why R Markdown?

Use R code inside

Use RStudio IDE

Use the tools you already use (or should be using- 😉) for your work

---

## What *is* R Markdown?

---

# What is R Markdown?

1. An authoring framework for data science.

1. A document format (`.Rmd`).

1. An R package named `rmarkdown`.

1. A file format for making dynamic documents with R.

1. A tool for integrating prose, code, and results.

1. A computational document.

1. Wizardry.

---

# What is R Markdown?

1. ["An authoring framework for data science."](https://rmarkdown.rstudio.com/lesson-1.html) (✔️)

1. [A document format (`.Rmd`).](https://bookdown.org/yihui/rmarkdown/) (✔️)

1. [An R package named `rmarkdown`.](https://rmarkdown.rstudio.com/docs/) (✔️)

1. ["A file format for making dynamic documents with R."](https://rmarkdown.rstudio.com/articles_intro.html) (✔️)

1. ["A tool for integrating text, code, and results."](https://r4ds.had.co.nz/communicate-intro.html) (✔️)

1. ["A computational document."](http://radar.oreilly.com/2011/07/wolframs-computational-documen.html) (✔️)

1. Wizardry. (🧙‍♂️)

---
background-image: url("img/rmd_flowchart.png")
background-size: contain
background-color: #f6f6f6

# What is R Markdown?

---
background-image: url(img/rmarkdown_hedgehog_wide.png)
background-size: contain
background-position: middle, center

---
background-image: url(img/rmd-buddy.jpg)
background-size: contain
background-size: 50%
background-color: #ffffff

---
background-image: url(img/rmd-buddy-help.jpg)
background-size: contain
background-size: 50%
background-color: #ffffff

---
background-image: url(img/short1.jpg)
background-size: contain
background-color: #ffffff

---
background-image: url(img/short2.jpg)
background-size: contain
background-color: #ffffff

---
background-image: url(img/short3.jpg)
background-size: contain
background-color: #ffffff

---
class: inverse, center, middle

## Start with GitHub Pages 🚀

---

`https://github.com/bensoltoff/iyo-postcard/`

]

`https://bensoltoff.github.io/iyo-postcard/`

]

---

`https://github.com/<user>/<repo>`

]

`https://<user>.github.io/<repo>`

]

---
background-image: url(img/index.jpg)
background-size: contain
background-size: 50%
background-color: #ffffff

---
class: middle, center

## Other file link

]

<br>
`https://<user>.github.io/<repo>`
<br><br><br>
`https://<user>.github.com/<repo>/<.html>`

]

---

# ⏱ To RStudio!

Let's make a homepage with the `postcards` package.

---

background-image: url(img/server.jpg)
background-position: 50% 20%
background-size: 50%
background-color: #ffffff

# Why Netlify?

---
class: inverse, center, middle

## Mood

---
background-image: url(img/mr-rogers.jpg)
background-size: 80%
class: bottom, center

---
background-image: url("img/server.jpg")
background-size: 80%
background-position: bottom
class: center, top
background-color: #ffffff

# What is next?

--
<img src="img/Netlify.png" style="
  position: absolute; 
  width: 23%; 
  top: 335px;
  right: 228px;
">

---
class: inverse, center, middle

## Why Netlify?

---

# Why Netlify?

Continuous deployment

Speaks Hugo (but not R)

FEATURES (PR deploy previews / branch deploys / rollbacks)

---
class: inverse, middle

> Continuous deployment works by connecting a Git repository to a Netlify site and keeping the two in sync.

> &mdash; [Netlify docs](https://docs.netlify.com/site-deploys/create-deploys/)

---
class: inverse, middle

## 📣 Speaks Hugo

---
class: middle, center

---
class: middle, center
<img src="index_files/figure-html/unnamed-chunk-4-1.gif" width="80%" />

---
class: middle, center

---
class: inverse, center, middle

## Whither GitHub Pages?

If you `build_site()`, you can commit + push your `public/` folder to use GitHub Pages.

---
class: inverse, center, middle

## Why Netlify?

Go to this repo:
<https://github.com/hugo-apero/iyo-apero>

Click on the "Deploy to Netlify" button 🚀

---
class: activity

# ⏱  To your new site!

Let's go on a file scavenger hunt.

---

background-image: url(img/gopher-hero.svg)
background-position: 50% 20%
background-size: 25%
background-color: #ffffff

# Why Hugo?

---

# 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/`

---

```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> }}`

---

# Use your YAMLs 🍠

AKA "frontmatter"

```
]

---

# 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
```

---

# Hugo list vs single templates

---

# 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
```

---

# ⏱ To configure your new Hugo site!

---

background-image: url(img/stars.jpg)
background-position: 50% 20%
background-size: 30%
background-color: #ffffff

# Why Hugo Apéro?

---

# Hugo themes

- [Hugo themes](https://themes.gohugo.io/)

- [Computing for the Social Sciences](https://cfss.uchicago.edu/)
- <https://www.drcathicks.com/>
- <https://amber.rbind.io/>
- <https://third-bit.com/>
- <https://malco.io/>
- <https://isabella-b.com/>
- <https://www.allisonhorst.com/>
- <https://juliasilge.com/>
- <https://www.silviacanelon.com/>

---
class: activity

# ⏱ To your site!

Make it yours: customize the home + about pages

---

background-image: url(img/goodnight-site.jpg)
background-position: 50% 20%
background-size: 50%
background-color: #ffffff

# Why blogdown?

---

# Why blogdown?

Checking functions ✔️

```r
check_config()
check_gitignore()
check_hugo()
check_content()
check_netlify()
check_site()
```

Hugo versioning system

[`.Rprofile` for custom experience ](https://bookdown.org/yihui/blogdown/global-options.html)

---
class: activity

# ⏱ To your site!

Run checks, or add/edit content.