@justinmillar" />

# R-Ladies Gainesville
## Intro. to blogdown
### Justin Millar @justinjmillar @justinmillar
### 2018-10-23

---

# Everyone leaves with a working website

## (hopefully)

---

.column.bg-main1[.content.vmiddle[

# What is blogdown? 
]]
.column[.content[

## Blogdown is a package in R used to make "static" websites
 
## It does not require knowledge of HTML/CSS/JavaScript etc.
 
## Use a program call Hugo to create HTML files from Markdown (.md) and RMarkdown (.Rmd) files
 
## We'll rely on [this great book to get started with blogdown](https://bookdown.org/yihui/blogdown/).
]]

---

# Getting started

### First we'll install the package:

```r
# Install from CRAN
install.packages("blogdown")

# Install development verison from GitHub
devtools::install_github("rstudio/blogdown")
```

### Then we install Hugo using the `blogdown` package

```r
blogdown::install_hugo()
```

---

# A mininal website

```r
blogdown::new_site()
```

#### Blogdown should have made a bunch of files/folders, and your website should be displayed in the Viewer tab.

### Three key files/directories:

### - `config.toml`

### - `content`

### - `public`

---

.column.bg-main1[.content.vmiddle[

# The configuration file: `config.toml` 
]]

```
baseurl = "/"
languageCode = "en-us"
title = "A Hugo website"
theme = "hugo-lithium"

[[menu.main]]
    name = "About"
    url = "/about/"
[[menu.main]]
    name = "GitHub"
    url = "https://github.com/rstudio/blogdown"
[[menu.main]]
    name = "Twitter"
    url = "https://twitter.com/rstudio"
```
### Check out [this chapter](https://bookdown.org/yihui/blogdown/configuration.html) for more info on this file.

]]

---

.column.bg-blue[.content.vmiddle[

# The content folder 
]]

.column[.content[
### The `content` folder contains all of the Markdown and RMarkdown files that will make up the information in our pages:

```
├── _index.md
├── about.md
├── vitae.md
├── post/
│   ├── 2017-01-01-foo.Rmd
│   ├── 2017-01-02-bar.md
│   └── ...
└── ...
```

### These cheatsheets for using Markdown and [RMarkdown](https://www.rstudio.com/wp-content/uploads/2015/02/rmarkdown-cheatsheet.pdf) are really helpful.

]]

---

.column.bg-red[.content.vmiddle[

# The public folder 
]]

.column[.content[
### The `public` folder is where Hugo does it's magic, taking using the `config` file and `content` folder to create your website.

### If you just want to look at your site locally (as in, the files located on your computer), you'll want to open the `index.html` file in the public folder using a web browser.

### Later we will see different ways of using the public folder to host your website online.

]]

---

.column.bg-orange[.content.vmiddle[

# Custom themes 
]]

### There are many different themes Hugo can use to create your site:
 
## [https://themes.gohugo.io/](https://themes.gohugo.io/)
### In my experience, the easist way to use a new theme is to start from scratch. Find a theme from the link above and pass the GitHub repository name to blogdown:

```r
blogdown::new_site(theme = "gcushen/hugo-academic")
```

### You can also use `blogdown::install_theme` to add a theme to an existing site, but this may screw up you config file.

### Also, it's best to start off with a simpler theme in the beginning, which will be easier to convert down the line.

]]

---

.column.bg-indigo[.content.vmiddle[

# Writing a new post/page 
]]

### You'll notice that `blogdown` added some useful RStudio Addins, including "New Post" which runs:

```r
blogdown::new_post_addin()
```

### Running this function will launch a Shiny app were we can specific some information about out posts, which will get placed in the YAML:

```
---
title: Example post
author: My Name
date: '2018-10-23'
slug: example-post
categories:
  - R
tags:
  - R Markdown
---
```
### This is also where we can choose between an RMarkdown file (.Rmd) and a regular Markdown file (.md)

]]

---

.column.bg-green[.content.vmiddle[

# Deploying your site
]]

### Up to this point, our website only exists on our computer. There are [many options for deploying your site](https://bookdown.org/yihui/blogdown/deployment.html), but one of the easiest (and free) ways is to use Netlify

### We'll create a free account (can use Google, Github, etc.), then drag the `public` folder into the Deploy box.

### Next we can change the Domain to something more appropriate under Domain Settings
 
### Note that we'll have to re-drag the `public` folder each time we a change to the site. If you're familiar with git and GitHub, it's better to keep the site in a GitHub repo and point Netlify to the `public` folder. Netlify will automatically reconstruct the site when ever you make a push to the repo.

]]

