An easy and friendly way to build your multilingual website

class: title-slide, center, top
background-image: url(images/frame.jpg)
background-size: cover

.right-column[
# An easy and friendly way to build your multilingual website
###

**Pamela E. Pairo, PhD**

]

.palegrey[.left[.footnote[Graphic by [chanyutto chim](https://www.rawpixel.com/image/2431441/free-photo-image-wallpaper-abstract-texture)]]]

---
class: inverse, middle, center

# Why do you need a personal website?

<ion-icon name="checkmark-outline"></ion-icon>
---

# Some benefits

✔️  Another way to practice your communication skills

✔️  Exchange knowledge with colleagues and expansion of your networking

✔️  Sharing ideas and experiences can be useful for the community

✔️  A platform to connect with the world.

---
background-image: url(images/language.jpg)
background-size: cover
class: center, middle, inverse

##.my-hot-DarkBlue[Overcoming]
##.my-hot-DarkBlue[language barriers with]
#.my-hot-DarkBlue[a multilingual website]

.palegrey[.left[.footnote[Graphic by [Hannah Wright](https://unsplash.com/s/photos/language?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText")]]]

---
background-image: url(images/laptop.jpg)
background-size: cover
class: bottom, center

#Let's do it!!

.palegrey[.right[.footnote[Graphic by [Sincerely Media](https://unsplash.com/@sincerelymedia?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)]]]

---
# Building a website

---

# Blogdown + Hugo

```
├── config.toml <- Metadata of the website
📂── config/default
 ├── menus.toml 
 ├── params.toml 
 └── languages.toml
📁── content
📁── themes
```
+ _**params.toml**_: colour _theme_, font size, contact details (email, working address, twitter, GitHub, ResearchGate).

+ _**menus.toml**_: Navigation menu bar

+ _**languages.toml**_: language setting

---

class: inverse, middle, center
# Making a bilingual website

---
### In _languages.toml_

``` code
[en]
  languageCode = "en-us"
  contentDir = "content/en"  # Uncomment for multi-lingual sites,and move English content into `en` sub-folder.
  title = "English site"
# Uncomment the lines below to configure your website in a second language.
[es]
 languageCode = "es"
 contentDir = "content/es"
  title = "Sitio en español"

[es.params]
   description = "Sitio en español"
  [[es.menu.main]]
    name = "es"
    url = "#about"
    weight = 1
```
---
Rename _menus.toml_

```
📁── config/default
 ├── menus.es.toml <- For spanish
 ├── menus.en.toml <- For english
 ├── params.toml 
 └── language.toml 
```
--

Create one folder for each language

```
📂── content
 ├── 📂- es <- For spanish
 ├── 📂- en <- For english
 
```
---
## Choose the default language

In **config.toml**

For spanish website default:  _defaultContentLanguage = “es"_

To show that the personal website is multilingual, check in _params.toml_ and verify that _show_language= TRUE_

---

# Building a website

.center[<img src="images/scheme.png" width="70%"/>]

---
class: inverse, middle, center

# Deploying in Netlify

---
# Hugo version

Put _netlify.toml_ in your project root directory and specify the Hugo version used.

```r

blogdown::hugo_version()
## [1] '0.78.1'
```

And the _netlify.toml_ must be like this:

```r

[build.environment]
  HUGO_VERSION = "0.78.1" #Here is the hugo version
  HUGO_ENABLEGITINFO = "true"

```
---

#In Netlify

_New site from Git > GitHub_

.center[<img src="images/netlify2.png" width="80%"/>]

---

#In Netlify

In _Show advanced_ write the Hugo version.

.center[<img src="images/netlify3.png" width="80%"/>]

---
#In the latest version of Blogdown

Set the Hugo version

```r
library(blogdown)
hugo_version()
## [1] '0.78.1'
```

``` Hugo
config_Rprofile() #set the HUGO VERSION
```
--

Tell to Netlify

```Netlify
config_netlify() 
```
---
background-image: url(images/picture.jpg) 
background-size: cover
class: left, bottom, inverse

# Spread your website to the world!

.palegrey[.left[.footnote[Graphic by [Clem Onojeghuo](https://unsplash.com/@clemono)]]]

---
# Learn more:

- [**blogdown: Creating Websites with R Markdown**](https://bookdown.org/yihui/blogdown/)  Yihui Xie, Amber Thomas, Alison Presmanes Hill

- [**The Download**](https://alison.netlify.app/larug-download/#1) Alison Presmanes Hill

- [**A Spoonful of Hugo: How much Hugo do I need to know?**](https://alison.rbind.io/post/2020-12-12-how-much-hugo/#you-want-to-customize-your-site) Alison Presmanes Hill

- [**Language abbreviations**](https://wowchemy.com/docs/language/)

- [**¿Porqué necesitas tener una página web personal?**](https://pamepairo.netlify.app/post/7-12-2020-motivos-pagina-web/) (and English version)

- [**Creando una página web bilingüe con R**](https://pamepairo.netlify.app/post/7-12-2020-motivos-pagina-web/) (and English version)

---
class: goodbye-slide, inverse, middle, center

## Thank you!!  😄

.pull-left[
<img style="border-radius: 80%;" src="images/pairo.png" width="170px"/>

### Find me...

.center[ 
[pamepairo.netlify.app](https://pamepairo.netlify.app/) 
[pamepairo](https://twitter.com/PamePairo) 
[PamePairo](https://github.com/PamelaPairo) 
]]