Lab 07: CS631

class: center, middle, inverse, title-slide

# Lab 07: CS631
## Making a Site in the Tada!-verse <br> Part Deux: Make a Shareable Site
### Alison Hill

---

class: center, middle, inverse

# First:

## Build a site with `blogdown`

# Pre-work:

## Push to GitHub

# NOW!:

## Deploy to Netlify!

---
class: center, middle

# Your pre-work

![](http://happygitwithr.com/img/watch-me-diff-watch-me-rebase-smaller.png)
http://happygitwithr.com

---
class: inverse, middle, center

> "As we just mentioned, Netlify allows you to quickly publish a website by uploading the `public/` folder through its web interface, and you will be assigned a random subdomain `*.netlify.com`. This approach is good for those websites that are not updated frequently (or at all)."

https://bookdown.org/yihui/blogdown/netlify.html

---
# If you didn't do the pre-work...

- Drag + drop your `public/` folder.

- If you did, follow me!

---
class: inverse, middle, center
## Go to Netlify.com

http://netlify.com

---
class: inverse, middle, center
## Click on "Sign up"

---
class: inverse, middle, center
## Select "GitHub"

click to "Authorize Netlify"

Recommended: go through the quick start guide
---
## Netlify review so far

1. Sign up
1. Pick GitHub
1. Authorize Netlify
1. Go through the quick start guide

---
class: inverse, middle, center
# Two ways to make a new site

---
# New site

If you did the pre-work
- Select "New site from Git"
- Under continuous deployment, pick GitHub
<img src="../images/netlify-new-git-site.png" width="80%" style="display: block; margin: auto;" />
---
# New site from Git

- Click to authorize Netlify
- Confirm GitHub password
- Pick your blogdown repository

---
# Build options

1. Leave branch to deploy as master
1. The **build command** is `hugo`
1. The **publish directory** is `public`

---
# Go back to your R project

In R console type:

```r
blogdown::hugo_version()
```

```
[1] '0.41'
```

---
# Go back to Netlify in browser

1. Click `show advanced`
1. Create a `new variable`: 
    - the key is `HUGO_VERSION`
    - the value is `0.40` 
1. Click deploy site
<img src="../images/netlify-adv-build.png" width="80%" style="display: block; margin: auto;" />

---
class: inverse, middle, center

<img src="../images/netlify-first-deploy.png" width="80%" style="display: block; margin: auto;" />
---
# From Netlify

- Click on Site Settings (from overview) --> general

- Click on change site name and try to find a unique one- it will change your domain name to `[your-new-site-name].netlify.com`

---
# Go back to your R project

- Open up `config.toml` and update your `baseurl = "https://[your-new-site-name].netlify.com/"`
    - The final `/` is critical!

- Save

- *Serve your site (if you haven't done this already!)*

- Commit

- Push to GitHub

---
class: middle, inverse, center
# Now go to your site!

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

---
## Add your `xaringan` slides

https://blogdown-demo.rbind.io/2017/09/06/adding-r-markdown-documents-of-other-output-formats/

1. Go to your blogdown project’s root directory and create a new folder called `R`
1. In that `R/` directory, create a new R script called `build.R` that contains 1 line of code that reads: `blogdown::build_dir('static')`
1. Add and save Rmd file(s) to your blogdown project in a new `static/slides/` directory.
1. *Serve your site (if you haven't done this already!)*

---
## Link to your slides

Now that your `xaringan` slides are being rendered by `blogdown`, we have to link to them! If you placed them in `static/slides/`, then you should be able to navigate to the rendered slides at:

- `[your-new-site-name].netlify.com/slides/[name_of_deck].html`

But you can use **relative** links in your `blogdown` site using Markdown links:

- `Here are some of my [slides](slides/slides.html)`

`blogdown` assumes that relative links start in the `static/` directory.

---
## Add link to `home.md`

I added a Markdown link to my `/content/home.md` using this line:

- `Here are some of my [slides](slides/slides.html)`

---
class: inverse, middle, center

# ⚠️

## Going further...

You have gone far enough- you don't *have* to do what is next!

---
## Embed slides within an .Rmd post

You can embed your `xaringan` slides within an .Rmd blog post. Steps:

- Go to `content/blog/2015-07-23-r-rmarkdown.Rmd` (this is just the sample blog post)

- Add an R code chunk and use `knitr::include_url`

```r
knitr::include_url("../../slides/slides.html")
```

- Why this particular file path? Because `knitr` uses the starting directory as where your post lives, so `content/blog/`.
    - The second `../` gets you up one directory, to `content/`
    - The first `../` gets you up one more directory level, to your project root directory

---
## View embedded slides

---
class: center, middle
## Demo to override CSS

---
## Override CSS to make round logo

1. Make a new `static/css/` directory
1. Make a new text file in that directory, I called mine `circle.css` and put this inside

```r
div.header .container .logo {
  max-width: 100px;
  margin-left: -2em;
* border-radius: 50%;
}
```

---
## Demo to override CSS

Go back to the `config.toml`

```r
[params]
dateform = "Jan 2, 2006"
dateformfull = "Mon Jan 2 2006 15:04:05 MST"
description = "Example blog"
copyright = "Copyright © 2015 Ada Lovelace"
# copyrightUrl = "https://creativecommons.org/licenses/by-sa/4.0/"
logofile = "img/logo.jpg"
faviconfile = "img/logo.png"
highlightjs = true
progressively = true
share = true
*extracssfiles = [ "/css/circle.css" ]
```

---
## Override CSS

How did I know to do this? A lot of googling. I finally found an example `config.toml` for the parent theme, Cocoa, here:

- https://github.com/nishanths/cocoa-hugo-theme/blob/master/exampleSite/config.toml