---
layout: false
class: split-25 with-thick-border

.column.bg-amber[.content.vmiddle[

# Using the static folder

]]

### You can also place files in the static folder, which will then be accessible using your URL. For example, I can place `example-data.csv` in the static folder and then that file can be downloaded at www.my-site.com/example-data.csv.

### WARNING: Hugo will place the files in `static` and place it into `public` when it creates the site, however it has some funny tendencies to overwrite files.

### This means you should be **extra careful** that there are not similarly named files in the `content` and `static` folders.
 
### I've also have some issues with certain themes with the `static` folder, so it may take some troubleshooting

]]

---

# Thanks!!

Notes for current slide

Notes for next slide

R-Ladies GainesvilleIntro. to blogdown

Justin Millar 

@justinjmillar 

@justinmillar
2018-10-23
1 / 13

Everyone leaves with a working website2 / 13

Everyone leaves with a working website(hopefully)2 / 13

What is blogdown?

Blogdown is a package in R used to make "static" websites

It does not require knowledge of HTML/CSS/JavaScript etc.

Use a program call Hugo to create HTML files from Markdown (.md) and RMarkdown (.Rmd) files

We'll rely on this great book to get started with blogdown.

3 / 13

Getting started

First we'll install the package:

# Install from CRAN
install.packages("blogdown")
# Install development verison from GitHub
devtools::install_github("rstudio/blogdown")

Then we install Hugo using the `blogdown` package

blogdown::install_hugo()

4 / 13

A mininal website

blogdown::new_site()

Blogdown should have made a bunch of files/folders, and your website should be displayed in the Viewer tab.

Three key files/directories:

- `config.toml`

- `content`

- `public`

5 / 13

The configuration file: `config.toml`

The `config` file is used to to set the global configurations of your site:

baseurl = "/"
languageCode = "en-us"
title = "A Hugo website"
theme = "hugo-lithium"
[[menu.main]]
    name = "About"
    url = "/about/"
[[menu.main]]
    name = "GitHub"
    url = "https://github.com/rstudio/blogdown"
[[menu.main]]
    name = "Twitter"
    url = "https://twitter.com/rstudio"

Check out this chapter for more info on this file.

6 / 13

The content folder

The `content` folder contains all of the Markdown and RMarkdown files that will make up the information in our pages:

├── _index.md
├── about.md
├── vitae.md
├── post/
│   ├── 2017-01-01-foo.Rmd
│   ├── 2017-01-02-bar.md
│   └── ...
└── ...

These cheatsheets for using Markdown and RMarkdown are really helpful.

7 / 13

The public folder

The `public` folder is where Hugo does it's magic, taking using the `config` file and `content` folder to create your website.

If you just want to look at your site locally (as in, the files located on your computer), you'll want to open the `index.html` file in the public folder using a web browser.

Later we will see different ways of using the public folder to host your website online.

8 / 13

Custom themes

There are many different themes Hugo can use to create your site:

https://themes.gohugo.io/

In my experience, the easist way to use a new theme is to start from scratch. Find a theme from the link above and pass the GitHub repository name to blogdown:

blogdown::new_site(theme = "gcushen/hugo-academic")

You can also use `blogdown::install_theme` to add a theme to an existing site, but this may screw up you config file.

Also, it's best to start off with a simpler theme in the beginning, which will be easier to convert down the line.

9 / 13

Writing a new post/page
You'll notice that blogdown added some useful RStudio Addins, including "New Post" which runs:
blogdown::new_post_addin()

Running this function will launch a Shiny app were we can specific some information about out posts, which will get placed in the YAML:
---
title: Example post
author: My Name
date: '2018-10-23'
slug: example-post
categories:
  - R
tags:
  - R Markdown
---
This is also where we can choose between an RMarkdown file (.Rmd) and a regular Markdown file (.md)
10 / 13

Deploying your site

Up to this point, our website only exists on our computer. There are many options for deploying your site, but one of the easiest (and free) ways is to use Netlify

We'll create a free account (can use Google, Github, etc.), then drag the `public` folder into the Deploy box.

Next we can change the Domain to something more appropriate under Domain Settings

Note that we'll have to re-drag the `public` folder each time we a change to the site. If you're familiar with git and GitHub, it's better to keep the site in a GitHub repo and point Netlify to the `public` folder. Netlify will automatically reconstruct the site when ever you make a push to the repo.

11 / 13

Using the static folder

You can also place files in the static folder, which will then be accessible using your URL. For example, I can place `example-data.csv` in the static folder and then that file can be downloaded at www.my-site.com/example-data.csv.

