# Mi primera página web con HUGO y RStudio
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 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 .
A mí me gustaron estos 2 temas:
```r
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
```r
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`**
```r
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:
## Construir mi blog con github actions!
1. Deben deshabilitar la opcion `publishDir = "docs"` en el `config.toml`.
1. Deben crear una rama (branch) para su proyecto, para lo cual deben copiar el siguiente codigo en la terminal de su proyecto
``` bash
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
```
1. Deben ir a su proyecto en github y crearse un 'access token' con al menos permisos de repositorio: `Settings > Developer settings > Personal access tokens`
1. 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`
1. 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.
1. 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)
``` r
usethis::use_github_action(url = "https://raw.githubusercontent.com/ropenscilabs/actions_sandbox/master/.github/workflows/deploy_blogdown.yml")
```
1. 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!!** :globe_with_meridians::clap:
---