En este tutorial aprenderemos a crear un sitio web personal

0. ¿Qué tipo de página o blog queremos?

Lo primero que debemos hacer es crear un borrador del tipo de página o blog que queremos realizar. ¿Cuáles son las intenciones que tenemos al crear este sitio? Debemos pensar en varias cosas:

• Contenido: el tema que vamos a usar fue creado originalmente para blogs, pero adicional a esto, usaremos el tema starter-academic que nos da una variedad de widgets que podemos tener en cada página. Por ejemplo, el sitio demo de Academic. Cada banda o sección es un widget y estos pueden estar uno solo por página ( ejemplo), combinados o multiples widgets en una sola página ( ejemplo).

• Menú: ¿Cuántos menús quieren tener? ¿Cuáles?: About, research, teaching, etc.

• Página principal: está será la primera página de su sitio, será como su carta de presentación. ¿Quieren tener un preview de todo su material? ejemplo ¿Quieren algo breve? ejemplo

1. Set up

Antes comenzar es importante tener las versiones más recientes de R y RStudio:

• R v>=3.6.0

• RStudio >= 1.4

Nota: Necesitamos también tener una conexión de GitHub con RStudio, en el siguiente link está un tutorial de como realizarlo.

¿Cómo conectar GitHub con RStudio?

Por último necesitamos instalar lo siguiente:

• if (!requireNamespace("remotes")) install.packages("remotes")

• Instalar blogdown: remotes::install_github("rstudio/blogdown")

• Instalar Hugo: blogdown::install_hugo(version = "latest", force = TRUE), verificar que la versión sea una actual con blogdown::hugo_version().

Y necesitamos saber un poquito de Markdown.

2. Crear un repo en GitHub

Lo primero que debemos hacer es crear un repositorio en github que alojará nuestra página web.

Nota: Tenemos dos opciones para alojar nuestro sitio:

• Netlify: El repositorio se puede llamar como sea.

• Github pages: En este caso, el nombre es importante. Si nuestra página web se llamará “RLadiesMorelia”, nuestro repositorio se debe llamar “RLadiesMorelia.github.io” ya que ese será el dominio de nuestro sitio web.

En esta ocasión, usaremos Netlify, para ver como alojar nuestro sitio en Github pages pueden seguir el tutorial de R-Ladies Morelia.

3. Crear un proyecto en RStudio con el tema a ocupar

Debemos crear un proyecto en RStudio para poder hacer la conexión con GitHub. En primer lugar clonaremos el repositorio para trabajar de manera local.

1. Abrir RStudio.
2. Luego, en el menú File hacer click en New Directory.
3. En la ventana que se abre, buscar y hacer clic en Website using blogdown.
4. En la siguiente ventana hay que colocar el nombre de la carpeta (mismo nombre de tu repositorio en GitHub), la ruta donde se guardará, el tema de la plantilla que usaremos wowchemy/starter-academic, dejar los demás valores de default, marcar que se abra en una nueva sesión y dar clic en crear.

Nota: El nombre del tema de Hugo lo pueden cambiar por algún otro de los que se encuentran en sus templates, deben de colocar el nombre del autor de GitHub y el nombre del repositorio, por ejemplo HugoBlox/theme-research-group.

5. Al finalizar de crear el proyecto (toma un par de minutos), nos abrirá una nueva sesión de R donde ya tendremos todo lo necesarío para comenzar a modificar nuestra página web. 6. Una vez creado el proyecto, solo nos queda construir el sitio y renderizarlo para comenzar a editarlo. Colocamos en la consola las siguientes dos instrucciones: - blogdown::hugo_build(local=TRUE) - blogdown::serve_site()

Una vez realizado lo anterior ya se puede trabajar dentro del proyecto.

Una vez finalizado lo anterior, se nos abrirá en el panel inferior derecho la pestaña Viewer. Si damos click en el icon Show in new window (a la derecha del símbolo 🧹) podemos previsualizarlo en un navegador!!

Nota: Si no podemos visualizar el sitio al realizar lo anterior, debemos verificar algunas cosas:

• Revisar que si tenemos hugo instalado y la versión: blogdown::check_hugo()

• Construir el sitio: blogdown::check_hugo()

