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

• Drag + drop your public/ folder.

• If you did, follow me!

Netlify review so far

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

New site

If you did the pre-work

• Select "New site from Git"
• Under continuous deployment, pick GitHub

New site from Git

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

Build options

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

Go back to your R project

In R console type:

blogdown::hugo_version()

[1] '0.41'

Go back to Netlify in browser

1. Click show advanced
2. Create a new variable:
   • the key is HUGO_VERSION
   • the value is 0.40
3. Click deploy site

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

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
2. In that R/ directory, create a new R script called build.R that contains 1 line of code that reads: blogdown::build_dir('static')
3. Add and save Rmd file(s) to your blogdown project in a new static/slides/ directory.
4. 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)

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

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

Override CSS to make round logo

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

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

Demo to override CSS

Go back to the config.toml

[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