WARNING: Hugo will place the files in `static` and place it into `public` when it creates the site, however it has some funny tendencies to overwrite files.

This means you should be extra careful that there are not similarly named files in the `content` and `static` folders.

I've also have some issues with certain themes with the `static` folder, so it may take some troubleshooting

12 / 13

Thanks!!

13 / 13

Everyone leaves with a working website2 / 13

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Esc	Back to slideshow

R-Ladies Gainesville

Intro. to blogdown

Justin Millar @justinjmillar @justinmillar

2018-10-23

Everyone leaves with a working website

Everyone leaves with a working website

(hopefully)

What is blogdown?

Blogdown is a package in R used to make "static" websites

It does not require knowledge of HTML/CSS/JavaScript etc.

Use a program call Hugo to create HTML files from Markdown (.md) and RMarkdown (.Rmd) files

We'll rely on this great book to get started with blogdown.

Getting started

First we'll install the package:

Then we install Hugo using the blogdown package

A mininal website

Blogdown should have made a bunch of files/folders, and your website should be displayed in the Viewer tab.

Three key files/directories:

- config.toml

- content

- public

The configuration file: config.toml

The config file is used to to set the global configurations of your site:

Check out this chapter for more info on this file.

The content folder

The content folder contains all of the Markdown and RMarkdown files that will make up the information in our pages:

These cheatsheets for using Markdown and RMarkdown are really helpful.

The public folder

The public folder is where Hugo does it's magic, taking using the config file and content folder to create your website.

If you just want to look at your site locally (as in, the files located on your computer), you'll want to open the index.html file in the public folder using a web browser.

Later we will see different ways of using the public folder to host your website online.

Custom themes

There are many different themes Hugo can use to create your site:

https://themes.gohugo.io/

In my experience, the easist way to use a new theme is to start from scratch. Find a theme from the link above and pass the GitHub repository name to blogdown:

You can also use blogdown::install_theme to add a theme to an existing site, but this may screw up you config file.

Also, it's best to start off with a simpler theme in the beginning, which will be easier to convert down the line.

Writing a new post/page

You'll notice that blogdown added some useful RStudio Addins, including "New Post" which runs:

Running this function will launch a Shiny app were we can specific some information about out posts, which will get placed in the YAML:

This is also where we can choose between an RMarkdown file (.Rmd) and a regular Markdown file (.md)

Deploying your site

Up to this point, our website only exists on our computer. There are many options for deploying your site, but one of the easiest (and free) ways is to use Netlify

We'll create a free account (can use Google, Github, etc.), then drag the public folder into the Deploy box.

Next we can change the Domain to something more appropriate under Domain Settings

Note that we'll have to re-drag the public folder each time we a change to the site. If you're familiar with git and GitHub, it's better to keep the site in a GitHub repo and point Netlify to the public folder. Netlify will automatically reconstruct the site when ever you make a push to the repo.

Using the static folder

You can also place files in the static folder, which will then be accessible using your URL. For example, I can place example-data.csv in the static folder and then that file can be downloaded at www.my-site.com/example-data.csv.

WARNING: Hugo will place the files in static and place it into public when it creates the site, however it has some funny tendencies to overwrite files.

This means you should be extra careful that there are not similarly named files in the content and static folders.

I've also have some issues with certain themes with the static folder, so it may take some troubleshooting

Thanks!!

Everyone leaves with a working website

Help

Justin Millar

@justinjmillar

@justinmillar

Then we install Hugo using the `blogdown` package

- `config.toml`

- `content`

- `public`

The configuration file: `config.toml`

The `config` file is used to to set the global configurations of your site:

The `content` folder contains all of the Markdown and RMarkdown files that will make up the information in our pages:

The `public` folder is where Hugo does it's magic, taking using the `config` file and `content` folder to create your website.

If you just want to look at your site locally (as in, the files located on your computer), you'll want to open the `index.html` file in the public folder using a web browser.

You can also use `blogdown::install_theme` to add a theme to an existing site, but this may screw up you config file.

You'll notice that `blogdown` added some useful RStudio Addins, including "New Post" which runs:

We'll create a free account (can use Google, Github, etc.), then drag the `public` folder into the Deploy box.

You can also place files in the static folder, which will then be accessible using your URL. For example, I can place `example-data.csv` in the static folder and then that file can be downloaded at www.my-site.com/example-data.csv.

WARNING: Hugo will place the files in `static` and place it into `public` when it creates the site, however it has some funny tendencies to overwrite files.

This means you should be extra careful that there are not similarly named files in the `content` and `static` folders.

I've also have some issues with certain themes with the `static` folder, so it may take some troubleshooting