• Leer las instrucciones en consola y cambiar la version de hugo en el archivo .Rprofile: Set options(blogdown.hugo.version = "0.139.0") in .Rprofile and restart R.

• Reiniciar la sesión de RStudio.

• Verificar: blogdown::check_hugo()

• Construir el sitio: blogdown::build_site()

• Inicializar el sitio: blogdown::serve_site()

Ahora, debemos configurarlo, pero antes, vamos a enviar este sitio de prueba a nuestro GitHub para tener el respaldo del sitio inicial y si algo sale mal en la configuración no tener que repetir todo.

4. Enlazar el proyecto local con el repositorio en GitHub

Si observamos en GitHub nuestro repositorio trae por default algunas indicaciones de que es lo que deberíamos hacer para enlazarlo con algún proyecto local:

Vamos a ir a la terminal de R, movernos a la carpeta de nuestro proyecto que acabamos de crear y colocamos lo siguiente:

git init

Deberíamos de ver un mensaje similar al siguiente:

Initialized empty Git repository in D:/Users/user/Documents/r-sites/website/.git/

Esto lo que hará es inicializar ese proyecto como un repositorio de git.

Vamos ahora a añadir todo lo que hemos realizado al área de preparación.

git add .

Ahora, realizaremos nuestro primer commit.

git commit -m "Primera versión de nuestro sitio web"

Nuestro proyecto local ya está bajo control de versiones pero no está enlazado a ningún proyecto en GitHub, para eso hay que indicarle el remotes al que se va a enlazar y la rama de a la cual se va a mandar todo.

git remote add origin https://github.com/username/username.github.io.git

git branch -M main

git branch -u origin main

Nota: Yo tengo la configuración de que mis rama principal tanto en GitHub como en git se llaman main, si ustedes aún tienen la configuración anterior que era el nombre Master, deben de cambiar eso en los comandos anteriores.

Resta solo hacer un push a nuestro GitHub:

git push

Si vamos ahora a nuestro repo de GitHub, veremos todos los archivos que se crearon con esta plantilla.

Actualizar el tema

NOTA: USAR CON PRECAUCIÓN LO SIGUIENTE.

Para actualizar un tema dentro del mismo sitio usamos lo siguiente, cambiando el tema por alguno de los disponibles:

• TEMAS DISPONIBLES

Cambiar en el siguiente código hugo-apero/hugo-apero por el tema a actualizar.

blogdown::install_theme(theme = "hugo-apero/hugo-apero",
                        update_config = FALSE, 
                        force = TRUE)

Convertir/Cambiar tema de un sitio existente

NOTA: USAR CON PRECAUCIÓN LO SIGUIENTE.

Una vez creado un sitio web podemos cambiar el tema, en el siguiente link se encuentran los pasos a seguir.

link

5. Crear contenido

Antes de comenzar a configurar nuestro sitio, vamos a crear contenido de prueba para familiarizarnos con lo que tiene nuestro sitio. Todo el contenido se almacena y se debe crear en la carpeta content.

También, podemos crear documentos con extensión .Rmd, .md o Rmarkdown. Vamos a estar trabajando con los documentos .Rmarkdown. Cualquiera de estos, una vez que se “tejen” 🧶 se pueden previsualizar en Hugo.

Vamos a crear un archivo o post de prueba mediante la consola.

blogdown::new_post(title = "Prueba_post", ext = '.Rmarkdown', subdir = "post")

Si previsualizamos nuestro sitio, ahora veremos el post de prueba.

Vamos a realizar una configuración a nuestro archivo .Rprofile para que se queden por default algunos parámetros.

Vamos a abrir el archivo .Rprofile:

blogdown::config_Rprofile()

Y vamos a configurar algunos parámetros:

options(
  # to automatically serve the site on RStudio startup, set this option to TRUE
  blogdown.serve_site.startup = FALSE,
  # to disable knitting Rmd files on save, set this option to FALSE
  blogdown.knit.on_save = FALSE, # <- cambiamos esto
  # build .Rmd to .md; to build to .html (via Pandoc), set this option to 'html'
  #blogdown.method = 'markdown'
  # agregamos lo siguiente
  blogdown.author = "Haydeé Peruyero",
  blogdown.ext = ".Rmarkdown",
  blogdown.subdir = "post"
)

