Jorge Saturno es investigador en calidad del aire y ciencia de los aerosoles.

Jorge Saturno

Esta entrada es un tutorial para crear un sitio web personal con CV y blog usando el tema

 Academic

para

 Hugo

. Existen muchas alternativas para crear un blog. Quizás las más conocidas sean

 wordpress

y

 blogspot

. Recientemente, mucha gente está optando por

 medium

para bloguear.

Publicar sitio web usando Hugo

Probablemente sientes que estamos inundados con información sobre la evolución de la pandemia de COVID-19. Sin embargo, nada mejor que manejar los datos uno mismo y analizarlos desde distintos puntos de vista. Creo que siempre hay alguien que observará algo en los datos que se nos ha escapado a millones de observadores y creo que cualquier aporte en esta emergencia mundial es valioso.

Visualización de la pandemia de COVID-19 en R

RStudio es el entorno de desarrollo para R más popular hoy en día. Su instalación en Manjaro (y otras distribuciones basadas en Arch Linux) es muy sencilla pero requiere usar el repositorio mantenidos por los usuarios, conocido como Arch User Repository (AUR). Usualmente, se usaba

 yaourt

para instalar paquetes del AUR pero dado que este fue descontinuado, tendremos que instalar

 yay

, uno de sus sustitutos.

RStudio en Manjaro Linux

Leaflet

es una biblioteca de Javascript para hacer mapas y existe un paquete homónimo para que permite usar todo el potencial de

 leaflet

en nuestros mapas y hacerlos interactivos y aptos para móviles. Para crear un mapa en blanco se usa la función leaflet. La función addTiles() agrega “tiles” de OpenStreetMap.

Mapas con {leaflet} en R

kumulonimbus

