Curating Collections

class: title-slide, center, middle

# Curating Collections

## Young Statisticians Conference 2019

### Alison Hill &#183; RStudio

#### [https://ysc-rmarkdown.netlify.com/](https://ysc-rmarkdown.netlify.com/)

---
layout: true

<div class="my-footer"><span>https://ysc-rmarkdown.netlify.com/</span></div>

---
name: blogdown
class: inverse, middle, center

# What is blogdown?

---
template: blogdown

---
template: blogdown

An <i class="fab fa-r-project"></i> package...

that lets you create websites in

???

So what is blogdown?

It is an R package... can I get a show of hands for everyone here who uses R? OK keep them up...

That lets you create websites in RStudio...can I get all of you R users to keep your hand up if you use RStudio, so lower your hand if you don't use RStudio

Perfect, thanks! So this is one of the first perks of blogdown, which is that you can build a website in the RStudio IDE using tools you are familiar with, and you won't need very much else to start.

---

![](images/hugo-themes.gif)

???

The package helps you to use a static site generator named Hugo. If you didn't understand much of the last sentence I said, that is OK! The main thing you'll want to know is that Hugo gives you over 100 themes to choose from, so you can create a custom-looking website, in the same way that Wordpress offers website themes.

One difference here is that you own your content, and the entire pipeline for creating it, from start to finish, which I think is a huge benefit to users. You control what, you control when, you control how.

---
class: center, middle, inverse

# 💰 BONUS 💰

# You can use R Markdown!

???

And a bonus is that because blogdown is built on top of R Markdown, you can include code and output in your website content.

This means you can include R code, but also Python, Julia, C++, any language engine supported in R Markdown.

This makes blogdown ideal for data scientists.

So what does a blogdown site look like?

---
background-image: url(images/awesome-blogdown/amber.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/openscapes.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/earo.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/desiree.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/maya.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/dewey.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/joyce.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/therese.png)
background-size: contain

---
background-image: url(images/awesome-blogdown/dan.png)
background-size: contain
  
---
background-image: url(images/awesome-blogdown/emi-showcase.gif)
background-size: cover

---
class: inverse, middle, center

# ✨ Quiz! ✨

For <i class="fab fa-r-project"></i> users, why `blogdown` instead of [WordPress, Tumblr, Medium.com, Blogger.com]?

Chat with a neighbor.

Some answers:

+ Own your content
+ Use R Markdown to create content (CODE CHUNKS)
+ Integrated within RStudio (my happy place)
+ Hugo themes
+ Is not Jekyll / PHP
+ Agnostic to publishing platform (= portable)

---
class: inverse, middle

# What does it actually do?

.left-column[

]

.right-column[

```r
install_hugo()

hugo_version()

update_hugo() 
```
]

---
class: inverse, middle

# What does it actually do?

.left-column[

]

.right-column[

```r
new_site()

new_content() # via add-in

serve_site() # ditto, via add-in
```

]

---
class: middle, inverse, center

# 🏊

---
class: middle, center, inverse

# Go here

https://github.com/ysc2019-workshop/04-blogdown

---
class: middle, inverse, center

# 🚀

---
class: middle, center

---
class: live-code

# Clone locally

I'll demo cloning my freshly deployed site repo into RStudio.

We'll serve site and pray...

```r
# is your version less than the minimum version?
hugo_version()

# if yes, then do this + restart
update_hugo(force = TRUE)
```

---
class: middle, center

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

---
class: middle, center

---
class: live-code

# The host's home tour

What to touch, and what not to touch.

---
class: your-turn

# Your turn

## Say goodbye to "Nelson Bighetti"

Find and edit the file `content/authors/admin/index.md`. If you want, add an `avatar.jpg` file too.

---
class: live-code

# Serve site

---
class: your-turn

# Your turn

Let's start with the last thing you typically do to your home- decorate.

Open up the file `config/_default/params.toml`. Play with any of these configurations, but especially fonts/themes. You can see the ones designed by [Desirée De Leon](http://desiree.rbind.io/) in the `data/` folder.

<div class="countdown" id="timer_5d913504" style="right:0;bottom:0;" data-warnwhen="0">
<code class="countdown-time"><span class="countdown-digits minutes">05</span><span class="countdown-digits colon">:</span><span class="countdown-digits seconds">00</span></code>
</div>
    
---
background-image: url(images/hugo/1.png)
background-size: cover

---
background-image: url(images/hugo/2.png)
background-size: cover

---
background-image: url(images/hugo/3.png)
background-size: cover

---
background-image: url(images/hugo/4.png)
background-size: cover

---
background-image: url(images/hugo/5.png)
background-size: cover

---
background-image: url(images/hugo/6.png)
background-size: cover

---
background-image: url(images/hugo/7.png)
background-size: cover

---
background-image: url(images/hugo/8.png)
background-size: cover

---
background-image: url(images/hugo/9.png)
background-size: cover

---
background-image: url(images/hugo/10.png)
background-size: cover

---
background-image: url(images/hugo/11.png)
background-size: cover

---
background-image: url(images/hugo/12.png)
background-size: cover

---
class: your-turn

# Your turn

With a partner, take an inventory of the rooms in your homes (in your `content/` folder). 
Which urls do you predict to work? Do they?

If this was easy, which are links are list layouts? Which are a single layouts?

---
class: your-turn

# Your turn

Add new content to your `post/` room. Add series 9!

If this was easy, try adding xaringan slides to `static/slides/`, and link to them in posts.

---
background-image: url(images/hugo/13.png)
background-size: cover
class: inverse, left, middle

# Your

# home

# page

---
class: your-turn

# Your turn

Play with your landing page (`hero.md` text + images).

If this was easy, try activating other widgets; or creating a separate widget page.

---
class: middle, center, inverse

# Time to wrap-up!