Lo que estamos haciendo es indicar el autor de los archivos que creemos en el subdirectorio post y que por default sean .Rmarkdown.

Nota: Si usamos archivos .Rmarkdown, podemo susar la función de 🧶 para insertar emojis en nuestros posts 🤓. Solo necesitamos instalar lo siguiente:

install.packages("devtools")
devtools::install_github("hadley/emo")

En el github del paquete emo pueden consultar los emojis permitidos y como usarlos.

Guardamos el archivo y reiniciamos la sesión de R para que tengan efecto estos cambios.

No olviden volver a correr blogdown::serve_site().

Si creamos otro post de prueba sin especificar el directorio ni extensión, veremos como se crea el archivo.

blogdown::new_post(title = "Prueba2")

Vamos a insertar una imagen en este post de prueba. Las imágenes, se deben guardar en la misma carpeta de nuestro post. Y para insertarlas, vamos a usar el formato de Markdown:

![Mi primer imagen](logo.png)

Para ver reflejado el cambio, compilamos con 🧶 y magia, aparece nuestra primer imagen en el post.

Vamos a agregar un chunk para tener un ejemplo de R.

```{r}
data(iris)
summary(iris)
```

Y agreguemos uno más:

```{r, echo=FALSE}
library(ggplot2)

plot <- ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, color = Species)) +
  geom_point() +
  labs(title = "Gráfico de dispersión de Iris", x = "Longitud del sépalo", y = "Ancho del sépalo")

plot
```

Si 🧶 vamos a ver:

Con los posts, puede aparecer alguna imagen, si quieren tener una, es importante el nombre de esta, se debe llamar featured.png:

Vamos a agregar una imagen con ese nombre, hacemos 🧶 y vemos que ahora al inicio de la página del post aparece dicha imagen, además, cuando ya podamos ver la sección, será como una imagen miniatura que lo acompañará.

Flujo de trabajo

Ahora que ya saben crear documentos, recapitulemos cual sería el flujo de trabajo:

1. Abrir el proyecto en RStudio.

2. Usar blogdown::serve_site() para tener abierta la previsualización de nuestra página.

3. Abrir nuestro sitio en una pestaña del navegador.

4. Abrir los archivos con los que vamos a trabajar o crearlos.

5. Editar los archivos y 🧶 si son archivos con la extensión .Rmarkdown o .Rmd. Guardarlos si son extensión .md. Esto hará que nuestros cambios se previsualicen en la página que tenemos abierta del navegador.

6. La consola detecta en automático estos cambios y esto nos permite ver si hay algún error o no. Vamos a ver en la consola algo como Change detected o rebuilding site.

7. Si estamos contentos con los cambios realizar un git add . o git add documento, git commit -m algun mensaje, git push para enviar todos nuestros cambios a GitHub.

Vamos a enviar nuestros cambios a GitHub

Antes de esto, vamos a configurar nuestro archivo gitignore.

file.edit(".gitignore")

Se abrirá el archivo y vamos a agregar lo siguiente:

.Rproj.user
.Rhistory
.RData
.Ruserdata
.DS_Store
Thumbs.db

Guardamos el archivo y vamos a revisar que todo esté correcto:

blogdown::check_gitignore()

Nos dice que si ignoramos correctamente algunos archivos y nos da una lista de [TODO]:

― Checking .gitignore
| Checking for items to remove...
○ Nothing to see here - found no items to remove.
| Checking for items to change...
○ Nothing to see here - found no items to change.
| Checking for items you can safely ignore...
○ Found! You have safely ignored: .DS_Store, Thumbs.db
● [TODO] You can safely add to .gitignore: .hugo_build.lock
| Checking for items to ignore if you build the site on Netlify...
● [TODO] When Netlify builds your site, you can safely add to .gitignore: /public/, /resources/
| Checking for files required by blogdown but not committed...
○ Great! Did not find such files.
― Check complete: .gitignore

Vamos a agregar esto a nuestro archivo ya que pronto vamos a usar Netlify para hospedarlo.

.Rproj.user
.Rhistory
.RData
.Ruserdata
.DS_Store
Thumbs.db
public/
resources/
.hugo_build.lock

Y vamos a revisar nuesto contenido:

blogdown::check_content()

Probablemente nos aparecen algunos [TODO] pero por el momento vamos a continuar.

