Summer of Blogdown

class: title-slide, top, left
background-image: url(../assets/etienne-girardet-360034-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" 🧘‍♂️

---
class: middle, inverse, center

# Mission not-quite-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

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

🚀 Used Netlify for continuous deployment

---
class: middle, center

---
class:inverse, middle, center

# Step 4

---
class: middle, inverse, center

# Drag & drop deploy

---
class: middle, inverse, center

![](../assets/netlify-dropped.png)

https://elastic-haibt-250d4e.netlify.com

---

# Homework review

+ Netlify linked to GitHub?

+ Used the serve site add-in?

+ Edited `content/authors/admin/_index.md`?

+ Added a profile pic?

👉 Have we all said goodbye to <u>Nelson Bighetti</u> (at least locally)?

---
class: middle, inverse, center

https://elastic-haibt-250d4e.netlify.com

---
class: inverse, middle, center

# ✨ Quiz! ✨

What did you notice was painful about updating your site using this method?

---
class: middle, inverse, center

# Now let's automate 🤖

---
class: middle, inverse, center

# Step 4 🚀

---
class: middle, inverse

# Two more steps

1. Add a `netlify.toml` file

1. Update `.gitignore` file

---

# netlify.toml file

```r
file.create("netlify.toml")
```

Open, then copy & paste:

```js

[build]
  publish = "public"
  command = "hugo"

[context.production.environment]
  HUGO_VERSION = "0.55.6"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"
  
[context.branch-deploy.environment]
  HUGO_VERSION = "0.55.6"
  
[context.deploy-preview.environment]
  HUGO_VERSION = "0.55.6"
```

---

# .gitignore file

```r
.Rproj.user
.Rhistory
.RData
.Ruserdata
*public/
.DS_Store # if a windows user, Thumbs.db instead
```

---
class: middle, center

# Commit + Push to GitHub

.footnote[Shhh...COMMAND+A then space bar to commit all files]

---
class: middle, center

# Link to GitHub in Netlify

---
class: inverse, middle, center

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

https://app.netlify.com/sites/elastic-haibt-250d4e/deploys

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

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

🚀 Used Netlify for continuous deployment

---

class: inverse, middle, center

# ✨ Quiz! ✨

Using continuous deployment, do you need to serve site before committing to GitHub?

--
<br>
Answer: Yes, because Hugo doesn't understand R Markdown.

Generally:

`mypost.Rmd` ➡️ `mypost.html`

`mypost.Rmarkdown` ➡️ `mypost.md`

---
class: middle, center, inverse

# Personalizing your site

---

# This is a Hugo site

```
/Users/alison/rsites/kellykapowski
├── .DS_Store
├── .Rprofile
├── .Rproj.user
├── .git
├── .gitignore
├── archetypes
├── config
├── config.toml
├── content
├── data
├── index.Rmd
├── kellykapowski.Rproj
├── layouts
├── netlify.toml
├── public
├── resources
├── static
└── themes
```

---

# This is the content folder

.pull-left[

```
/Users/alison/rsites/kellykapowski
├── .DS_Store
├── .Rprofile
├── .Rproj.user
├── .git
├── .gitignore
├── archetypes
*├── config
├── config.toml
├── content
├── data
├── index.Rmd
├── kellykapowski.Rproj
├── layouts
├── netlify.toml
├── public
├── resources
├── static
└── themes
```
]

.pull-right[

```
/Users/alison/rsites/kellykapowski/content
├── .DS_Store
├── authors
├── book
├── courses
├── home
├── post
├── privacy.md
├── publication
├── slides
├── talk
└── thebell
```

+ Hugo calls these "sections"
+ Every section has a "page" (usually singular)
+ See also: the top menu navbar 
]

---

class: inverse, middle, center

# ✨ Quiz! ✨

Do you have to include a blog or posts section in your `blogdown` site?

---
class: inverse, middle, center

# Which content?

I recommend all but `slides`!

Also, unless doing a team blog, you probably won't need to add any more `authors`.

---
class: middle, center, inverse

# Edit content

Pick any folder *other than in the `home` folder*- edit content and see what changes via **LiveReload**

---

# This is the home folder

.pull-left[
In the academic theme, these are *widgets*:

+ Portable! Move the `widget.md` file to any other [page](https://sourcethemes.com/academic/docs/managing-content/#create-a-widget-page)
+ Configurable! Think: Mr. Potato Head

]

.pull-right[

```
/Users/alison/rsites/kellykapowski/content/home
├── .DS_Store
├── about.md
├── accomplishments.md
├── books.md
├── contact.md
├── demo.md
├── experience.md
├── featured.md
├── gallery
├── hero.md
├── index.md
├── people.md
├── posts.md
├── publications.md
├── skills.md
├── slider.md
├── tags.md
└── talks.md
```

]

---
class: inverse, middle, center

# Widgets

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

---
class: inverse, middle, center

# Edit your home page

Pick your widgets- I suggest leaving them all in place but setting `active = FALSE` to remove any.

If you delete, they are always in: `themes/hugo-academic/exampleSite/content/home`

Bonus: move a widget to another [page](https://sourcethemes.com/academic/docs/managing-content/#create-a-widget-page). You could, for example, have the `about.md` widget be the **only** active widget on the home page.

---

# Go Deeper

Read more of the [docs](https://sourcethemes.com/academic/docs/page-builder/#personalizing-widgets) for personalizing widgets.