class: split-40 background-image: url("bkgs/bg1.jpg") background-size: cover .col_t1[ ] .col_t1.shade_main.add-left-border[ # .yellow[Getting down and up with blogging in
<i class="fab fa-r-project fa-2x faa-pulse animated "></i>
] --- ## [Emi Tanaka](https://emitanaka.github.io) ### 28th August 2018 ### School of Mathematics and Statistics ### University of Sydney ### [
<i class="fab fa-twitter faa-float animated " style=" color:#00aced;"></i>@statsgen
](http://twitter.com/statsgen) * These slides are best viewed on Chrome. * Links to these slides provided at the end. ] <img src="images/website.png" width="30%" style="opacity:0.7;position:absolute;left:5%; top:0%;"/> <img src="images/R-LadiesGlobal-transparent.png" width="8%" style="opacity:0.7;position:absolute;left:2%; top:83%;"/> <img src="images/USydLogo-black.svg" width="18%" style="opacity:0.7;position:absolute;left:80%; top:80%; z-index:50;"/> --- class: bgcolor_main white center <br><br> ## There are better resources than this such as ## [Alison Hill's comprehensive workshop slides.](https://alison.rbind.io/slides/blogdown-workshop-slides.html) -- ![](images/get_started.gif) ## I hope that this at least encourages you to get started! --- class: split-40 .column_t2.bgcolor_main[.center.vmiddle[ #.purplelight[Why] #.fsize105.yellow[**blog**] ]] <div class="column_t2" style="background-image:url(images/pic1.jpg); background-size:cover"> .vmiddle[ .speech-bubble.speech-right.boxshadow.pushfront3[ Organise your thoughts and learn! ] <br><br> .speech-bubble.speech-left.boxshadow[ Tell your story! ] <br><br> .speech-bubble.speech-right.boxshadow[ Create opportunities! ] ]] </div> ??? - You can learn to write - Shape your own narrative - Getting job offers --- class: split-40 nopadding .column_t2.bgcolor_main[.vmiddle.center[ #.purplelight[Why] #.fsize105.yellow[**blog**] #.purplelight[with
] ]] <div class="column_t2" style="background-image:url(images/pic2.jpg); background-size:cover"> .speech-bubble.boxshadow.left.speech-right[ Blogging with R is done using the .yellow[blogdown] package. ] .speech-bubble.boxshadow.left.speech-right[ Blogging with .yellow[blogdown] is useful if your blog includes R code or analysis. ] .speech-bubble.boxshadow.left.speech-right[ It is using Hugo to built websites. ] .speech-bubble.boxshadow.left.speech-right[ It doesn't have to be for blogs. You can use it to make a general purpose website! ] .speech-bubble.boxshadow.left.bgcolor_alert[ .yellow[blogdown] helps (extremely) by streamlining the process to built websites that include R Markdown output. ] </div> --- class: split-30 nopadding background-image: url( bkgs/bg15.jpg ) background-size: cover .column_t2.center[.vmiddle[ ]] .column_t2[.vmiddle.nopadding[ .shadelightdark1[.boxtitle1.animateSlideInFromRight[ ### # .fsize95[Quick intro to <br>.yellow[R Markdown]] ### #### #### ]] ]] --- class: split-50 .column_t2.shade_main[ # .center[An R Markdown document] .boxtitle1[ ````markdown --- title: "A Simple Regression" author: "Yihui Xie" output: html_document --- We built a linear regression model. ```{r} fit <- lm(dist ~ speed, data = cars) b <- coef(fit) plot(fit, 1) ``` The *slope* of the regression is **`r b[2]`**. ```` ] ] .column_t2[ .fig[![](images/knitr_output.png)] ] <img class="hoverborder" src="images/knitting.svg" width="5%" style="position:absolute; top:25%; left: 40%; padding:0.3em"> <div style="border:solid; border-color:black; position:absolute; top:80%; left:49%; font-size:36px; padding:4px; background-color:white; color:black;transform:rotate(-10deg);"> Live Demo! </div> --- class: split-50 .column_t2.shade_main[ # .center[RPubs] <div class="speech-bubble speech-right">Don't want yet to commit to publishing a whole website?</div> <div class="speech-bubble speech-left">You can just publish your R Markdown html output to RPubs!</div> <div class="speech-bubble" style="text-align:left; width:80%;"> <ol> <li>Knit your R Markdown html output</li> <li>Push Publish from the Viewer pane</li> .fig[![](images/publish2.png)] <ol> </div> .boxtitle1[ ### Published at https://rpubs.com/emitanaka/411714 ] ] .column_t2[ .fig[![](images/rpubs.png)] ] <div style="border:solid; border-color:black; position:absolute; top:80%; left:49%; font-size:36px; padding:4px; background-color:white; color:black;transform:rotate(-10deg);"> Live Demo! </div> --- class: split-30 nopadding background-image: url( bkgs/bg3.jpg ) background-size: cover .column_t2.center[.vmiddle[ ]] .column_t2[.vmiddle.nopadding[ .shadelightdark1[.boxtitle1.animateSlideInFromRight[ ### # .fsize95[How to use `blogdown`] ### ### #### #### ]] ]] --- class: center middle bgcolor_main # Getting .yellow[**Started**] <br><br> <code style="font-size:40px;background-color:black;padding:20px;border-color:yellow;opacity:1;border-style: solid;border-width: 5px;">install.packages("blogdown")</code> <div class="animateSlideTextR" style="border:solid; border-color:black; position:absolute; top:80%; left:70%; font-size:36px; padding:4px; background-color:white; color:black;transform:rotate(-20deg);"> Yup! Live Demo Time! </div> --- class: bgcolor_main .center[![](images/newblog.png)] .shadelightdark.bottom_abs[.boxtitle1.noborder.center[ ## .blue[RStudio] | File > New Project... > ... > Website using blogdown ]] --- class: bkgpos_00 nopadding split-60 background-color: black background-image: url(images/rstudio2.png) background-size: contain .column_t2[.vmiddle[ ]] .col_t1.shade_main[.vmiddle.pushfront.defaultalign[ ##.fonth5[RStudio] .fonth5[ .dot[1] Editor Window <br> .dot[2] Console <br> .dot[3] Addins <br> .dot[4] Files <br> .dot[5] Viewer Pane <br> .dot[6] Git <br> .dot[7] Terminal ] ]] --- class: split-50 nopadding bgcolor_main .column_t2[.pushfront.defaultalign[ .fullcode[ ```toml baseurl = "/" languageCode = "en-us" title = "A Hugo website" theme = "hugo-lithium" googleAnalytics = "" disqusShortname = "" ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"] [permalinks] post = "/:year/:month/:day/:slug/" [[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" [params] description = "A website built through Hugo and blogdown." # options for highlight.js (version, additional languages, and theme) highlightjsVersion = "9.11.0" highlightjsCDN = "//cdn.bootcss.com" highlightjsLang = ["r", "yaml"] highlightjsTheme = "github" MathJaxCDN = "//cdn.bootcss.com" MathJaxVersion = "2.7.1" [params.logo] url = "logo.png" width = 50 height = 50 alt = "Logo" ``` ] ]] .column_t2.shade_main[.vmiddle.pushfront.defaultalign[ ## .pad1[.dot-large[1] Editor Window] <br><br> ## .pad1.speech-bubble.center[Modify `config.toml` to your own configuration.] ]] --- class: center bgcolor_main # Making a New Post ![](images/addins.png) .shadelightdark.bottom_abs[.boxtitle1.noborder.center[ ## .dot-large[3] Addins > New Post ]] --- class: split-50 bgcolor_main .column_t2[ .fig[![](images/newpost.png)] ] .column_t2.shade_main[ .boxtitle1[ ## .dot-large[1] Editor Window ```markdown --- title: 'Getting down and up with blogging in R ' author: Emi Tanaka date: '2018-08-28' slug: rladmelb-blogdown categories: - R tags: - rladies - blogdown --- ## Why blog? ## Why blog with R? ```{r} plot(speed ~ dist, data=cars) ``` ` ``` ]] --- class: split-50 bgcolor_main .column_t2[ .boxtitle1[ # .center[Local Website Preview] ## .dot-large[2] Console ```r blogdown::serve_site() ``` ## .dot-large[5] Viewer Pane >> ]] .column_t2[ .fig[![](images/blogview.png)] ] --- class: bkgpos_00 nopadding split-40 background-color: black background-image: url(images/rstudio2.png) background-size: contain .col_t1.shade_main[.vmiddle.pushfront.defaultalign[ ##.fonth5[RStudio] .fonth5[ .dot[1] Editor Window <br> .dot[2] Console <br> .dot[3] Addins <br> .dot[4] Files <br> .dot[5] Viewer Pane <br> .dot[6] Git <br> .dot[7] Terminal ] ]] .column_t2[] --- class: split-50 bgcolor_main .column_t2[ .boxtitle1[ ## Where does it get published? #### >> .or1[New Post .Rmd] ```markdown --- title: 'Getting down and up with blogging in R ' author: Emi Tanaka * date: '2018-08-28' * slug: rladmelb-blogdown categories: - R tags: - rladies - blogdown --- ``` #### >> .or1[config.toml] ```toml * baseurl = "/" [permalinks] * post = "/:year/:month/:day/:slug/" ``` ]] .column_t2[ ## .center.shadelightdark.top_abs.top_40[Published at .or1[baseurl/2018/08/28/rladmelb-blogdown]] .fig[![](images/blogview.png)] ] --- class: split-30 nopadding background-image: url( bkgs/bg2.jpg ) background-size: cover .column_t2.center[.vmiddle[ ]] .column_t2[.vmiddle.nopadding[ .shadelightdark1[.boxtitle1.animateSlideInFromRight[ ### # .fsize95[How to .or1[deploy] your website?] ### ### #### #### ]] ]] --- class: split-50 .column_t2.center[ # Select Game Mode <div> <button class="button" onclick="location.href='#easy';" style="opacity:1">Easy</button> <br> <button class="button button2" onclick="location.href='#medium';" style="opacity:1">Medium</button> <br> <button class="button button3" onclick="location.href='#hard';" style="opacity:1">Hard</button> <br> <br><br> <button class="button button4" onclick="location.href='#quit';" style="opacity:1">Quit</button> <br> </div> ] .column_t2.shadelight[ ] --- class: split-50 name: easy .column_t2.center[ # Select Game Mode <div> <button class="button" onclick="location.href='#easy';" style="opacity:1">Easy</button> <br> <button class="button button2" onclick="location.href='#medium';">Medium</button> <br> <button class="button button3" onclick="location.href='#hard';">Hard</button> <br> <br><br> <button class="button button4" onclick="location.href='#quit';">Quit</button> <br> </div> ] .column_t2.shadelight[ # .center[Netlify] ## .center[https://app.netlify.com/] .fonth5[ 1. Sign up to netlify if you don't have an account already. 1. Once you `blogdown::serve_site()`, drag and drop your `public` folder to the region that says .fig[![](images/netlify_drag_drop.png)] at the bottom of https://app.netlify.com/ after logging into your account. ### .or1[Change domain name] 1. Click on your site at https://app.netlify.com/ 1. Site Settings > Site details > Change site name ] ] --- class: split-50 name: medium .column_t2.center[ # Select Game Mode <div> <button class="button" onclick="location.href='#easy';">Easy</button> <br> <button class="button button2" onclick="location.href='#medium';" style="opacity:1">Medium</button> <br> <button class="button button3" onclick="location.href='#hard';">Hard</button> <br> <br><br> <button class="button button4" onclick="location.href='#quit';">Quit</button> <br> </div> .pad1[ ### .fira_font.red[Warning: this method does not version control all your site codes!] ] ] .column_t2.shadelight[ # .center[Github Pages] ## .center[https://github.com/] ### .pad1[.or1[Domain: https://username.github.io/]] .fonth5[ 1. Sign up to github if you haven't already. Let's say `username` is your github username. 1. Make a respository called `username.github.io`. 1. Commit and push the content of your `public` folder to `username.github.io` repository. 1. Go to `username.github.io` settings > GitHub Pages > Click None and select 'master branch' > Save. ] ] --- class: split-50 .column_t2.center[ # Select Game Mode <div> <button class="button" onclick="location.href='#easy';">Easy</button> <br> <button class="button button2" onclick="location.href='#medium';" style="opacity:1">Medium</button> <br> <button class="button button3" onclick="location.href='#hard';">Hard</button> <br> <br><br> <button class="button button4" onclick="location.href='#quit';">Quit</button> <br> </div> .pad1[ ### .fira_font.red[Warning: this method does not version control all your site codes!] ] ] .column_t2.shadelight[ # .center[Github Pages] ## .center[https://github.com/] ### .pad1[.or1[Domain: https://username.github.io/site]] .fonth5[ 1. Make a repositary called `site`. 1. Commit and push the content of your `public` folder to `site` repository. 1. Go to `site` settings > GitHub Pages > Click None and select 'master branch' > Save. ] ] --- class: split-50 name: hard .column_t2.center[ # Select Game Mode <div> <button class="button" onclick="location.href='#easy';" >Easy</button> <br> <button class="button button2" onclick="location.href='#medium';" >Medium</button> <br> <button class="button button3" onclick="location.href='#hard';" style="opacity:1">Hard</button> <br> <br><br> <button class="button button4" onclick="location.href='#quit';">Quit</button> <br> </div> ] .column_t2.shadelight[ # .center[Netlify & Github] .fonth5[ 1. (Optional) Add `public/` on a new line in `.gitignore` in your `site` blogdown project folder. 1. Commit and push the content of your `site` (not `public`!) folder to your `site` github repository. 1. Go to https://app.netlify.com/, click on New site from Git > GitHub > Pick a repository. 1. (As needed) Add `New variable` with `Key='HUGO_VERSION'` and `Value='0.42'` (or higher). 1. Deploy site. ] ] --- class: split-70 nopadding background-image: url( bkgs/bg6.jpg ) background-size: cover name: quit .column_t2[.vmiddle.nopadding[ .shadelightdark3[.boxtitle3[ ### # .fsize95[.or1[Blinging] up your website] ### ### #### #### ]] ]] .column_t2.center[.vmiddle[ ]] --- background-color: black background-image: url(images/too-much-makeup-2.gif) background-size: 100% z-index: -1 # .white[ Don't over do it!] <div class='stamp'> </div> .bottom_abs.white[ GIF Source: https://shashasekharan.wordpress.com/2014/04/28/how-much-makeup-is-too-much/] --- class: bkgpos_00 nopadding split-60 background-image: url(images/hugotheme.png) .column_t2[.vmiddle[ ]] .column_t2.shade_main[.vmiddle.pushfront.defaultalign[ .pad1[ ##.fonth5[Custom Theme] .fonth5[ 1. .or1[Choose a website theme at [https://themes.gohugo.io/](https://themes.gohugo.io/)]. 1. Identify github username and theme name. 1. Enter this when making new site (default is .fira_font[yihui/hugo-lithium]). --- Warnings and tips: * Not all sites are compatible with blogdown. * Some are harder to customise. * Give a trial before full investment of your time. ]] ]] <div style="border:solid; border-color:black; position:absolute; top:80%; left:45%; font-size:36px; padding:4px; background-color:white; color:black;transform:rotate(-20deg);"> Live Demo! </div> ??? Put easter egg with a click on academic theme goes to instruction on academic theme. --- class: split-70 nopadding background-image: url( bkgs/bg16.png ) background-size: cover .column_t2[.vmiddle.nopadding[ .shadelightdark3[.boxtitle3[ ### # .fsize95[.or1[Publicizing] your website] ### ### #### #### ]] ]] .column_t2.center[.vmiddle[ ]] --- class: center middle # Submit your blog to
<img src="images/rblogger.png" style="height:10em; width:auto; "/>
## <a href="https://www.r-bloggers.com/">https://www.r-bloggers.com/</a> --- class: center middle # Submit your posts to
<img src="images/rweekly.jpg" style="height:10em; width:auto; "/>
## <a href="https://rweekly.org/">https://rweekly.org/</a> --- class: center middle # Make an introduction of your website at
<img src="images/rbind2.png" style="height:10em; width:auto; "/>
# after you get a rbind.io domain ## https://support.rbind.io/ ??? The goal of the Rbind project is to provide a service like WordPress and Medium. --- class: center middle # Tweet about your blog post
<i class="fab fa-twitter fa-5x faa-float animated " style=" color:#00aced;"></i>
# with <code>#rstats</code> ## https://twitter.com/ --- class: center middle # Put the url of your website
www
# in your social media profiles
<i class="fab fa-twitter fa-3x faa-vertical animated faa-fast "></i>
<i class="fab fa-facebook fa-3x faa-vertical animated "></i>
<i class="fab fa-linkedin fa-3x faa-vertical animated faa-slow "></i>
<i class="ai ai-academia ai-3x faa-vertical animated "></i>
<i class="fab fa-github fa-3x faa-vertical animated faa-fast "></i>
<i class="fab fa-google-plus fa-3x faa-vertical animated faa-slow "></i>
<i class="fab fa-slack fa-3x faa-vertical animated "></i>
<i class="fab fa-stack-overflow fa-3x faa-vertical animated faa-slow "></i>
<i class="ai ai-researchgate ai-3x faa-vertical animated "></i>
--- class: split-30 nopadding background-image: url( bkgs/bg8.jpg ) background-size: cover .column_t2.center[.vmiddle[ ]] .column_t2[.vmiddle.nopadding[ .shadelightdark1[.boxtitle1.animateSlideInFromRight[ ### # .fsize85[Melbournian blogdown .or1[talents]] ### ### #### #### ]] ]] --- background-color: black background-image: url( bkgs/bg10.png ) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Charles Gray http://cantabile.rbind.io/ ]] --- background-color: black background-image: url( bkgs/bg11.png ) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Earo Wang https://earo.me/ ]] --- background-color: black background-image: url( bkgs/bg14.png ) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Di Cook http://www.dicook.org/ ]] --- background-color: black background-image: url( bkgs/bg13.png ) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Mitchell O'Hara-Wild https://blog.mitchelloharawild.com/ ]] --- background-color: black background-image: url( bkgs/bg12.png ) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Nicholas Tierney https://www.njtierney.com/ ]] --- background-color: black background-image: url(bkgs/bg17.png) background-size: contain .shadelightdark.bottom_abs[.boxtitle1[ # Adam Gruer https://adamgruer.rbind.io/ ]] --- background-color: black background-image: url( bkgs/bg9.png ) background-size: contain .shadelightdark[.boxtitle1[ # Rob J Hyndman https://robjhyndman.com/ ]] --- background-image: url("images/menzies.png") background-size: cover .top_abs[ .pad1[ ## Most of these people seem to inhabit here ] ] .bottom_abs[ .pad1[ ## So maybe camp out here to catch them? ] ] --- class: split-40 nopadding background-image: url("bkgs/bg1.jpg") background-size: cover .column_t2.shadelightblack[.vmiddle.pushfront[ .pad1[ ### Recommended reading .fonth5[ * Xie, Y., Hill, A.H. & Thomas, A. (2017) *blogdown: Creating Websites with R Markdown*. Chapman and Hall/CRC. ] ### Need help? .fonth5[ * Post your question in [stack overflow](https://stackoverflow.com/) or [RStudio Community](https://community.rstudio.com/) with the tag 'blogdown' so the community can answer your question and others can benefit from the answer! ]] ]] .column_t2.shade_main.add-left-border.pushfront[.vmiddle.nopadding[ # .pad1.or1[Happy blogging!] <br> --- ## .pad1[[Emi Tanaka](https://emitanaka.github.io)] ### .pad1[[
<i class="fab fa-twitter faa-float animated " style=" color:#00aced;"></i>@statsgen
](http://twitter.com/statsgen)] ### .pad1[[
<i class="fas fa-link faa-float animated " style=" color:#00aced;"></i> bit.ly/rladies-melb-blogdown
](http://bit.ly/rladies-melb-blogdown)] --- .pad1[ ### These slides were made by
powered by [`xaringan`](https://github.com/yihui/xaringan), `remark.js`, [`icon`](https://github.com/ropenscilabs/icon) and [`anicon`](https://github.com/emitanaka/anicon). ] ]] ] <img src="images/website.png" width="30%" style="opacity:0.7;position:absolute;left:5%; top:0%;"/> <img src="images/R-LadiesGlobal-transparent.png" width="8%" style="opacity:0.7;position:absolute;left:2%; top:83%;"/> <img src="images/USydLogo-black.svg" width="18%" style="opacity:0.7;position:absolute;left:80%; top:85%; z-index:50;"/>