Y ahora si, vamos a enviar nuestros cambios a GitHub. En la terminal, vamos primero a agregar nuestros cambios:

git add .

Ahora realizamos un commit:

git commit -m "Post de prueba y configuraciones iniciales"

Finalmente, enviamos nuestros cambios a GitHub:

git push

6. Publicar la página

Tenemos dos formas de publicar la página, una es usando GitHub pages, para esta pueden seguir el tutorial de R-Ladies Morelia. En este tutorial explicaremos como hospedarlo en Netlify. Netlify tiene una función que permite que cada que subamos cambios a GitHub, se autopubliquen en el sitio, ya no necesitamos construir el sitio cada vez como es el caso de GitHub pages.

Antes de esto, vamos a verificar la configuración que tiene le archivo netlify.toml.

[build]
command = 'hugo'
publish = 'public'

[build.environment]
HUGO_VERSION = '0.139.0'  <-  Verificar la versión correcta

[context]
[context.branch-deploy]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.deploy-preview]
command = 'hugo -F -b $DEPLOY_PRIME_URL'

[context.production]
[context.production.environment]
HUGO_ENV = 'production'

1. Ir a Netlify.

2. Crear una cuenta asociada a su cuenta de GitHub.

3. Entrar a su nueva cuenta de Netlify y dar click en Import an existing project.

4. Seleccionar GitHub que es donde está nuestro proyecto de la página.

5. Seleccionar el proyecto de nuestra página.

6. Importante: configurar el nombre que tendrá nuestra página, por default se asigna un nombre random que se puede configurar después pero si les da la opción de configurarlo desde el inicio, usen esta opción.

7. Dejar todos los demás parámetros por default y dar click en Deploy sitio-web

8. Una vez que comienza el proceso, verán una pantalla como la siguiente, deben verificar que no marque error.

9. Si su sitio se construyo correctamente, verán un ícono verde y ya podrán dar click en el nombre de su sitio para visualizarlo en vivo.

10. ¡Nuestro sitio está vivo!

Por último, vamos a configurar nuestro archivo hugo.yaml o config.yaml para colocar la dirección de nuestro sitio publicado:

Guardemos y mandemos a GitHub los cambios para que se auto publiquen en Netlify.

git add .
git commit -m "Configuración de archivo yaml"
git push

Si vamos a Netlify, vamos a ver que está construyéndose el sitio.

7. Configurar tu sitio

Ahora, vamos a comenzar la configuración del sitio. En la carpeta config/_default vamos a encontrar varios archivos para la configuración.

Configurar página inicial

Vamos a abrir el archivo _index.md que aparece en la carpeta content. Este archivo tiene la configuración de la primera página que vemos en nuestro sitio. Vamos a ir desglosandolo para entenderlo y modificarlo.

La primera parte, contiene por ejemplo el botón donde se descarga el CV.

date: "2022-10-24"
design:
  spacing: 6rem  <- Cambia el espacio entre de la franja superior
sections:
- block: resume-biography-3
  content:
    button:
      text: Download CV
      url: uploads/resume.pdf <- este archivo se encuentra en la carpeta `themes/theme-academic-cv/static`
    text: ""
    username: admin
  design:
    background:
      color: black <- es el tono de fondo, no lo vemos debido a la imagen verde.
      image: <- todo esto es la imagen verde de fondo, si la quitamos podemos cambiar color o podemos agregar otra
        filename: stacked-peaks.svg
        filters:
          brightness: 1
        parallax: false
        position: center
        size: cover
    css_class: dark

Ejercicio: Cambien el fondo verde a otro de su agrado. Cambien la imagen o elimínenla y jueguen con los colores.

Lo siguiente es la sección de My research

- block: markdown
  content:
    subtitle: ""
    text: "This is a local chapter of R-Ladies Global ( https://www.rladies.org), an organization that promotes gender diversity in the R community worldwide. We meetup in person or virtually to learn about the R programming language, algorithms and advanced tools.\n\nR-Ladies welcomes members of all R proficiency levels, whether you’re a new or aspiring R user, or an experienced R programmer interested in mentoring, networking & expert upskilling. Our community is designed to develop our members’ R skills & knowledge through social, collaborative learning & sharing, supporting minority identity access to STEM skills & careers, the Free Software Movement, and contributing to the global R community! \U0001F603"
    title: "\U0001F4DA ¿De qué se trata R Ladies?"
  design:
    columns: "1"

