Summer of Blogdown

class: title-slide, top, left
background-image: url(../assets/edoardo-busti-297725-unsplash.jpg)
background-size: cover

# Summer of Blogdown

### Alison Hill

.footnote[
<img src="../assets/RStudio-Logo-White.png" alt="rstudio" style="float:left;width:150px;"/>
]

---
name: hello
class: inverse, right, middle

# Find me at...

[<i class="fab  fa-twitter "></i> @apreshill](http://twitter.com/apreshill)  
[<i class="fab  fa-github "></i> @apreshill](http://github.com/apreshill)  
[<i class="fas  fa-link "></i> alison.rbind.io](https://alison.rbind.io)  
[<i class="fas  fa-paper-plane "></i> alison@rstudio.com](mailto:alison@rstudio.com)

---
class: middle, inverse

# Day 01 review

+ Discussed `blogdown` selling points 💡

+ Got to know our Hugo installation 👋

+ Used Hugo to build a website in RStudio 💪

+ Deployed a website using Netlify 🚀

+ Learned that all Hugo themes are GitHub repositories 🤷‍♀

+ Learned that when you serve site, R + Hugo = 💫 -> `public/` (❌ TOUCH!)

+ Alison mused about the false lure of Hugo theme "simplicity" 🧘

---

# Day 02 homework review

+ the `config.toml`- what changed here? ([docs](https://gohugo.io/getting-started/configuration/#all-configuration-settings))

+ `config/_default/params.toml`- what changed here? ([docs](https://gohugo.io/variables/site/#the-site-params-variable))

+ `config/_default/menus.toml`- what changed here? ([docs](https://gohugo.io/content-management/menus/#add-non-content-entries-to-a-menu))

---
class: middle, inverse

# Day 02 review

+ Used version control via GitHub

+ Used continuous deployment via Netlify

+ Personalized your `about.md` page (social links, bio, interests, education)

+ Practiced making changes, serving site, push to GitHub, + 💥 deploy

+ Learned a bit about Hugo `content/` ➡️ sections ➡️ pages

+ Learned a bit about TOML vs YAML 🍠

+ Played with turning widgets on and off a la Mr. Potato Head 🥔

---
class: inverse, middle, center

# Widgets

![](https://media.giphy.com/media/3orifd2IjZjWVkpC4o/giphy.gif)

---
class: inverse, middle, center

# The hard part is not the <i class="fab fa-r-project"></i> part...

---

# Hugo Pages

```
.
├── authors/            # => https://example.com/authors/
├── example/index.md    # => https://example.com/example/
└── home/               # => https://example.com/
```

---

class: inverse, middle

# .center[✨ Quiz! ✨]

Take a look at two links:

+ My example site for [Kelly Kapowski](https://elastic-haibt-250d4e.netlify.com/)

+ My [content folder](https://github.com/apreshill/kellykapowski/tree/master/content)

Figure out the URL needed to access the content below:

```r
.
├── authors/            # => https://elastic-haibt-250d4e.netlify.com/?
├── authors/jessie.md   # => https://elastic-haibt-250d4e.netlify.com/?
├── authors/kelly.md    # => https://elastic-haibt-250d4e.netlify.com/?
├── authors/lisa.md     # => https://elastic-haibt-250d4e.netlify.com/?
├── book                # => https://elastic-haibt-250d4e.netlify.com/?
├── book/cookbook.md    # => https://elastic-haibt-250d4e.netlify.com/?
└── home/               # => ?
```

---
class: inverse

# Let's chat for 10 minutes!

In pairs, please view each others' sites-discuss the following and add to the shared google doc:

1. What do you love about your site? (pleased with colors? widgets?)

1. What bugs you about your site? (something you couldn't quite get right?)

1. What do you feel like we have glossed over so far that you really want to know or better understand?

1. After 2 days working on your site, what do you understand now about `blogdown`/Hugo/Netlify that confused you at first?

---
class: inverse, middle, center

# Let's edit some content

---

# Things you probably care about

1. Linking within your site to other parts of your site

1. Adding images (where does the file go?)

1. Adding data (where does the file go?)

---

# Relative internal links

All URLS are relative from where you (not from your project root, sadly).

To go up a level from <i class="fas fa-map-pin"></i>: `../`

---
class: middle, inverse

# Test out relative links

Go into your single `.Rmd` post and try these out:

+ `[text](../seehere)` ➡️ links to another post

+ `[text](../../book)` ➡️ links to other content (not home page)

+ `[text](../../#about)` ➡️ links to other content on home page

+ `[text](../../img/hero-academic.png` ➡️ links to a file in your `static/` directory

---

# Adding images

Two ways (to an image in `static/img/`)

--
names: images

.pull-left[

## Way 1: markdown

`![alt text here](../../img/hero-academic.png)`

]

.pull-right[

## Way 2: `knitr`

```r
knitr::include_graphics("../../img/hero-academic.png")
```

]

---
class: middle, center, inverse

# Let's add new content!

---

# Use the new post add-in

---

# Page bundles

We need to activate page bundles to be less frustrating

https://alison.rbind.io/post/2019-02-21-hugo-page-bundles/

---

# Activate page bundles

```r
library(usethis)
edit_r_profile(scope = "project")
```

Then add this line (make sure new line at end + restart R)...

```r
options(blogdown.new_bundle = TRUE)
```

---

Heck, while we are at it (new line at end! + restart R)...

```r
options(blogdown.author = "Kelly Kapowski",
        blogdown.ext = ".Rmd",
        blogdown.subdir = "post",
        blogdown.yaml.empty = TRUE,
        blogdown.new_bundle = TRUE,
        blogdown.title_case = TRUE)

rprofile <- Sys.getenv("R_PROFILE_USER", "~/.Rprofile")

if (file.exists(rprofile)) {
  source(file = rprofile)
}
```

---

# Page Bundles

In the academic theme, any image files named `featured.*` get a special status on the list/single pages- but you can add any other images to a bundle (and therefore a post) too.

.pull-left[

before bundles

```r
content/
├── about
│   ├── index.md
├── post
│   ├── my-post.md
│   └── my-other-post.md
├── static
│   ├── featured-my-post.jpg
│   └── featured-my-other-post.png
│   └── otherimage-my-other-post.jpg
```

]

.pull-right[

after bundles

```r
content/
├── about
│   ├── index.md
├── post
│   ├── my-post
│   │   ├── featured.jpg
│   │   └── index.md
│   └── my-other-post
│   │   ├── featured.png
│   │   ├── other-image.jpg
│   │   └── index.md
```

]