1<!DOCTYPE html> 2<html lang="" xml:lang=""> 3 <head> 4 <title>Build a website with blogdown in R</title> 5 <meta charset="utf-8" /> 6 <meta name="author" content="Tatjana Kecojevic" /> 7 <meta name="date" content="2020-06-16" /> 8 <link href="libs/remark-css/default.css" rel="stylesheet" /> 9 <link href="libs/font-awesome/css/fontawesome-all.min.css" rel="stylesheet" /> 10 <link rel="stylesheet" href="assets/css/my-theme.css" type="text/css" /> 11 <link rel="stylesheet" href="assets/css/my-fonts.css" type="text/css" /> 12 <link rel="stylesheet" href="columns.css" type="text/css" /> 13 </head> 14 <body> 15 <textarea id="source"> 16 17 18 19 20layout: true 21 22<a class="footer-link" href="https://sisteranalyst.org">sisteranalyst.org</a> 23 24--- 25 26class: title-slide, center, bottom 27 28# Build a website with blogdown in R 29 30## ... and HUGO and GitHub in RStudio 31 32### Tatjana Kecojevic &#183; Tijana Blagojev &#183; Katarina Kosmina 33 34--- 35class: inverse, middle 36 37Hi, Welcome to the **<span style="color:#00B2EE">'Build a website with blogdown in R'</span>** workshop. 38 39I'm Tanja!! A Data Scientist with a doctorate in Statistics from [the University of Manchester](https://www.manchester.ac.uk/). I have spent many years working in the U.K. university sector as a senior lecturer. I am the founder of [Sister Analyst](https://sisteranalyst.org), an organisation aiming to empower women from a diverse range of backgrounds through the development and advancment of data skills. [Sister Analyst's website](https://sisteranalyst.org) is just one of the websites I have built using [blogdown](https://cran.r-project.org/web/packages/blogdown/index.html) in [RStudio](https://rstudio.cloud/). 40 41The goal of our workshop is to work through the material and to learn how to use [blogdown](https://cran.r-project.org/web/packages/blogdown/index.html) package to make a website. 42 43--- 44class: freight-slide, center, middle, inverse 45 46.pull-left[ 47### Tatjana Kecojevic 48 49<img style="border-radius: 50%;" src="images/team/Tatjana_Kecojevic.jpg" width="220px"/> 50 51[<i class="fab fa-github "></i> @TanjaKec](https://github.com/tanjakec) 52[<i class="fab fa-twitter "></i> @Tatjana_Kec](https://twitter.com/tatjana_kec) 53 54] 55 56.pull-right[ 57### a few self-knitted websites 58 59[BeoPlace.space](https://beoplace.space/) 60 61[SisterAnalyst.org](https://sisteranalyst.org/) 62 63[Covid-19 SR](https://covid19sr.rbind.io/) 64 65[WiDS Subotica 2020](https://suwids2.netlify.app/) 66 67[Data Literacy](https://dataliteracy.netlify.app/) 68 69[Klik-R](http://klikr.rbind.io/) 70 71[WiDS Subotica 2019](https://widssubotica.netlify.app/) 72 73] 74 75--- 76class: freight-slide, center, middle, inverse 77 78# .emphasis[we are a team] 79 80.pull-left[ 81### Tijana Blagojev 82 83<img style="border-radius: 50%;" src="images/team/Tijana_Blagojev.jpeg" width="225px"/> 84 85[<i class="fab fa-github "></i> @tikiblagojev](https://github.com/tikiblagojev) 86[<i class="fab fa-twitter "></i> @tikiblagojev](https://twitter.com/tikiblagojev) 87 88] 89 90 91.pull-right[ 92### Katarina Kosmina 93 94<img style="border-radius: 50%;" src="images/team/Katarina_Kosmina.jpg" width="250px"/> 95 96[<i class="fab fa-github "></i> @KosmiKatarina](https://github.com/KosmiKatarina) 97[<i class="fab fa-twitter "></i> @KosmiKatarina](https://twitter.com/KosmiKatarina) 98 99] 100 101--- 102class: freight-slide, center, middle, inverse 103 104# .emphasis[we are part of R-Ladies Belgrade] 105 106<img style = "border: 75%;" src="images/team/rladies-r-logo.png" width="225px"/> 107 108[<i class="fab fa-github "></i> @RLadiesBelgrade](https://github.com/RLadiesBelgrade) 109 110[<i class="fab fa-twitter "></i> @RLadiesBelgrade](https://twitter.com/RLadiesBelgrade) 111 112[<i class="fab fa-meetup "></i> @rladies-belgrade](https://www.meetup.com/rladies-belgrade/) 113 114--- 115class: inverse, middle 116.emphasis[Go to <https://github.com/TanjaKec/eRum2020> to download the material.] 117 118<img src="images/materijal/GitHub_link1.png" width="800px" style="display: block; margin: auto;" /> 119 120--- 121class: inverse, center, middle 122 123# .emphasis[Get Started] ð¤«ð´ð¤ 124 125<img 126src=https://media.giphy.com/media/mMSE6MfkXzLLa/giphy.gif align="middle" img width="60%" /> 127 128--- 129 130class: center, middle 131 132#### `blogdown` <- a package based on R Markdown and Hugo 133 134<img src="images/rmd_hugo_blogdown.png" width="600px" /> 135 136--- 137#### .emphasis[So what is blogdown?<sup>*</sup>] 138 139- [R Markdown](https://rmarkdown.rstudio.com) <img src="https://bookdown.org/yihui/rmarkdown/images/hex-rmarkdown.png" width="10%" align="right" /> 140 141 - (relatively) simple syntax for writing documents 142 - simpler and more portable plus it allowes fo multiple output formats 143 - not only convenient (maintenance), but also reproducible 144 - contains most features of R Markdown _and_ [**bookdown**](https://bookdown.org) (technical writing)!! 145 146.footnote[ 147[\*] From Yihui: https://slides.yihui.name/2017-rmarkdown-UNL-Yihui-Xie.html#35. 148] 149-- 150
151- [Hugo](https://gohugo.io) <img src="https://gohugo.io/img/hugo.png" width="10%" align="right" /> 152 153 - free, open-source, and easy to install (a single binary) 154 - lightning fast (generates one page in one millisecond) 155 - general-purpose (not only for blogs) 156 157 158--- 159#### .emphasis[Why not WordPress, Tumblr, Medium.com, Blogger.com, etc?<sup>*</sup>] 160 161- No R Markdown support (even maths support is often nonexistent or awkward) 162 163.footnote[ 164[\*] From Yihui: https://slides.yihui.name/2017-rmarkdown-UNL-Yihui-Xie.html#36. 165] 166-- 167 168- Huge benefits of static websites compared to dynamic websites 169 - all static files, no PHP or databases, no login/password, work anywhere (even offline) 170 171 - typically fast to visit (no computation needed on the server side), and easy to speed up via CDN 172 173--- 174class: inverse, center, middle 175 176# Let us start practising Elaine's Dance!!! ððµð¶ 177<img src="images/Seinfeld/ElainDanceI.png" width="300px" style="display: block; margin: auto;" /> 178 179--- 180## Prep with GitHub 181 182The workshop will not go through [Happy Git with R](http://happygitwithr.com) to connect RStudio with your GitHub account. 183 184<img 185src="http://happygitwithr.com/img/watch-me-diff-watch-me-rebase-smaller.png" align="middle" img width="30%" 186/> 187 188We are going to assume that you are already familiar and have done: 189 190âï¸ Chapter 5: [Register a GitHub account ](http://happygitwithr.com/github-acct.html) 191 192âï¸ Chapter 6: [Install or upgrade R and RStudio ](http://happygitwithr.com/install-r-rstudio.html) 193 194--- 195- Go to your GitHub account and create a new repository 196<img src="images/GitHub/New_Repo.png" width="200px" style="display: block; margin: auto 0 auto auto;" /> 197 198- Give it a meaningful name 199<img src="images/GitHub/Create_New_Repo.png" width="300px" style="display: block; margin: auto;" /> 200 201- Copy repo's **HTTPS** address 202<img src="images/GitHub/HTTPS_GitHub.png" width="350px" style="display: block; margin: auto;" /> 203 204--- 205- Open a new project in RStudio: **File** â¡ï¸ **New Project...** 206<img src="images/GitHub/RS_New_Project.png" width="250px" style="display: block; margin: auto;" /> 207- Select **Version Control** â¡ï¸ **Git** 208<img src="images/GitHub/Select_Version_Control.png" width="250px" style="display: block; margin: auto;" /> 209 210- Paste the address of your Git repo 211<img src="images/GitHub/set_up_git_connection.png" width="250px" style="display: block; margin: auto;" /> 212 213--- 214## Install the packages 215 216Install <span style="color:#EEAD0E">`blogdown`</span>*</sup> 217 218 219```r 220install.packages("blogdown") 221``` 222 223Install <span style="color:#EE1289">`Hugo`</span> using blogdown 224 225```r 226blogdown::install_hugo() 227``` 228 229If you already have those packages installed you can check to update your <span style="color:#EE1289">`Hugo`</span> package 230 231```r 232blogdown::hugo_version() # check version 233blogdown::update_hugo() # force an update 234``` 235 236--- 237## .shadow-text[If you **do need to**] .emphasis[upgrade or reinstall Hugo] 238 239You may use 240 241```r 242blogdown::update_hugo() 243``` 244This is equivalent to 245 246```r 247install_hugo(force = TRUE) 248``` 249 250You can check the installed Hugo version via 251 252 253```r 254blogdown::hugo_version() 255``` 256 257and find the latest version of Hugo at <https://github.com/gohugoio/hugo/releases>. 258 259--- 260class: inverse, center, middle 261# Let's build a website... 262 263<img src="images/Seinfeld/Cosmo.jpg" width="250px" style="display: block; margin: auto;" /> 264 265--- 266#### Build a website 267 268We'll adopt a *simple is beautiful* approach and start building a website using a `default theme`*</sup>. 269 270 271```r 272blogdown::new_site() 273``` 274 275To use a different theme (for example: `hugo-academic`): 276 277 278```r 279blogdown::new_site(theme = "gcushen/hugo-academic", 280 theme_example = TRUE) 281``` 282 283To see the current **Hugo themes** go to <https://themes.gohugo.io/>. 284 285 286--- 287class: freight-slide, center, middle, inverse 288 289 290## .shadow-text[Let the knowledge and familiarity with `blogdown` and `Hugo` grow first.] ð§ 291 292.emphasis[Once you get familiar with `blogdown` and `Hugo` you can always switch to a different theme. 293 294ð 295 296https://bookdown.org/yihui/blogdown/other-themes.html] 297 298--- 299 300## Structure of a HUGO site 301 302.pull-left[ 303<img src="images/blogdown/Site_Structure.png" width="325px" style="display: block; margin: auto;" /> 304] 305.pull-right[ 306 307```r 308. 309| 310âââ archetypes 311*âââ config.toml 312âââ content 313âââ data 314âââ layouts 315âââ static 316âââ themes 317``` 318] 319 320<https://bookdown.org/yihui/blogdown/a-quick-example.html> 321<https://gohugo.io/getting-started/directory-structure/> 322 323--- 324## Serve site 325 326In console type: 327 328```r 329blogdown::serve_site() 330``` 331.pull-left[ 332or, from `Addins` menu select `Serve Site` 333 334<img src="images/blogdown/Serve_Site.png" width="300px" style="display: block; margin: auto;" /> 335] 336 337.pull-right[ 338Don't try to view your site in your small RStudio viewer, instead click on <span style="color:#00B2EE">`Show in new window`</span>. 339 340<img src="images/blogdown/show_in_new_window.png" width="300px" style="display: block; margin: auto;" /> 341] 342 343--- 344### Notation we will adopt: **Trailing slash** 345 346- **Trailing slash** will indicate a directory name, e.g. **`content/`** means we are referring to a directory called *content*, not to a file named *content*. 347 348 349```r 350. 351| 352âââ archetypes 353*âââ config.toml 354 âââ about.md 355 âââ post 356âââ content 357âââ data 358âââ layouts 359âââ static 360âââ themes 361 362``` 363 364--- 365### Notation we will adopt: **Leading slash** 366 367- **Leading slash** will indicate the root directory of your *project website*, e.g. **`/content/about.md`** means we are referring to `about.md` file which is under the root directory of the website project. 368 369 370```r 371. 372| 373âââ archetypes 374*âââ config.toml 375* âââ about.md 376 âââ post 377âââ content 378âââ data 379âââ layouts 380âââ static 381âââ themes 382 383``` 384 385--- 386class: inverse, center, middle 387# Let's edit our website... 388 389<img 390src=https://media.giphy.com/media/l0DEKov4X5Yee3cOI/giphy.gif align="middle" img width="60%" 391/> 392 393--- 394class: inverse, center, middle 395#Step 1: logo ð âï¸ð¡ 396<img src="images/blogdown/logo_eRum2020.png" width="400px" /> 397--- 398###<span style="color:#00B2EE">Step 1:</span> add a logo 399 400The logo file belongs in the `/static/` directory: 401> `/static/` stores all the static content for your future website: images, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. 402 4031. Move `01-images` folder to `/static/` 4042. Rename folder `images` (so now you have a `static/images/` folder with 2 .png files in it) 4053. Update <span style="color:#EE2C2C">`config.toml`</span> and save 406 407```r 408 [params.logo] 409* url = "eRum2020.png" 410 width = 50 411 height = 50 412 alt = "Logo" 413``` 414 415--- 416###<span style="color:#104E8B">Step 1:</span> we've got a logo! 417 418<img src="images/blogdown/logo_page01.png" width="900px" style="display: block; margin: auto;" /> 419 420--- 421## .shadow-text[<span style="color:#4A708B")>Step 1:</span> We've learnt] ð¥ðºð 422 423`/themes/<THEME>/static/images/logo.png` 424
425can be overwritten by 426 427`/static/images/<eRum2020.png>` 428 429Note that this will only work with Hugo templates that have the 'standard' Hugo folder structure.ð¡ 430 431--- 432 433.pull-left[ 434 435```r 436. 437âââ static 438| âââ images 439*| âââ eRum2020.png 440âââ themes 441 âââ hugo-lithium 442 âââ static 443 âââ css 444 âââ favicon.ico 445 âââ fonts 446 âââ images 447 â âââ hugo-logo.png 448 âââ js 449``` 450] 451 452.pull-right[ 453 454```r 455. 456âââ static 457| âââ images 458| âââ eRum2020.png 459âââ themes 460 âââ hugo-lithium 461 âââ static 462 âââ css 463 âââ favicon.ico 464 âââ fonts 465 âââ images 466* â âââ hugo-logo.png 467 âââ js 468``` 469] 470 471--- 472 473class: inverse, center, middle 474#Step 2: about ð âï¸ð¡ 475 476--- 477###<span style="color:#00B2EE">Step 2:</span> update the *about* page 478 4791. Move `02-about.md` file to `/content/` 480 4812. Delete the existing file `about.md` 482 4833. Rename `02-about.md` â `about.md` 484--- 485 486###<span style="color:#104E8B">Step 2:</span> we've got a logo! 487 488<img src="images/blogdown/about_page02.png" width="800px" style="display: block; margin: auto;" /> 489--- 490 491## .shadow-text[<span style="color:#4A708B")>Step 2:</span> We've learnt] ð¥ðºð 492 493>All `content` for your website will live inside this directory. Each top-level folder in Hugo is considered a content section. For example, if your website has two main sections *posts* and *about* page, there will be a directory at `content/posts` and a file `content/about.md`. 494 495<https://gohugo.io/getting-started/directory-structure/> 496 497--- 498 499```r 500. 501âââ config.toml 502âââ content 503*â âââ about.md 504*â âââ post 505âââ index.Rmd 506âââ myblogdown 507âââ public 508âââ static 509âââ themes 510``` 511--- 512class: inverse, center, middle 513#Step 3: emojis ð âï¸ð¡ 514 515--- 516###<span style="color:#00B2EE">Step 3:</span> enable the emojis ðð¤·ð¤¦ 517 518Note the amendments you need to do to the top of your `config.toml` file. 519 520 521```r 522baseurl = "/" 523languageCode = "en-us" 524*title = "My awesome website" 525theme = "hugo-lithium" 526googleAnalytics = "" 527disqusShortname = "" 528ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"] 529*enableEmoji = true 530``` 531 532Save the change and check the *about* page... it should show a â¤ï¸ 533 534--- 535## .shadow-text[<span style="color:#4A708B")>Step 3:</span> We've learnt] ð¥ðºð 536 537> In your `config` file, you can direct Hugo as to how you want your website rendered, control your websiteâs menus, and arbitrarily define site-wide parameters specific to your project. 538 539<https://gohugo.io/getting-started/configuration/> 540 541--- 542class: inverse, center, middle 543#Step 4: navigation bar ð âï¸ð¡ 544 545--- 546###<span style="color:#00B2EE">Step 4:</span> edit your navigation bar 547 548Make the changes to your `config.toml` file: 549 550 551```r 552[[menu.main]] 553 name = "About" 554 url = "/about/" 555* weight = 1 556[[menu.main]] 557* name = "Facebook" 558* url = "https://www.facebook.com/EuropeanRUsersMeeting2020" 559* weight = 2 560[[menu.main]] 561 name = "Twitter" 562* url = "https://twitter.com/erum2020_conf" 563* weight = 3 564``` 565 566Save the changes, Serve Site and check the links. 567 568--- 569## .shadow-text[<span style="color:#4A708B")>Step 4:</span> We've learnt] ð¥ðºð 570 571The `[[menu.main]]` in your `config` file enables you to edit and add navigation options. 572 573> A menu entry in a menu-template has specific variables and functions to make menu management easier. 574 575<https://gohugo.io/variables/menus/> 576 577--- 578class: inverse, center, middle 579 580##Are we starting to feel confortable learning Elaine's moves?! ððµð¶ 581 582<img src="images/Seinfeld/ElainDanceII.png" width="300px" /> 583--- 584class: inverse, center, middle 585#Step 5: css ð âï¸ð¡ 586--- 587###<span style="color:#00B2EE">Step 5:</span> customise the look ð ðð¨ 588 5891) In `/static/` create a new directory `css` and move `05-erum.css` file to `/static/css/` 590 591-- 592.pull-left[
5932) Rename `05-erum.css` --> `erum.css` 594 595```r 596. 597âââ config.toml 598âââ content 599âââ public 600âââ static 601â âââ css 602*â â âââ erum.css 603â âââ images 604â âââ post 605âââ themes 606``` 607] 608 609.pull-right[ 6103) In `config.toml`, add the highlighted line: 611 612 613```r 614[params] 615 description = "A website built through Hugo and blogdown." 616* customCSS = ["css/erum.css"] 617``` 618] 619--- 620###<span style="color:#104E8B">Step 5:</span> we've got a look! 621<img src="images/blogdown/css_page05.png" width="750px" style="display: block; margin: auto;" /> 622 623--- 624## .shadow-text[<span style="color:#4A708B")>Step 5:</span> We've learnt] ð¥ðºð 625 626We have seen that 627 628`/themes/<THEME>/static/css/main.css` 629 630could be overwritten by style rules present in: 631 632`/static/<css/erum.css>` 633 634--- 635 636 637```r 638. 639âââ config.toml 640âââ content 641âââ index.Rmd 642âââ myblogdown 643âââ public 644*âââ static 645*â âââ css 646*â â âââ erum.css 647â âââ images 648â âââ post 649*âââ themes 650* âââ hugo-lithium 651* âââ static 652* âââ css 653* âââ main.css 654``` 655--- 656class: inverse, center, middle 657#Step 6: Font Awesome ð âï¸ð¡ 658--- 659###<span style="color:#00B2EE">Step 6:</span> use Font Awesome 660 661> Font Awesome is a font and icon toolkit based on CSS and LESS. 662 663<https://en.wikipedia.org/wiki/Font_Awesome> 664 665Go [here](https://fontawesome.com/v4.7.0/get-started/) to enter your email address and receive a Font Awesome embed code. We'll use the one you've downloaded with the workshop bundle for today's demo. 666 667To use them, you need 2 things: 668 669- the Font Awesome CSS file, and 670 671- a script that directs your site to where the fonts can be found (via Font Awesome's Content Delivery Network, or CDN) 672 673--- 674###<span style="color:#00B2EE">Step 6:</span> use Font Awesome 675 6761a) Move 06-font-awesome.min.css to `/static/css/` 677 6782a) Rename `06a-font-awesome.min.css` --> `font-awesome.min.css` 679 6803b) Create a new directory `layouts/` and within it create a subdirectory called `partials` 681 6824b) Move other `06b-head_custom.html` and `06b-nav.html` to `/layouts/partials/` and renamed the files by removing `06b-` from their names. 683 684--- 685 686```r 687. 688âââ config.toml 689âââ content 690âââ index.Rmd 691*âââ layouts 692*â âââ partials 693*â âââ head_custom.html 694*â âââ nav.html 695âââ myblogdown 696âââ public 697*âââ static 698*â âââ css 699*â â âââ fontawesome.min.css 700â âââ images 701â âââ post 702âââ themes 703 704``` 705--- 706###<span style="color:#00B2EE">Step 6:</span> Make changes to these sections in your `config.toml`: 707 708```r 709[[menu.main]] 710 name = "About" 711* pre = "" 712 url = "/about/" 713 weight = 1 714[[menu.main]] 715 name = "Facebook" 716* pre = "fa-facebook-square" 717 url = "https://www.facebook.com/EuropeanRUsersMeeting2020" 718 weight = 2 719[[menu.main]] 720 name = "Twitter" 721* pre = "fa-twitter-square" 722 url = "https://twitter.com/erum2020_conf" 723 weight = 3 724``` 725--- 726###<span style="color:#00B2EE">Step 6:</span> Make changes to these sections in your `config.toml`: 727 728 729```r 730. 731. 732. 733 734[params] 735 description = "A website built through Hugo and blogdown." 736* customCSS = ["css/erum.css", "css/font-awesome.min.css"] 737``` 738 739--- 740###<span style="color:#104E8B">Step 6:</span> look at our awesome font and icons! 741 742<img src="images/blogdown/overview_fontawsome06.png" width="700px" style="display: block; margin: auto;" /> 743 744--- 745## .shadow-text[<span style="color:#4A708B")>Step 6:</span> We've learnt] ð¥ðºð 746 747`/themes/<THEME>/layouts/partials/*<PARTIALNAME>.html` 748 749Could be overwritten by: 750 751`/layouts/partials/*<PARTIALNAME>.html` 752 753The `<PARTIALNAME>`s must match; unless you want to edit how the partials are called within your templates: 754 755 `{{ partial "<PATH>/<PARTIAL>.html" . }}` 756 757https://gohugo.io/templates/partials/ 758 759--- 760 761```r 762*âââ layouts 763*â âââ partials 764*â âââ head_custom.html 765*â âââ nav.html 766. 767*âââ themes 768* âââ hugo-lithium 769* âââ layouts 770* âââ partials 771 âââ disqus.html 772 âââ footer.html 773 âââ footer_highlightjs.html 774 âââ footer_mathjax.html 775 âââ head.html 776* âââ head_custom.html 777 âââ head_highlightjs.html 778 âââ header.html 779* âââ nav.html 780``` 781--- 782class: inverse, center, middle 783#Step 7: homepage ð âï¸ð¡ 784--- 785###<span style="color:#00B2EE">Step 7:</span> create a homepage 786 787Where to move the file `07-index.html`? 788 7891) Move `07-index.html` to `/layouts/`<sup>*</sup> 790 7912) Rename `07-index.html` to `index.html` 792 7933) Edit the `config.toml` file 794 795 796```r 797[params] 798 description = "A website built through Hugo and blogdown. We can add any text we would like to appear on our home page. This is my first website design using blogdown in R at a workshop with Tanja. ð " 799 chapter = "Milan, June 2020"
800 customCSS = ["css/erum.css", "css/font-awesome.min.css"] 801``` 802 803.footnote[ 804[*] NOT to /layouts/partials/ 805] 806--- 807###<span style="color:#104E8B">Step 7:</span> look at our home page! 808 809<img src="images/blogdown/overview_homepage07.png" width="750px" style="display: block; margin: auto;" /> 810--- 811## .shadow-text[<span style="color:#4A708B")>Step 7:</span> We've learnt] ð¥ðºð 812 813Even when there is no `index.html` file here: `/themes/<THEME>/layouts/index.html` 814 815-- 816We can make one that serves as the homepage here: `/layouts/index.html` 817 818 819```r 820. 821*âââ layouts 822*â âââ index.html 823*â âââ partials 824. 825*âââ themes 826* âââ hugo-lithium 827* âââ layouts 828 âââ _default 829 âââ partials 830``` 831 832--- 833## .shadow-text[<span style="color:#4A708B")>Step 7:</span> We've learnt] ð¥ðºð 834 835The filename `index.html` has special status in Hugo, and is **not** a partial layout template. 836 837You could also force a homepage by creating an `_index.md` file that lives at the root of your `/content/` folder (i.e., `/content/_index.md`) 838 839<https://gohugo.io/templates/homepage/> 840--- 841class: inverse, center, middle 842#Step 8: posts ð âï¸ð¡ 843--- 844###<span style="color:#00B2EE">Step 8:</span> adding a post 845 846Add a post section to your navigation bar by adding the highlighted lines to your `config.toml` file. 847 848 849```r 850. 851. 852. 853[[menu.main]] 854 name = "Twitter" 855 pre = "fa-twitter-square" 856 url = "https://twitter.com/erum2020_conf" 857 weight = 3 858*[[menu.main]] 859* name = "Posts" 860* pre = "fa-bullhorn" 861* url = "/post/" 862* weight = 4 863``` 864--- 865###<span style="color:#104E8B">Step 8:</span> we've got a link for the posts! 866 867 868<img src="images/blogdown/overview_post08.png" width="800px" style="display: block; margin: auto;" /> 869 870--- 871###<span style="color:#00B2EE">Step 8:</span> write a post âï¸ 872Go to `Addins` and select `New Post` to which you are going to add the properties 873.pull-left[ 874<img src="images/blogdown/add_a_post.png" width="350px" style="display: block; margin: auto;" /> 875] 876.pull-right[ 877<img src="images/blogdown/create_a_post.png" width="300px" style="display: block; margin: auto;" /> 878] 879 880You can start writing your post as an R Markdown file ð 881<img src="images/blogdown/edit_write_post.png" width="300px" style="display: block; margin: auto;" /> 882 883--- 884###<span style="color:#104E8B">Step 8:</span> we've got our first posts! 885 886<img src="images/blogdown/overview_post01.png" width="750px" style="display: block; margin: auto;" /> 887 888--- 889###<span style="color:#00B2EE">Step 8:</span> removing the `default` posts 𤷠890 891Click on the `Files` tab and navigate to the `/content/post/` directory to get the list of the *posts files* 892 893-- 894 895Select the ones you don't want and click on `Delete` â. 896 897<img src="images/blogdown/delete_posts.png" width="250px" style="display: block; margin: auto;" /> 898-- 899 900`Serve Site` to have a look 901 902```r 903blogdown::serve_site() 904``` 905 906--- 907###<span style="color:#104E8B">Step 8:</span> look at your posts! 908 909<img src="images/blogdown/overview_posts02.png" width="1000px" style="display: block; margin: auto;" /> 910--- 911## .shadow-text[<span style="color:#4A708B")>Step 8:</span> We've learnt] ð¥ðºð 912 913Adding a post is easy by selecting the option `New Post` from the `Addins` drop-down menu and writing it as a `.Rmd` file. This file will be automatically placed inside the `/content/posts/` directory: `/content/posts/2020-05-23-my-first-post.Rmd` 914 915 916```r 917. 918âââ config.toml 919*âââ content 920*â âââ post 921*â âââ 2020-05-23-my-first-post.Rmd 922*â âââ 2020-05-23-my-first-post.html 923âââ data 924âââ layouts 925âââ static 926âââ themes 927 928``` 929 930--- 931class: inverse, center, middle 932 933##Let's do Elaine's Dance!!! ððµð¶ 934 935<img 936src=https://media.giphy.com/media/13Y6LAZJqRspI4/giphy.gif align="middle" img width="60%" /> 937 938--- 939 940class: inverse, center, middle 941 942# Deploy your website ð§ 943 944--- 945### Deployment 946 947Click on the `Git` tab and select all of the files to `commit` 948 949<img src="images/GitHub/git_commit.png" width="350px" style="display: block; margin: auto;" /> 950 951<
951img src="images/GitHub/first_commit.png" width="600px" style="display: block; margin: auto;" /> 952--- 953Click to `push` 954 955<img src="images/GitHub/git_push.png" width="700px" style="display: block; margin: auto;" /> 956 957<img src="images/GitHub/git_push01.png" width="500px" style="display: block; margin: auto;" /> 958 959--- 960### Check your Git Repo 961 962<img src="images/GitHub/git_repo.png" width="700px" style="display: block; margin: auto;" /> 963--- 964class: inverse, center, middle 965 966###Congratulations! You are one step away from getting your website up and running!!!! ðð 967 968<img 969src=https://media.giphy.com/media/1ZkMDj88mQ1rO/giphy.gif align="middle" img width="45%" /> 970--- 971### Have you heard about [Netlify](https://www.netlify.com/)? 972 973<img src="images/Netlify/yuhui_xie.png" width="250px" style="display: block; margin: auto;" /> 974 975> Consider Netlify instead of GitHub Pages for Your Static Websites. 976 977> Do not use Github pages or the *.github.io subdomain. Use Netlify instead. Netlify is the new and much better Github pages. 978 979*Yihui Xie* 980 981<https://yihui.name/en/2017/06/netlify-instead-of-github-pages/> 982--- 983 984<img src="images/Netlify/deploy_in_netlify.png" width="700px" style="display: block; margin: auto;" /> 985 986> Deploying in Netlify through GitHub is smooth. 987 988> When you are ready to deploy, commit your changes and push to [GitHub](https://github.com), then go online to [Netlify](https://www.netlify.com/). 989 990*Alison Presmanes Hill* 991 992<https://alison.rbind.io/post/up-and-running-with-blogdown/> 993--- 994Go to [Netlify](https://www.netlify.com/) and open an account (the easiest way is to use your [GitHub](https://github.com) login). 995 996Click on *New site from Git* button 997 998<img src="images/Netlify/new_site_from_git.png" width="300px" style="display: block; margin: auto;" /> 999 1000Select *GitHub* option to *Continue Deployment* 1001<img src="images/Netlify/new_site_from_git1.png" width="300px" style="display: block; margin: auto;" /> 1002 1003*Select the repository* with the website 1004<img src="images/Netlify/new_site_from_git2.png" width="300px" style="display: block; margin: auto;" /> 1005 1006--- 1007Select your site repo and klick on *Deploy site* button at the bottom of the page. 1008 1009<img src="images/Netlify/deploy_site.png" width="500px" style="display: block; margin: auto;" /> 1010--- 1011Deployment might take a few seconds... 1012 1013<img src="images/Netlify/wait_deployment.png" width="500px" style="display: block; margin: auto;" /> 1014 1015Go into *Site Settings* and click on *Change site name*. 1016 1017<img src="images/Netlify/change_site_name.png" width="500px" style="display: block; margin: auto;" /> 1018 1019--- 1020Change the name... 1021 1022<img src="images/Netlify/change_name1.png" width="400px" style="display: block; margin: auto;" /> 1023 1024I'll call it **`myawesomewebsite`** 1025 1026<img src="images/Netlify/change_name1.1.png" width="450px" style="display: block; margin: auto;" /> 1027 1028--- 1029This is it... 1030 1031<img src="images/Netlify/change_name2.png" width="650px" style="display: block; margin: auto;" /> 1032 1033<img src="images/Netlify/myawesomewebsite.png" width="650px" style="display: block; margin: auto;" /> 1034 1035--- 1036 1037<img src="images/Netlify/website_live.png" width="900px" style="display: block; margin: auto;" /> 1038--- 1039 1040A few more things... ð¤ 1041 1042## Final edit of your config.toml: update `baseurl` 1043 1044At the top of the config.toml insert the name of your website 1045 1046 1047```r 1048*baseurl = "https://erum2020tk.netlify.app/" 1049languageCode = "en-us" 1050title = "My awesome website" 1051theme = "hugo-lithium" 1052googleAnalytics = "" 1053disqusShortname = "" 1054ignoreFiles = ["\\.Rmd$", "\\.Rmarkdown$", "_files$", "_cache$"] 1055enableEmoji = true 1056``` 1057--- 1058### Add the netlify.toml File 1059 1060Make the `netlify.toml` file as plain text in the root of your blogdown project directory. 1061 1062``` 1063[build] 1064 publish = "public" 1065 command = "hugo" 1066 1067[context.production.environment] 1068 HUGO_VERSION = "0.69.2" # if older, use format: 0.69.2 (no trailing zero) 1069 HUGO_ENV = "production" 1070 HUGO_ENABLEGITINFO = "true" 1071 1072[context.branch-deploy.environment] 1073 HUGO_VERSION = "0.69.2" # if older, use format: 0.69.2 (no trailing zero) 1074 1075[context.deploy-preview.environment] 1076 HUGO_VERSION = "0.69.2" 1077``` 1078 1079--- 1080### You can host your site as `rbind` subdomain 1081<img src="images/rbind/RBind.png" width="10%" align="left" />
1082[rbind](https://github.com/rbind) - Bind all websites in the `R` and `stats` community. 1083 1084 1085<https://covid19sr.rbind.io/> is an example of what to request if you wish to move your site to [rbind](https://github.com/rbind). 1086<img src="images/RBind/rbind_support.png" width="500px" style="display: block; margin: auto;" /> 1087 1088<https://support.rbind.io/about/> 1089--- 1090 1091### Some useful links 1092 1093- Book: [blogdown: Creating Websites with R Markdown](https://bookdown.org/yihui/blogdown/) 1094by [Yihui Xie](https://yihui.org/en/), [Amber Thomas](https://amber.rbind.io), [Alison Presmanes Hill](https://alison.rbind.io) 1095 1096-- 1097 1098- <https://blogdown-demo.netlify.com> GitHub: <https://github.com/apreshill/blogdown-demo> 1099A minimal website example using the blogdown site by [Alison Presmanes Hill](https://alison.rbind.io): 1100 1101- [Up and running with blogdown](https://alison.rbind.io/post/up-and-running-with-blogdown/#build-your-site-in-rstudio). [Alison's](https://alison.rbind.io/) well structured and easy to follow tutorial higlighting the key steps when building a website using the `blogdown` package. 1102 1103- In the post [A Spoonful of Hugo: The netlify.toml File](https://alison.rbind.io/post/2019-02-19-hugo-netlify-toml/) [Alison](https://alison.rbind.io/) points out that package version mismatches are the leading cause of build failure with Netlify. 1104 1105-- 1106 1107- [Blogdown & Hugo - R Markdown - RStudio Community](https://community.rstudio.com/t/blogdown-hugo/) 1108 1109--- 1110 1111 1112class: inverse, center, middle 1113##Do the Cosmo Dance?! ð¤ªðµð¶ 1114 1115<img 1116src=https://i.gifer.com/B7OF.gif align="middle" img width="50%" 1117/> 1118 1119 1120--- 1121class: inverse, center, middle 1122 1123##Thanks! 1124 1125To Yihui and RStudio for the blogdown package 1126 1127To the rbind group for support 1128 1129Special thanks to Alison for sharing her knowledge and making her material reproducible and freely available. This workshop has been created with Alison's support and it is based on her 'up and running with blogdown tutorial' available at <https://github.com/apreshill/blogdown-workshop> 1130 1131[https://sisteranalyst.org](https://sisteranalyst.org) 1132 1133@SISTERANALYST 1134 1135[tanjakec.github.io](tanjakec.github.io) 1136 1137@Tatjana_Kec 1138 1139 1140Slides created via the `R` package [**xaringan**](https://github.com/yihui/xaringan). 1141 1142The chakra comes from [remark.js](https://remarkjs.com), [**knitr**](http://yihui.name/knitr), and [R Markdown](https://rmarkdown.rstudio.com). 1143 </textarea> 1144<style data-target="print-only">@media screen {.remark-slide-container{display:block;}.remark-slide-scaler{box-shadow:none;}}</style>
1145<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
vendor: 1 bytes, line 1145
1145
1146<script>var slideshow = remark.create({ 1147"highlightStyle": "solarized-light", 1148"highlightLanguage": ["r", "css", "yaml"], 1149"slideNumberFormat": "", 1150"highlightLines": true, 1151"countIncrementalSlides": false, 1152"ratio": "16:9" 1153}); 1154if (window.HTMLWidgets) slideshow.on('afterShowSlide', function (slide) { 1155 window.dispatchEvent(new Event('resize')); 1156}); 1157(function(d) { 1158 var s = d.createElement("style"), r = d.querySelector(".remark-slide-scaler"); 1159 if (!r) return; 1160 s.type = "text/css"; s.innerHTML = "@page {size: " + r.style.width + " " + r.style.height +"; }"; 1161 d.head.appendChild(s); 1162})(document); 1163 1164(function(d) { 1165 var el = d.getElementsByClassName("remark-slides-area"); 1166 if (!el) return; 1167 var slide, slides = slideshow.getSlides(), els = el[0].children; 1168 for (var i = 1; i < slides.length; i++) { 1169 slide = slides[i]; 1170 if (slide.properties.continued === "true" || slide.properties.count === "false") { 1171 els[i - 1].className += ' has-continuation'; 1172 } 1173 } 1174 var s = d.createElement("style"); 1175 s.type = "text/css"; s.innerHTML = "@media print { .has-continuation { display: none; } }"; 1176 d.head.appendChild(s); 1177})(document); 1178// delete the temporary CSS (for displaying all slides initially) when the user 1179// starts to view slides 1180(function() { 1181 var deleted = false; 1182 slideshow.on('beforeShowSlide', function(slide) { 1183 if (deleted) return; 1184 var sheets = document.styleSheets, node; 1185 for (var i = 0; i < sheets.length; i++) { 1186 node = sheets[i].ownerNode; 1187 if (node.dataset["target"] !== "print-only") continue; 1188 node.parentNode.removeChild(node); 1189 } 1190 deleted = true; 1191 }); 1192})(); 1193(function() { 1194 "use strict" 1195 // Replace
1195<script> tags in slides area to make them executable 1196 var scripts = document.querySelectorAll( 1197 '.remark-slides-area .remark-slide-container script' 1198 ); 1199 if (!scripts.length) return; 1200 for (var i = 0; i < scripts.length; i++) { 1201 var s = document.createElement('script'); 1202 var code = document.createTextNode(scripts[i].textContent); 1203 s.appendChild(code); 1204 var scriptAttrs = scripts[i].attributes; 1205 for (var j = 0; j < scriptAttrs.length; j++) { 1206 s.setAttribute(scriptAttrs[j].name, scriptAttrs[j].value); 1207 } 1208 scripts[i].parentElement.replaceChild(s, scripts[i]); 1209 } 1210})(); 1211(function() { 1212 var links = document.getElementsByTagName('a'); 1213 for (var i = 0; i < links.length; i++) { 1214 if (/^(https?:)?\/\//.test(links[i].getAttribute('href'))) { 1215 links[i].target = '_blank'; 1216 } 1217 } 1218})(); 1219// adds .remark-code-has-line-highlighted class to <pre> parent elements 1220// of code chunks containing highlighted lines with class .remark-code-line-highlighted 1221(function(d) { 1222 const hlines = d.querySelectorAll('.remark-code-line-highlighted'); 1223 const preParents = []; 1224 const findPreParent = function(line, p = 0) { 1225 if (p > 1) return null; // traverse up no further than grandparent 1226 const el = line.parentElement; 1227 return el.tagName === "PRE" ? el : findPreParent(el, ++p); 1228 }; 1229 1230 for (let line of hlines) { 1231 let pre = findPreParent(line); 1232 if (pre && !preParents.includes(pre)) preParents.push(pre); 1233 } 1234 preParents.forEach(p => p.classList.add("remark-code-has-line-highlighted")); 1235})(document);</script>
1235 1236
1237<script> 1238slideshow._releaseMath = function(el) { 1239 var i, text, code, codes = el.getElementsByTagName('code'); 1240 for (i = 0; i < codes.length;) { 1241 code = codes[i]; 1242 if (code.parentNode.tagName !== 'PRE' && code.childElementCount === 0) { 1243 text = code.textContent; 1244 if (/^\\\((.|\s)+\\\)$/.test(text) || /^\\\[(.|\s)+\\\]$/.test(text) || 1245 /^\$\$(.|\s)+\$\$$/.test(text) || 1246 /^\\begin\{([^}]+)\}(.|\s)+\\end\{[^}]+\}$/.test(text)) { 1247 code.outerHTML = code.innerHTML; // remove <code></code> 1248 continue; 1249 } 1250 } 1251 i++; 1252 } 1253}; 1254slideshow._releaseMath(document); 1255</script>
1255 1256<!-- dynamically load mathjax for compatibility with self-contained -->
1257<script> 1258(function () { 1259 var script = document.createElement('script'); 1260 script.type = 'text/javascript'; 1261 script.src = 'https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML'; 1262 if (location.protocol !== 'file:' && /^https?:/.test(script.src)) 1263 script.src = script.src.replace(/^https?:/, ''); 1264 document.getElementsByTagName('head')[0].appendChild(script); 1265})(); 1266</script>
1266 1267 </body> 1268</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.