Cada bloque siguiente, nos configura alguna sección que aparece en la página principal, por ejemplo:

- block: collection
  content:
    filters:
      featured_only: true  <- estamos pidiendo solo algunos que tienen esta etiqueta
      folders:
      - publication  <- la carpeta de donde lo va a sacar
    title: Featured Publications <- El título de la sección 
  design:
    columns: 2  <- si cambiamos a 1, veremos ahora los dos artículos en una sola columna
    view: article-grid  <- podríamos cambiar la forma en la que se ven
  id: papers

Si quitamos alguno de esos bloques, lo que hace es desaparecer la sección de la página principal. Vamos a quitar el bloque siguiente:

- block: collection
  content:
    filters:
      exclude_featured: false
      folders:
      - publication
    text: ""
    title: Recent Publications
  design:
    view: citation

Guardemos y veamos el efecto. Ya no tenemos el bloque de Publicaciones recientes en la página principal, solo tenemos el de publicaciones destacadas.

Y donde aparecen nuestros posts de prueba es en la sección final:

- block: collection
  content:
    count: 5 <- van a aparecer 5 entradas aquí
    filters:
      author: ""
      category: ""
      exclude_featured: false
      exclude_future: false
      exclude_past: false
      publication_type: ""
      tag: ""
    offset: 0
    order: desc
    page_type: post   <- el tipo de página que son los post
    subtitle: ""
    text: ""  <- podemos agregar algo aquí
    title: Recent News
  design:
    spacing:
      padding:
      - 0
      - 0
      - 0
      - 0
    view: date-title-summary
  id: news

En el archivo params.yaml podemos cambiar que donde decía Your name ahora tenga nuestro nombre y las letras de los links.

# Appearance
appearance:
  mode: system
  color: purple  <- este color son los colores de las letras que dicen por ejemplo `Read more`

# SEO
marketing:
  seo:
    site_type: Person
    local_business_type: ''
    org_name: ''
    description: 'The highly-customizable Hugo Academic theme powered by Hugo Blox Builder. Easily create your personal academic website.'
    twitter: 'GetResearchDev'
  analytics:
    google_analytics: ''
    baidu_tongji: ''
    plausible: ''
    fathom: ''
    pirsch: ''
  verification:
    google: ''
    baidu: ''

# Site header
header:
  navbar:
    enable: true
    blox: "navbar"
    fixed_to_top: true
    show_search: true
    show_theme_chooser: true
    logo:
      text: "R Ladies Morelia"   <- cambiamos nuestro nombre

Existen otras opciones de personalización. Para eso necesitamos saber un poco de css. Vamos a ver un ejemplo mínimo de esto.

Vamos a la página de Hugo y descarguemos una clase de colores.

Por ejemplo, yo descargué la clase purple.css y la renombre como violetas.css.

Ahora, regresemos a nuestro proyectp. Vamos a crear unas carpetas (si es que no las tienen) en las siguientes rutas assets > css > themes y dentro de themes vamos a pegar el archivo que descargamos.

Ahora, vamos a ir al archivo params.yaml que se encontraba en config/_default y donde dice color, vamos a modificar al nombre que le pusimos al archivo, en mi caso violeta:

# Appearance
appearance:
  mode: system
  color: violeta

Guardamos y vemos ahora que aparecen cajas de tonos violetas y las letras de los links también. Ese archivo, podemos personalizarlo, cambiar los colores.

Favicon

También podemos configurar que nuestra página tenga un favicon, el logo que sale en el navegador junto al nombre de la página. Para esto, necesitamos una imagen llamada icon.png de tamaño 512x512 pixeles, y debemos guardarla en la carpeta assets > media y vamos a ver que inmediatamente cambia el logo en nuestra página.

Configurar Experience y About

Vamos a ir a la carpeta content/authors/admin. En esa carpeta, está una imagen que es la que se muestra en la primera página. Vamos a cambiarla por una imagen de nosotros o alguna otra. El nombre del archivo debe ser avatar.

Abrimos el archivo _index.md y vamos a ir hasta el final del archivo. Al final del archivo es donde se encuentra el texto que aparece junto a la imagen que acabamos de modificar. Debe de ir después de los ---.

