PageSourceSearch

https://erum2020.netlify.app/

html erum2020.netlify.app collected 2026-10-03 10:42:20 UTC 37,429 bytes, 1,268 lines download raw bytes

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&lt;a class="footer-link" href="https://sisteranalyst.org"&gt;sisteranalyst.org&lt;/a&gt;
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 &amp;#183; Tijana Blagojev &amp;#183; Katarina Kosmina
33
34---
35class: inverse, middle
36
37Hi, Welcome to the **&lt;span style="color:#00B2EE"&gt;'Build a website with blogdown in R'&lt;/span&gt;** 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&lt;img style="border-radius: 50%;" src="images/team/Tatjana_Kecojevic.jpg" width="220px"/&gt;
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&lt;img style="border-radius: 50%;" src="images/team/Tijana_Blagojev.jpeg" width="225px"/&gt;
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&lt;img style="border-radius: 50%;" src="images/team/Katarina_Kosmina.jpg" width="250px"/&gt;
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&lt;img style = "border: 75%;" src="images/team/rladies-r-logo.png" width="225px"/&gt;
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 &lt;https://github.com/TanjaKec/eRum2020&gt; to download the material.]
117
118&lt;img src="images/materijal/GitHub_link1.png" width="800px" style="display: block; margin: auto;" /&gt;
119
120---
121class: inverse, center, middle
122
123# .emphasis[Get Started] 🤫😴💤
124
125&lt;img 
126src=https://media.giphy.com/media/mMSE6MfkXzLLa/giphy.gif align="middle" img width="60%" /&gt;
127
128---
129
130class: center, middle
131
132#### `blogdown` &lt;- a package based on R Markdown and Hugo
133
134&lt;img src="images/rmd_hugo_blogdown.png" width="600px" /&gt;
135
136---
137#### .emphasis[So what is blogdown?&lt;sup&gt;*&lt;/sup&gt;]
138
139- [R Markdown](https://rmarkdown.rstudio.com) &lt;img src="https://bookdown.org/yihui/rmarkdown/images/hex-rmarkdown.png" width="10%" align="right" /&gt;
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) &lt;img src="https://gohugo.io/img/hugo.png" width="10%" align="right" /&gt;
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?&lt;sup&gt;*&lt;/sup&gt;]
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&lt;img src="images/Seinfeld/ElainDanceI.png" width="300px" style="display: block; margin: auto;" /&gt;
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&lt;img 
185src="http://happygitwithr.com/img/watch-me-diff-watch-me-rebase-smaller.png" align="middle" img width="30%"  
186/&gt;
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&lt;img src="images/GitHub/New_Repo.png" width="200px" style="display: block; margin: auto 0 auto auto;" /&gt;
197
198- Give it a meaningful name 
199&lt;img src="images/GitHub/Create_New_Repo.png" width="300px" style="display: block; margin: auto;" /&gt;
200
201- Copy repo's **HTTPS** address
202&lt;img src="images/GitHub/HTTPS_GitHub.png" width="350px" style="display: block; margin: auto;" /&gt;
203
204---
205- Open a new project in RStudio: **File** ➡️ **New Project...**
206&lt;img src="images/GitHub/RS_New_Project.png" width="250px" style="display: block; margin: auto;" /&gt;
207- Select **Version Control** ➡️ **Git**
208&lt;img src="images/GitHub/Select_Version_Control.png" width="250px" style="display: block; margin: auto;" /&gt;
209
210- Paste the address of your Git repo  
211&lt;img src="images/GitHub/set_up_git_connection.png" width="250px" style="display: block; margin: auto;" /&gt;
212
213---
214## Install the packages
215
216Install &lt;span style="color:#EEAD0E"&gt;`blogdown`&lt;/span&gt;*&lt;/sup&gt;
217
218
219```r
220install.packages("blogdown")
221```
222
223Install &lt;span style="color:#EE1289"&gt;`Hugo`&lt;/span&gt; using blogdown
224
225```r
226blogdown::install_hugo()
227```
228
229If you already have those packages installed you can check to update your &lt;span style="color:#EE1289"&gt;`Hugo`&lt;/span&gt; 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 &lt;https://github.com/gohugoio/hugo/releases&gt;.
258
259---
260class: inverse, center, middle
261# Let's build a website...
262
263&lt;img src="images/Seinfeld/Cosmo.jpg" width="250px" style="display: block; margin: auto;" /&gt;
264
265---
266#### Build a website
267
268We'll adopt a *simple is beautiful* approach and start building a website using a `default theme`*&lt;/sup&gt;.
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 &lt;https://themes.gohugo.io/&gt;.
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&lt;img src="images/blogdown/Site_Structure.png" width="325px" style="display: block; margin: auto;" /&gt;
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&lt;https://bookdown.org/yihui/blogdown/a-quick-example.html&gt;
321&lt;https://gohugo.io/getting-started/directory-structure/&gt;
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&lt;img src="images/blogdown/Serve_Site.png" width="300px" style="display: block; margin: auto;" /&gt;
335]
336
337.pull-right[
338Don't try to view your site in your small RStudio viewer, instead click on &lt;span style="color:#00B2EE"&gt;`Show in new window`&lt;/span&gt;.
339
340&lt;img src="images/blogdown/show_in_new_window.png" width="300px" style="display: block; margin: auto;" /&gt;
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&lt;img 
390src=https://media.giphy.com/media/l0DEKov4X5Yee3cOI/giphy.gif align="middle" img width="60%"  
391/&gt;
392
393---
394class: inverse, center, middle
395#Step 1: logo 🛠⚙️💡
396&lt;img src="images/blogdown/logo_eRum2020.png" width="400px" /&gt;
397---
398###&lt;span style="color:#00B2EE"&gt;Step 1:&lt;/span&gt; add a logo
399
400The logo file belongs in the `/static/` directory:
401&gt; `/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 &lt;span style="color:#EE2C2C"&gt;`config.toml`&lt;/span&gt; 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###&lt;span style="color:#104E8B"&gt;Step 1:&lt;/span&gt; we've got a logo! 
417
418&lt;img src="images/blogdown/logo_page01.png" width="900px" style="display: block; margin: auto;" /&gt;
419
420---
421## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 1:&lt;/span&gt; We've learnt] 🥁🎺😎
422
423`/themes/&lt;THEME&gt;/static/images/logo.png` 
424
425can be overwritten by 
426
427`/static/images/&lt;eRum2020.png&gt;`
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###&lt;span style="color:#00B2EE"&gt;Step 2:&lt;/span&gt; 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###&lt;span style="color:#104E8B"&gt;Step 2:&lt;/span&gt; we've got a logo! 
487
488&lt;img src="images/blogdown/about_page02.png" width="800px" style="display: block; margin: auto;" /&gt;
489---
490
491## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 2:&lt;/span&gt; We've learnt] 🥁🎺😎
492
493&gt;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&lt;https://gohugo.io/getting-started/directory-structure/&gt;
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###&lt;span style="color:#00B2EE"&gt;Step 3:&lt;/span&gt; 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[&lt;span style="color:#4A708B")&gt;Step 3:&lt;/span&gt; We've learnt] 🥁🎺😎
536
537&gt; 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&lt;https://gohugo.io/getting-started/configuration/&gt;
540
541---
542class: inverse, center, middle
543#Step 4: navigation bar 🛠⚙️💡
544
545---
546###&lt;span style="color:#00B2EE"&gt;Step 4:&lt;/span&gt; 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[&lt;span style="color:#4A708B")&gt;Step 4:&lt;/span&gt; We've learnt] 🥁🎺😎
570
571The `[[menu.main]]` in your `config` file enables you to edit and add navigation options.  
572
573&gt; A menu entry in a menu-template has specific variables and functions to make menu management easier.
574
575&lt;https://gohugo.io/variables/menus/&gt;
576
577---
578class: inverse, center, middle
579
580##Are we starting to feel confortable learning Elaine's moves?! 😃🎵🎶
581
582&lt;img src="images/Seinfeld/ElainDanceII.png" width="300px" /&gt;
583---
584class: inverse, center, middle
585#Step 5: css 🛠⚙️💡
586---
587###&lt;span style="color:#00B2EE"&gt;Step 5:&lt;/span&gt; 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` --&gt; `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###&lt;span style="color:#104E8B"&gt;Step 5:&lt;/span&gt; we've got a look! 
621&lt;img src="images/blogdown/css_page05.png" width="750px" style="display: block; margin: auto;" /&gt;
622
623---
624## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 5:&lt;/span&gt; We've learnt] 🥁🎺😎
625
626We have seen that 
627
628`/themes/&lt;THEME&gt;/static/css/main.css`
629
630could be overwritten by style rules present in:
631
632`/static/&lt;css/erum.css&gt;`
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###&lt;span style="color:#00B2EE"&gt;Step 6:&lt;/span&gt; use Font Awesome 
660
661&gt; Font Awesome is a font and icon toolkit based on CSS and LESS.
662
663&lt;https://en.wikipedia.org/wiki/Font_Awesome&gt;
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###&lt;span style="color:#00B2EE"&gt;Step 6:&lt;/span&gt; use Font Awesome 
675
6761a) Move 06-font-awesome.min.css to `/static/css/`
677
6782a) Rename `06a-font-awesome.min.css` --&gt; `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###&lt;span style="color:#00B2EE"&gt;Step 6:&lt;/span&gt; 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###&lt;span style="color:#00B2EE"&gt;Step 6:&lt;/span&gt; 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###&lt;span style="color:#104E8B"&gt;Step 6:&lt;/span&gt; look at our awesome font and icons! 
741
742&lt;img src="images/blogdown/overview_fontawsome06.png" width="700px" style="display: block; margin: auto;" /&gt;
743
744---
745## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 6:&lt;/span&gt; We've learnt] 🥁🎺😎
746
747`/themes/&lt;THEME&gt;/layouts/partials/*&lt;PARTIALNAME&gt;.html`
748
749Could be overwritten by:
750
751`/layouts/partials/*&lt;PARTIALNAME&gt;.html`
752
753The `&lt;PARTIALNAME&gt;`s must match; unless you want to edit how the partials are called within your templates:
754
755  `{{ partial "&lt;PATH&gt;/&lt;PARTIAL&gt;.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###&lt;span style="color:#00B2EE"&gt;Step 7:&lt;/span&gt; create a homepage 
786
787Where to move the file `07-index.html`?
788
7891) Move `07-index.html` to `/layouts/`&lt;sup&gt;*&lt;/sup&gt; 
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###&lt;span style="color:#104E8B"&gt;Step 7:&lt;/span&gt; look at our home page! 
808
809&lt;img src="images/blogdown/overview_homepage07.png" width="750px" style="display: block; margin: auto;" /&gt;
810---
811## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 7:&lt;/span&gt; We've learnt] 🥁🎺😎
812
813Even when there is no `index.html` file here: `/themes/&lt;THEME&gt;/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[&lt;span style="color:#4A708B")&gt;Step 7:&lt;/span&gt; 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&lt;https://gohugo.io/templates/homepage/&gt;
840---
841class: inverse, center, middle
842#Step 8: posts 🛠⚙️💡
843---
844###&lt;span style="color:#00B2EE"&gt;Step 8:&lt;/span&gt; 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###&lt;span style="color:#104E8B"&gt;Step 8:&lt;/span&gt; we've got a link for the posts!
866
867
868&lt;img src="images/blogdown/overview_post08.png" width="800px" style="display: block; margin: auto;" /&gt;
869
870---
871###&lt;span style="color:#00B2EE"&gt;Step 8:&lt;/span&gt; write a post ✍️
872Go to `Addins` and select `New Post` to which you are going to add the properties
873.pull-left[
874&lt;img src="images/blogdown/add_a_post.png" width="350px" style="display: block; margin: auto;" /&gt;
875]
876.pull-right[
877&lt;img src="images/blogdown/create_a_post.png" width="300px" style="display: block; margin: auto;" /&gt;
878]
879
880You can start writing your post as an R Markdown file 😊
881&lt;img src="images/blogdown/edit_write_post.png" width="300px" style="display: block; margin: auto;" /&gt;
882
883---
884###&lt;span style="color:#104E8B"&gt;Step 8:&lt;/span&gt; we've got our first posts!
885
886&lt;img src="images/blogdown/overview_post01.png" width="750px" style="display: block; margin: auto;" /&gt;
887
888---
889###&lt;span style="color:#00B2EE"&gt;Step 8:&lt;/span&gt; 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&lt;img src="images/blogdown/delete_posts.png" width="250px" style="display: block; margin: auto;" /&gt;
898--
899
900`Serve Site` to have a look
901
902```r
903blogdown::serve_site()
904```
905
906---
907###&lt;span style="color:#104E8B"&gt;Step 8:&lt;/span&gt; look at your posts!
908
909&lt;img src="images/blogdown/overview_posts02.png" width="1000px" style="display: block; margin: auto;" /&gt;
910---
911## .shadow-text[&lt;span style="color:#4A708B")&gt;Step 8:&lt;/span&gt; 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&lt;img 
936src=https://media.giphy.com/media/13Y6LAZJqRspI4/giphy.gif align="middle" img width="60%" /&gt;
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&lt;img src="images/GitHub/git_commit.png" width="350px" style="display: block; margin: auto;" /&gt;
950
951&lt;
951img src="images/GitHub/first_commit.png" width="600px" style="display: block; margin: auto;" /&gt;
952---
953Click to `push`
954
955&lt;img src="images/GitHub/git_push.png" width="700px" style="display: block; margin: auto;" /&gt;
956
957&lt;img src="images/GitHub/git_push01.png" width="500px" style="display: block; margin: auto;" /&gt;
958
959---
960### Check your Git Repo
961
962&lt;img src="images/GitHub/git_repo.png" width="700px" style="display: block; margin: auto;" /&gt;
963---
964class: inverse, center, middle
965
966###Congratulations! You are one step away from getting your website up and running!!!! 👍😃
967
968&lt;img 
969src=https://media.giphy.com/media/1ZkMDj88mQ1rO/giphy.gif align="middle" img width="45%" /&gt;
970---
971### Have you heard about [Netlify](https://www.netlify.com/)?
972
973&lt;img src="images/Netlify/yuhui_xie.png" width="250px" style="display: block; margin: auto;" /&gt;
974
975&gt; Consider Netlify instead of GitHub Pages for Your Static Websites.
976
977&gt; 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&lt;https://yihui.name/en/2017/06/netlify-instead-of-github-pages/&gt;
982---
983
984&lt;img src="images/Netlify/deploy_in_netlify.png" width="700px" style="display: block; margin: auto;" /&gt;
985
986&gt; Deploying in Netlify through GitHub is smooth.
987
988&gt; 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&lt;https://alison.rbind.io/post/up-and-running-with-blogdown/&gt;
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&lt;img src="images/Netlify/new_site_from_git.png" width="300px" style="display: block; margin: auto;" /&gt;
999
1000Select *GitHub* option to *Continue Deployment*
1001&lt;img src="images/Netlify/new_site_from_git1.png" width="300px" style="display: block; margin: auto;" /&gt;
1002
1003*Select the repository* with the website
1004&lt;img src="images/Netlify/new_site_from_git2.png" width="300px" style="display: block; margin: auto;" /&gt;
1005
1006---
1007Select your site repo and klick on *Deploy site* button at the bottom of the page.
1008
1009&lt;img src="images/Netlify/deploy_site.png" width="500px" style="display: block; margin: auto;" /&gt;
1010---
1011Deployment might take a few seconds...
1012
1013&lt;img src="images/Netlify/wait_deployment.png" width="500px" style="display: block; margin: auto;" /&gt;
1014
1015Go into *Site Settings* and click on *Change site name*. 
1016
1017&lt;img src="images/Netlify/change_site_name.png" width="500px" style="display: block; margin: auto;" /&gt;
1018
1019---
1020Change the name...
1021
1022&lt;img src="images/Netlify/change_name1.png" width="400px" style="display: block; margin: auto;" /&gt;
1023
1024I'll call it **`myawesomewebsite`**
1025
1026&lt;img src="images/Netlify/change_name1.1.png" width="450px" style="display: block; margin: auto;" /&gt;
1027
1028---
1029This is it...
1030
1031&lt;img src="images/Netlify/change_name2.png" width="650px" style="display: block; margin: auto;" /&gt;
1032
1033&lt;img src="images/Netlify/myawesomewebsite.png" width="650px" style="display: block; margin: auto;" /&gt;
1034
1035---
1036
1037&lt;img src="images/Netlify/website_live.png" width="900px" style="display: block; margin: auto;" /&gt;
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&lt;img src="images/rbind/RBind.png" width="10%" align="left" /&gt;
1082[rbind](https://github.com/rbind) - Bind all websites in the `R` and `stats` community. 
1083    
1084
1085&lt;https://covid19sr.rbind.io/&gt; is an example of what to request if you wish to move your site to [rbind](https://github.com/rbind).    
1086&lt;img src="images/RBind/rbind_support.png" width="500px" style="display: block; margin: auto;" /&gt;
1087
1088&lt;https://support.rbind.io/about/&gt;
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- &lt;https://blogdown-demo.netlify.com&gt; GitHub: &lt;https://github.com/apreshill/blogdown-demo&gt;
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 &amp; 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&lt;img 
1116src=https://i.gifer.com/B7OF.gif align="middle" img width="50%"  
1117/&gt;
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 &lt;https://github.com/apreshill/blogdown-workshop&gt;
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.