Esta entrada es un tutorial para crear un sitio web personal con CV y
blog usando el tema [**Academic**](https://sourcethemes.com/academic/)
para *Hugo*. Existen muchas alternativas para crear un blog. Quizás las
más conocidas sean *wordpress* y *blogspot*. Recientemente, mucha gente
está optando por *medium* para bloguear. Aunque *medium* podría ofrecer
la posibilidad de llegar a una audiencia más amplia, tiene grandes
desventajas, ya que es una plataforma cerrada e inflexible. :thumbsdown:

Usualmente los blogs son sitios dinámicos (un servidor consulta una base
de datos y produce el contenido dependiendo de lo que el usuarie quiera
leer). Con
[*Hugo*](https://picodotdev.github.io/blog-bitix/2018/05/generador-de-paginas-web-estaticas-y-bitacoras-con-hugo/)
podemos crear un sitio web completamente estático (sin bases de datos) y
usarlo como blog. ¿Las ventajas? Es mucho más ligero y no necesitas
pagar un costoso hospedaje o tener un sitio web gratuito lleno de
publicidad. De hecho, con *Hugo* puedes crear un sitio web profesional y
atractivo y alojarlo gratuitamente en *GitHub* o *GitLab*. Sólo tendrías
que pagar si quisieras tener un dominio personalizado pero no es
necesario. Otra de las ventajas de *Hugo* es que no requiere que
aprendas a programar. *Hugo* ofrece la posibilidad de crear tu sitio web
usando el lenguaje go, a partir de archivos de texto (con formato
markdown) que son muy fáciles de crear y editar.

::: {.callout .callout-style-default .callout-note .callout-titled}
::: {.callout-header .d-flex .align-content-center}
::: {.callout-icon-container}
:::

::: {.callout-title-container .flex-fill}
Nota
:::
:::

::: {.callout-body-container .callout-body}
No soy programador de carrera y puede que algunos de los términos usados
en este artículo no sean los técnicamente correctos.
:::
:::

¿Qué necesitas para crear el sitio académico con *Hugo*?

- Una cuenta en *GitHub* o *GitLab* donde hospedarás tu sitio.
- Instalar *Hugo* en tu computadora.
- Programa para editar archivos de texto.
- Lista de publicaciones académicas en un archivo *bibtex*.

Ya que vamos a crear un blog académico como el que estás leyendo,
usaremos el tema **Academic** de *Hugo* -También puedes usar otros temas
que puedes encontrar en la [galería de temas de
*Hugo*](https://themes.gohugo.io/)-

::: {#instalar-hugo .section .level2}
## Instalar Hugo {#instalar-hugo .anchored anchor-id="instalar-hugo"}

La instalación de *Hugo* depende del sistema operativo que uses. Puedes
encontrar detalles de distintas instalaciones en inglés en este
[sitio](https://gohugo.io/getting-started/installing/#quick-install) o
[acá](https://blog.adrianistan.eu/2016/05/26/tutorial-hugo-espanol-generador-sitios-estaticos/),
en español.

En Arch Linux o Manjaro puedes ejecutar

::: {#cb1 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
sudo pacman -Syu hugo
```
:::

En Ubuntu o Debian,

::: {#cb2 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
sudo apt-get install hugo
```
:::
:::

::: {#preparar-la-plantilla-academic .section .level2}
## Preparar la plantilla **Academic** {#preparar-la-plantilla-academic .anchored anchor-id="preparar-la-plantilla-academic"}

Lo primero que haremos es clonar el tema **Academic** y guardarlo
localmente en nuestra computadora. Para ello, ejecuta los siguientes
comandos:

::: {#cb3 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
git clone https://GitHub.com/sourcethemes/academic-kickstart.git Mi_sitio
cd Mi_sitio
git submodule update --init --recursive
```
:::

Luego se debe crear un nuevo repositorio en *GitHub* o *GitLab*. En el
caso de usar *GitHub*, el repositorio debería llamarse
`<usuarie>.github.io`. Este es el repositorio donde el sitio final será
alojado. Agrega este repositorio a un submódulo de la siguiente manera:

::: {#cb4 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
git submodule add -f -b master https://github.com/<usuarie>/<usuarie>.github.io.git public
```
:::

Luego, sincronizamos el repositorio local con el remoto en *GitHub*:

::: {#cb5 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
git add .
git commit -m "Primer commit"
git push -u origin master
```
:::

El último paso sería crear el sitio web como tal, en HTML. Esta tarea se
conoce como "renderizar" el sitio y lo hará *Hugo* para nosotros.
Además, el sitio web creado será guardado en la carpeta `/public` y esta
carpeta es la que vamos a sincronizar con el repositorio
`<usuarie>.github.io`, de la siguiente forma:

::: {#cb6 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
hugo
cd public
git add .
git commit -m "Crear sitio"
git push origin master
cd ..
```
:::

::: {.callout .callout-style-default .callout-important .callout-titled}
::: {.callout-header .d-flex .align-content-center}
::: {.callout-icon-container}
:::

::: {.callout-title-container .flex-fill}
Importante
:::
:::

::: {.callout-body-container .callout-body}
Ten en cuenta que estos dos últimos pasos son los que necesitarás
ejecutar cada vez que quieras actualizar tu sitio, por ejemplo, para
agregar una nueva entrada.
:::
:::
:::

::: {#primeros-pasos-para-editar-el-sitio-web .section .level2}
## Primeros pasos para editar el sitio web {#primeros-pasos-para-editar-el-sitio-web .anchored anchor-id="primeros-pasos-para-editar-el-sitio-web"}

Lo primero que debemos hacer es abrir el archivo `config.toml` y cambiar
las variables necesarias. Por ejemplo, podemos cambiar el nombre del
sitio, nuestro nombre y biografía, etc.

::: {#cb7 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .toml .code-with-copy}
baseurl = "https://<usuarie>.github.io" # Usa este URL si piensas usar GitHub

# Title of your site
title = "Blog académico de Perico de los Palotes" # Acá cambias el título de tu sitio
```
:::

Si deseas que el sitio esté en español modifica la siguiente variables:

::: {#cb8 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .toml .code-with-copy}
defaultContentLanguage = "es"
```
:::

Hay muchas otras variables que puedes cambiar en `config.toml`, por
ejemplo, tus cuentas de redes sociales, o tu foto de perfil. Recomiendo
que inspecciones todo el archivo y experimentes con él.

Una vez listos estos cambios podemos crear el sitio usando el comando
`hugo`. Luego de creado el sitio, puedes visualizarlo ejecutando el
comando `hugo server`. Esta es una vista preliminar. Puedes cambiar
otras variables o seguir los siguientes pasos para agregar tus
publicaciones y tu primera entrada al blog. Es recomendable visualizarlo
localmente antes de sincronizar con *GitHub*. Para ello, abre la
siguiente dirección en el navegador: `localhost:1313`.
:::

::: {#crear-lista-de-publicaciones-académicas .section .level2}
## Crear lista de publicaciones académicas {#crear-lista-de-publicaciones-académicas .anchored anchor-id="crear-lista-de-publicaciones-académicas"}

Necesitas tener una lista de tus publicaciones como archivo *bibtex*.
Esto puedes hacerlo desde tu gestor de referencias (zotero,
[mendeley](http://tuxtor.shekalug.org/generar-referencias-bibtex-con-mendeley/),
etc.) Luego, con el archivo *bibtex*, podrás producir los archivos .md
requeridos para mostrar cada publicación, los cuales se localizarán en
el directorio `content/publication`. No te preocupes que este proceso se
puede hacer fácilmente usando un código de python que prepararon los
desarrolladores.

Si tienes instalado Python 3, ve al directorio de tu sitio academic y
ejecuta el script de la siguiente forma:

::: {#cb9 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .python .code-with-copy}
pip3 install -U academic
academic import --bibtex <directorio/publicaciones.bib>
```
:::

Si no tienes Python instalado, [esta
guía](https://tutorial.djangogirls.org/es/python_installation/) te puede
ayudar.
:::

::: {#crear-primera-entrada-en-el-blog .section .level2}
## Crear primera entrada en el blog {#crear-primera-entrada-en-el-blog .anchored anchor-id="crear-primera-entrada-en-el-blog"}

Lo que tienes que hacer primero es crear un archivo "primera_entrada.md"
(por sugerir un nombre) en el directorio `content/post` y editarlo.

::: {#cb10 .sourceCode style="background: #f1f3f5;"}
``` {.sourceCode .sh .code-with-copy}
hugo new --kind post post/primera_entrada
```
:::

Abre el archivo .md en tu editor de texto y escribe algún texto usando
el [formato markdown](https://markdown.es/sintaxis-markdown/). Una vez
escrita la entrada, podemos ejecutar `hugo server` y visualizar el sitio
abriendo `localhost:1313` en el navegador.

El último paso es cargar los archivos en el repositorio *GitHub* o
*GitLab*, tal como se mostró al principio. Luego de cargados los
archivos al repositorio, tu sitio web será visible en la URL
"\[usuarie\].github.io".
:::

::: {#quarto-appendix .default}
::: {.section .quarto-appendix-contents}
## Cómo citar {#cómo-citar .anchored .quarto-appendix-heading}

<div>

::: {.quarto-appendix-secondary-label}
BibTeX
:::

``` {.sourceCode .code-with-copy .quarto-appendix-bibtex}
@online{saturno2019,
 author = {Saturno, Jorge},
 title = {Publicar sitio web usando Hugo},
 date = {2019-01-05},
 url = {https://kumulonimb.us/apuntes/Hugo-blog},
 langid = {es}
}
```

::: {.quarto-appendix-secondary-label}
Por favor, cita este trabajo como:
:::

::: {#ref-saturno2019 .csl-entry .quarto-appendix-citeas}
Saturno, Jorge. 2019. "Publicar sitio web usando Hugo." January 5, 2019.
<https://kumulonimb.us/apuntes/Hugo-blog>.
:::

</div>
:::
:::