## Sobre R Ladies Morelia

Bienvenidas a R ladies capítulo Morelia. Solemos tener una reunión híbrida al mes para aprender R. Eres bienvenida a aprender. En esta página encontrarás material de las sesiones de R-Ladies Morelia.

Guardamos y magia.

En ese mismo archivo, busquemos la sección interests, en mi caso se encuentra en la línea 62.

interests:
- Artificial Intelligence
- Computational Linguistics
- Information Retrieval

Vamos a cambiar esta sección.

interests:
- Supporting minority identity access to STEM skills & careers
- Develop our members’ R skills 
- Collaborative learning & sharing

Guardemos y veamos el cambio.

Ahora, busquemos la sección donde se configura el nombre, posición y los iconos de redes sociales.

last_name: Chien
name_pronunciation: Chien Shiung Wu
organizations:
- name: OpenAI
  url: https://openai.com/
profiles:
- icon: at-symbol
  label: E-mail Me
  url: mailto:your-email@example.com
- icon: brands/x
  url: https://twitter.com/GetResearchDev
- icon: brands/instagram
  url: https://www.instagram.com/
- icon: brands/github
  url: https://github.com/gcushen
- icon: brands/linkedin
  url: https://www.linkedin.com/
- icon: academicons/google-scholar
  url: https://scholar.google.com/
- icon: academicons/orcid
  url: https://orcid.org/
role: Chief Scientist

Vamos a modificarlos.

last_name: Morelia
name_pronunciation: R Ladies Morelia
organizations:
- name: R Ladies Morelia
  url: https://r-ladies-morelia.github.io/
profiles:
- icon: brands/instagram
  url: https://www.instagram.com/
- icon: brands/github
  url: https://github.com/gcushen
role: Creadoras

Vamos a modificar ahora la sección Skills:

skills:
- items:
  - description: ""
    icon: code-bracket
    name: R
    percent: 100
  - description: ""
    icon: chart-bar
    name: Data Science
    percent: 100
  - description: ""
    icon: code-bracket
    name: Python
    percent: 90
  name: Skills
- color: '#eeac02'
  color_border: '#f0bf23'
  items:
  - description: ""
    icon: cat
    name: Cats
    percent: 100
  - description: ""
    icon: person-simple-walk
    name: Reuniones
    percent: 60
  - description: ""
    icon: camera
    name: Redes Sociales
    percent: 80
  name: Hobbies

Ahora, modifiquemos la experiencia de trabajo.

status:
  icon: ☕️
superuser: true
title: Comunidad  <- Podemos cambiar esto o quitarlo
work:
- company_logo: ""
  company_name: R
  company_url: ""
  date_end: ""
  date_start: "2022-01-01"
  position: Organizadoras de R Ladies Morelia
  summary: |-
    Responsibilities include:
    - Organizar
    - Difundir
    - Crear
- company_logo: ""
  company_name: Software Carpentry
  company_url: ""
  date_end: "2023-12-31"
  date_start: "2023-09-01"
  position: Instructuras
  summary: |
    Responsibilities include:
    - Crear cursos
    - Practicar
    - etc

Busquemos la sección education y modifiquemosla.

education:
- area: Instructora Software Carpentries
  button:
    text: Read Thesis
    url: https://example.com
  date_end: "2020-12-31"
  date_start: "2016-01-01"
  institution: The Carpentries
  summary: |
    Varias integrantes de la comunidad se certificaron en The Carpentries en 2023.
- area: Educación
  date_end: "2020-12-31"
  date_start: "2016-01-01"
  institution: The Carpentries
  summary: |
    GPA: 10 / 10

    Courses included:
    - Curso 1
    - Curso 2
    - Curso 3
- area: R 
  date_end: "2020-12-31"
  date_start: "2016-01-01"
  institution: The Carpentries
  summary: |
    GPA: 10/10

    Courses included:
    - R 
    - ggplot
    - tidyverse

En ese mismo archivo está una sección de Awards y Languages.

Para terminar con esta sección de Experiencia, en el archivo que se encuentra en content llamado experience.md podemos configurar como va a aparecer la información.

---
date: "2023-10-24"
design:
  spacing: 5rem
