Summer of Blogdown

class: title-slide, top, left
background-image: url(../assets/scott-webb-125443-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)

---
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.

---

![](../assets/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

# .shout[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(../assets/amber.png)
background-size: contain

---
background-image: url(../assets/openscapes.png)
background-size: contain

---
background-image: url(../assets/earo.png)
background-size: contain

---
background-image: url(../assets/malcolm.png)
background-size: contain

---
background-image: url(../assets/alison.png)
background-size: contain
  
---
background-image: url(../assets/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]?

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: inverse, middle, center

# Let's jump right in!

---
class: middle, center

---
class: inverse, middle, center

# Step 1

Make a [repo on <i class="fab fa-github fa-lg fa-fw"></i>GitHub](https://happygitwithr.com/new-github-first.html#make-a-repo-on-github-1)

NO `README` + NO `.gitignore` (yet!)

---
class:inverse, middle, center

# Step 2

---
class:inverse, middle, center

# Step 2

Make a [new RStudio project via git clone](https://happygitwithr.com/new-github-first.html#new-rstudio-project-via-git-clone) <br>
    *File > New Project > Version Control > Git*

---
class:inverse, middle, center

# Step 3

---
class:inverse, middle

.left-column[

# Step 3

]

.right-column[

1x per .shout[machine]...

```r
install.packages("blogdown")
```

1x per .shout[work session]...

```r
library(blogdown)
```

1x per .shout[project]...

```r
new_site(theme = "gcushen/hugo-academic", 
         sample = TRUE, 
         theme_example = TRUE, 
         empty_dirs = TRUE,
         to_yaml = TRUE)
```

]

---
class:inverse, middle

# Step 3 😱

https://themes.gohugo.io/academic/

.pull-left[

]

.pull-right[

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

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

then **restart R.**

]

---
class: middle, inverse, center

# Success?

https://academic-demo.netlify.com/

---
class: inverse, middle, center

# ✨ Quiz! ✨

When you call the `new_site()` function, what might the `theme = "gcushen/hugo-academic"` argument refer to?

Hint: https://github.com/gcushen/hugo-academic

---
class: middle, inverse, center

# What are we looking at?

---
class: inverse, middle, center

# ✨ Quiz! ✨

What happens if you edit `public/` directly, or delete the folder altogether, then serve the site again?

Hint: try it! 🔥

---
class: inverse, middle, center

# ✨ Trick question ✨

Should you ever edit files in the `public/` directory?

---
class:inverse, middle, center

# Step 4

---
class: middle, inverse, center

# Step 4 . . . drop `public/`!

.pull-left[

Go here:

https://app.netlify.com/drop

** Leave this webpage open in your browser- you need it for homework**

]

.pull-right[

]

---
class: middle, inverse, center

# What just happened?

---
class: middle, inverse, center

# Mission accomplished

👨‍🎓 Used [Hugo](https://gohugo.io/) via the [Academic theme](https://themes.gohugo.io/academic/) to make a website

💻 Deployed site from our computer to the INTERNET

---
class: middle, inverse, center

# Up next: Day 02

<i class="fab fa-github fa-lg fa-fw"></i> Use GitHub for version control

🚀 Use Netlify for continuous deployment

🎨 Personalizing your site