Mi primera página web con HUGO y RStudio

2020-03-19 676 words 4 minutes

Contents

Hacer mi primera página web con HUGO y GitHub, no me fue tan fácil, me tomó como 12 horas, y ya me estaba aburriendo xD… había muchos ejemplos de cómo hacerla con netlify; y si deseabas usar GitHub pages https://pages.github.com/ debías crear 2 repositorios entre otras cosas… luego de tantos intentos de prueba y error, y analizar el mecanismos de redirección de los urls logré hacerlo en el mismo repositorio, y acá les comparto el resumen de mi experiencia de cómo hacer tú página solo usando GitHub + HUGO.

Busca el tema que más te guste

Visita la galería de HUGO y busca el tema que más te guste en https://themes.gohugo.io/.

A mí me gustaron estos 2 temas:

1
2
3
4
5


browseURL("https://github.com/luizdepra/hugo-coder")
blogdown::install_theme(theme = "luizdepra/hugo-coder", theme_example = TRUE)

browseURL("https://github.com/dillonzq/LoveIt")
blogdown::install_theme(theme = "dillonzq/LoveIt", theme_example = TRUE)

Instalar blogdown y HUGO

Ve a Rstudio e instala los paquetes y las dependencias necesarias para construir la página web

1
2


install.packages(“blogdown”)
blogdown::install_hugo()

Importa el tema que te gustó

Puedes importar el tema con el siguiente código, o a través de RStudio con la opción Create a project.

Modificar el `config.toml`

Debemos crear un directorio donde estará alojada toda la información para la construcción de la página web y poder publicarlo usando GitHub pages, para ello en el archivo config.toml incluir el siguiente código:

El nombre debe ser docs

1

publishDir = "docs"

Una vez que hiciste todos esos cambios, ve a Addins > Serve Site y espera a que compile la página web, y debe aparecer la carpeta docs en la raíz del proyecto.

Publicarlo en Github Pages

Si todo salió bien hasta el momento, sube el proyecto a un repositorio en GitHub y activar la opción de GitHub pages.

Y si deseo usar mi propio dominio??

Crea el archivo CNAME y colócalo en la carpeta static (static/CNAME). En el interior del archivo CNAME debe contener la dirección del dominio personalizado.

Ahora el último paso, una vez que creaste el CNAME, ve a config.toml y cambia la dirección base por la de tú dominio personalizado (baseURL = "https://lozanoisla.com/").

Compilar el documento (Addins > Serve Site) y verifica que la pagina se genere correctamente, sube los cambios a GitHub; si todo está correcto, pronto tendrás tu página web al aire.

Actualizado: 2020-11-04

Los que ya tendran su blog usando HUGO y blogdown se daran cuenta que cada vez que desean actualizar su pagina web, deben hacer blogdown::build_site()… ahora github implementó github actions que permite hacer esta tarea de forma automatizadas.

Esto fue otro dolor de cabeza, así que lo escribo por acá para tenerlo de recuerdo xD. La información de todo el proceso esta en la siguiente fuente: https://ropenscilabs.github.io/actions_sandbox/

Construir mi blog con github actions!

Deben deshabilitar la opcion publishDir = "docs" en el config.toml.

Deben crear una rama (branch) para su proyecto, para lo cual deben copiar el siguiente codigo en la terminal de su proyecto

1
2
3
4
5


git checkout --orphan gh-pages
git rm -rf .
git commit --allow-empty -m 'Initial gh-pages commit'
git push origin gh-pages
git checkout master

Deben ir a su proyecto en github y crearse un ‘access token’ con al menos permisos de repositorio: Settings > Developer settings > Personal access tokens
Copiar el codigo del token generado, y se van al repositorio de su pagina e ir a las opciones de configuración: setings > secrest > new secret
Van a crear 2 secrest: el primero con el nombre GH_PAT y pegan el token generado en el paso 2. El segundo con el nombre EMAIL y colocan el email que usan para acceder a github.

Van a crear el .yml con la configuración que va permitir construir el sitio web de forma automática (no es necesario modificar nada en el .yml file)

1

usethis::use_github_action(url = "https://raw.githubusercontent.com/ropenscilabs/actions_sandbox/master/.github/workflows/deploy_blogdown.yml")

Subir los cambios al github y la página se va construir de forma autómatica cada vez que realicen un push. De esta forma ya no necesitan más construir la pagina de forma local antes de hacer push.

Éxitos con su primera página web!! 🌐👏