sections:
- block: resume-experience
  content:
    username: admin
  design:
    date_format: January 2006
    is_education_first: false
- block: resume-skills
  content:
    title: Skills & Hobbies
    username: admin
  design:
    show_skill_percentage: false
- block: resume-awards
  content:
    title: Awards
    username: admin
- block: resume-languages
  content:
    title: Languages
    username: admin
title: Experience
type: landing
---

Configurar los menús de nuestra página

Vamos a abrir el archivo menu.yaml.

En este archivo es donde podemos agregar y quitar opciones de los menús iniciales. Vamos a agregar el de post que es en el que creamos nuestros ejemplos.

main:
  - name: Bio
    url: /
    weight: 10
  - name: Posts  <- agregué estas tres líneas
    url: /#post
    weight: 11
  - name: Papers
    url: /#papers
    weight: 12
  - name: Talks
    url: /#talks
    weight: 13
  - name: News
    url: /#news
    weight: 14
  - name: Experience
    url: experience/
    weight: 20
  - name: Projects
    url: projects/
    weight: 30
  - name: Teaching
    url: teaching/
    weight: 40

Guardamos o 🧶 y veamos que sucede.

También podemos desaparecer menús:

Notemos que algunos de los menús nos mandan a una sección de la página principal, por ejemplo el de Papers o News. Esto se debe a la configuración que tenemos en el archivo menu.toml. Vamos a explorar un poco más acerca de este archivo. En este archivo, existen dos tipos de menu, en algunos casos aparece algo como /#nombre y en otros nombre/, el primero lo que indica es que se asocia el menú a la página principal y el segundo se refiere a la carpeta de ese nombre y que tiene su propio espacio, no nos manda a la principal. Vamos a realizar el siguiente cambio:

main:
  - name: Bio
    url: /
    weight: 10
  - name: Papers
    url: publication/ <- Cambiemos este menú a ser uno con su propio espacio.
    weight: 11
  - name: Talks
    url: /#talks
    weight: 12
  - name: News
    url: /#news
    weight: 13
  - name: Experience
    url: experience/
    weight: 20
  - name: Projects
    url: projects/
    weight: 30
  - name: Teaching
    url: teaching/
    weight: 40

Si guardamos el cambio, vamos a notar ahora que en Papers estan las publicaciones en su propia pestaña, ya no forma parte de la principal.

Ejercicio: Vamos a tomar un momento para pensar en nuestras secciones que queremos tener. Y modifiquemos acorde a esto los menus y las secciones de la página principal.

Comentarios y Referencias usadas

1. Una vez lanzado el sitio, es decir, cuando tenemos el preview, no hay que volver a lanzarlo, cada cambio que realicemos, al darle clic guardar nos mostrará de inmediato como se ve y si algo falló.

2. Si por algún motivo algún cambio no se ve reflejado, en la consola podemos correr primero blogdown::stop_server() y después blogdown:::serve_site() para volver a previsualizarlo.

3. Una vez construido el sitio, realizamos el commit y push con nuestros cambios en la terminal de RStudio:

git add .
git commit -m "Mensaje referente a los cambios"
git push

4. En nuestro sitio en Netlify, vemos los cambios directamente.

5. Gran parte de este tutorial se creo siguiendo el tutorial de Alison Hill

6. Referencias de Hugo para personalizar su página.

7. En la documentación oficial de Hugo-Apero, hay varios manuales sobre como realizar la personalización de diferentes secciones, link y el su github, podríamos ver por ejemplo como personalizaron algunas secciones, por ejemplo la parte de este tutorial inicial donde aparecían unos paneles con To do y Screnshots es una configuración que aparece en el tutorial de Hugo-Apero-docs, link. Además, está un tutorial por Alison Hill donde tiene como configurar varias secciones de su página, link. En la mism página de Alison Hill pueden encontrar varios tutoriales muy interesantes sobre ciencia de datos y R.

8. La forma de crear primero un proyecto local con el tema inicial y después enlazarlo a GitHub se tomo del tutorial de Matteo Courthoud.

9. Los diferentes tipos de temas disponibles en Hugo los pueden encontrar en su repositorio y sus previsualizaciones en esta página.

10. El error que se presenta al construir el sitio usando new_site(theme = "wowchemy/starter-hugo-academic"), lo discuten en el siguiente post.