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. 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 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.
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-
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 o acá, en español.
En Arch Linux o Manjaro puedes ejecutar
sudo pacman -Syu hugoEn Ubuntu o Debian,
sudo apt-get install hugoPreparar la plantilla Academic
Lo primero que haremos es clonar el tema Academic y guardarlo localmente en nuestra computadora. Para ello, ejecuta los siguientes comandos:
git clone https://GitHub.com/sourcethemes/academic-kickstart.git Mi_sitio
cd Mi_sitio
git submodule update --init --recursiveLuego 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:
git submodule add -f -b master https://github.com/<usuarie>/<usuarie>.github.io.git publicLuego, sincronizamos el repositorio local con el remoto en GitHub:
git add .
git commit -m "Primer commit"
git push -u origin masterEl ú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:
hugo
cd public
git add .
git commit -m "Crear sitio"
git push origin master
cd ..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
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.
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 sitioSi deseas que el sitio esté en español modifica la siguiente variables:
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
Necesitas tener una lista de tus publicaciones como archivo bibtex. Esto puedes hacerlo desde tu gestor de referencias (zotero, 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:
pip3 install -U academic
academic import --bibtex <directorio/publicaciones.bib>Si no tienes Python instalado, esta guía te puede ayudar.
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.
hugo new --kind post post/primera_entradaAbre el archivo .md en tu editor de texto y escribe algún texto usando el formato 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”.
Cómo citar
@online{saturno2019,
author = {Saturno, Jorge},
title = {Publicar sitio web usando Hugo},
date = {2019-01-05},
url = {https://kumulonimb.us/apuntes/Hugo-blog},
doi = {10.59350/342cd-4cf06},
langid = {es}
}