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

An easy and friendly way to build your multilingual website

Pamela E. Pairo, PhD

Graphic by chanyutto chim

Why do you need a personal website?

Some benefits

✔️ Another way to practice your communication skills

Some benefits

✔️ Another way to practice your communication skills

✔️ Exchange knowledge with colleagues and expansion of your networking

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

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.

Overcoming

language barriers with

a multilingual website

Graphic by Hannah Wright

Let's do it!!

Graphic by Sincerely Media

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

Making a bilingual website

In languages.toml

[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

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"

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

Deploying in Netlify

Hugo version

Put netlify.toml in your project root directory and specify the Hugo version used.

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

And the netlify.toml must be like this:

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

In Netlify

New site from Git > GitHub

In Netlify

In Show advanced write the Hugo version.

In the latest version of Blogdown

Set the Hugo version

library(blogdown)
hugo_version()
## [1] '0.78.1'
config_Rprofile() #set the HUGO VERSION

In the latest version of Blogdown

Set the Hugo version

library(blogdown)
hugo_version()
## [1] '0.78.1'
config_Rprofile() #set the HUGO VERSION

Tell to Netlify

config_netlify()

Spread your website to the world!

Graphic by Clem Onojeghuo

Learn more:

Thank you!! 😄

Why do you need a personal website?

Paused

Help

Keyboard shortcuts

, , Pg Up, k Go to previous slide
, , Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
oTile View: Overview of Slides
Esc Back to slideshow