+ - 0:00:00
Notes for current slide
Notes for next slide

Share Your Blogdown Site

Two Ways to Deploy using Netlify

Alison Hill

1 / 38

First:

Build a site with blogdown

2 / 38

First:

Build a site with blogdown

NOW!:

Deploy to Netlify!

2 / 38

I am assuming...

✅ You have a GitHub.com account (sign up for a free account: https://github.com/join)

3 / 38

I am assuming...

✅ You have a GitHub.com account (sign up for a free account: https://github.com/join)

✅ You have a folder on your computer for your R project (you should see an *.Rproj file in there)

3 / 38

I am assuming...

✅ You have a GitHub.com account (sign up for a free account: https://github.com/join)

✅ You have a folder on your computer for your R project (you should see an *.Rproj file in there)

✅ In that folder, you have built a site using blogdown (and you have used the Serve Site add-in!)

3 / 38

I am assuming...

✅ You have a GitHub.com account (sign up for a free account: https://github.com/join)

✅ You have a folder on your computer for your R project (you should see an *.Rproj file in there)

✅ In that folder, you have built a site using blogdown (and you have used the Serve Site add-in!)

✅ You want to share your site now with another human 📢

3 / 38

📢

Go to Netlify.com

http://netlify.com

4 / 38

Click on "Sign up"

5 / 38

Select "GitHub"

Click to "Authorize Netlify"

Recommended: go through the quick start guide

6 / 38

Netlify review so far

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

Netlify review so far

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

Are we all there?

7 / 38

Two ways to make a new site

8 / 38

📢

Way 1:

Drag & Drop to Netlify

9 / 38

"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

10 / 38
11 / 38
12 / 38
13 / 38
14 / 38
15 / 38
16 / 38

📢

Way 2:

Push to GitHub ➡️

Build + Deploy with Netlify

17 / 38

"[The previous] approach is good for those websites that are not updated frequently (or at all). However, it is unlikely that you will not need to update your website, so we introduce a better approach in this section, which will take you a few more minutes to complete the configurations. Once it is properly configured, all you need to do in the future is to update the source repository, and Netlify will call Hugo to render your website automatically."

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

18 / 38

Push PAUSE right here!

  • Have you used Git within RStudio before?
19 / 38

Push PAUSE right here!

  • Have you used Git within RStudio before?

  • Have you ever connected a GitHub repository to an R Project before?

19 / 38

Push PAUSE right here!

  • Have you used Git within RStudio before?

  • Have you ever connected a GitHub repository to an R Project before?

  • Have you ever "pushed" an R project to a GitHub repository?

19 / 38

Push PAUSE right here!

  • Have you used Git within RStudio before?

  • Have you ever connected a GitHub repository to an R Project before?

  • Have you ever "pushed" an R project to a GitHub repository?

  • If the above questions strike fear in your ❤️, please do the work on the next slide until you get to the happy parrots.

    • If you are confident that you have used Git within RStudio before, skip ahead to enjoy the happy parrots.
19 / 38

Happy Git with R

This slide deck will walk you through the online book: https://apreshill.github.io/data-vis-labs-2018/slides/07-prework-slides_blogdown.html#1

20 / 38

Onward!

21 / 38

Using version control with blogdown

Recommend that you add the last lines to your .gitignore file now (the others should already be there if you are working from an R Project):

.Rproj.user
.Rhistory
.RData
.Ruserdata
blogdown
.DS_Store # if a windows user, Thumbs.db instead
public/ # if using Netlify

https://bookdown.org/yihui/blogdown/version-control.html

22 / 38

New site

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

New site from Git

  • Click to authorize Netlify
  • Confirm GitHub password
  • Pick the repository for the R project with your blogdown site in it

24 / 38
25 / 38
26 / 38
27 / 38
28 / 38

Build options

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

29 / 38

Go back to your R project

In R console type:

blogdown::hugo_version()
[1] '0.65.0'
30 / 38

Go back to Netlify in browser

  1. Click show advanced
  2. Create a new variable:
    • the key is HUGO_VERSION
    • the value must be typed like this: 0.41 (I suggest using the same version as your local build to minimize frustration)
  3. Click Deploy site
31 / 38

All together now!

32 / 38

On Netlify

We all have a site currently deployed on Netlify!

33 / 38

On Netlify

We all have a site currently deployed on Netlify!

The random domain names are fun, but links like https://compassionate-bardeen-f2e898.netlify.com and https://jolly-mestorf-343119.netlify.com aren't easy to remember, much less share!

33 / 38

On Netlify

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

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

34 / 38

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

35 / 38

Way 1 (the draggers + droppers)

  • Go back to Netlify.com, click on Deploys, and drag and drop your new public/ folder (don't create a new site!)

36 / 38

Way 2 (the pushers)

  • Commit

  • Push to GitHub

  • Reap the benefits of Way 2 😉

37 / 38

Now go to your site!

38 / 38

First:

Build a site with blogdown

2 / 38
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