Conoce Jekyll - El Generador de Sitio Web Estático @ MacroHEX | Lunes, 27 de Junio de 2022 | 2 minutos de lectura | Actualizado en Lunes, 27 de Junio de 2022

Jekyll es una generador de sitio web estático que transforma texto plano en un bonito sitio web estático. Puede ser utilizado para un sitio de documentación, un blog, un sitio de evento, o básicamente para lo que quieras. Es rápido, seguro, fácil de utilizar y de código libre.

Deja tu ⭐ al repo de jekyll y el repo de Chrirpy theme

Prerrequisitos

Puedes realizarlo desde Windows utilizando el Subsistema de Windows para Linux (WSL)

Ubuntu/Debian

sudo apt update && sudo apt upgrade
sudo apt-get install ruby-full build-essential zlib1g-dev

Creando la web utilizando una plantilla

Visita: https://github.com/cotes2020/jekyll-theme-chirpy#quick-start

Tras crear un repositorio basado en la plantilla, clonamos el repositorio

Crea el repositorio siguiendo esta nomenclatura mi-usuario.github.io

No clonar el repositorio estando en super usuario.

# Con SSH
git clone git@github.com:<TU-USUARIO>/<NOMBRE-REPO>.git

# Con HTTPS
git clone https://github.com/<TU-USUARIO>/<NOMBRE-REPO>.git

Entonces instalamos las dependencias

cd nombre-repo
bundle

Luego de realizar los cambios, commit y push a git

git add .
git commit -m "Algunos cambios"
git push

Para visualizar la web debemos cambiar una configuración en nuestro repo.

Edición

Utilicé VS Code con WSL

code .

Comandos de Jekyll

Inicializar el servidor local

bundle exec jekyll s

Creando una Publicación

Jekyll sigue una nomenclatura para nombrar las páginas y publicaciones

Crear un archivo en _posts con el formato:

AÑO-MES-DIA-TITULO.md

Por ejemplo:

2022-06-26-documentacion.md

2022-06-30-pruebas.md

Verificar la fecha y hora, así como la zona horaria si no se ve la publicación.

Vinculando archivos locales

Vincular una imagen:

... como se puede apreciar en la captura:
![Una captura](/assets/screenshot.png)

Vincular un archivo:

... puedes [descargar el PDF](/assets/algo.pdf) aquí.

Configurando el Repositorio

Antes de poder utilizar nuestro mi-usuario.github.io ingresamos en nuestro directorio y nos dirigmos a Settings>Pages y cambiamos la rama de main a gh-pages.

Guardamos y ya podremos ver nuestra página con github pages.

Ejemplo: https://macrohex.github.io/

Ejemplos de Markdown

Si queremos ayuda con el markdown, revisa la tabla

Para más sintaxis para el tema de Chirpy vista la demo de como hacer publicaciones

https://chirpy.cotes.page/posts/write-a-new-post/

© 2022 Documentación de MacroHEX

Creado con Hugo con el tema Dream.

avatar
Acerca de

Me apodo MacroHEX y me gusta sufrir aprendiendo cosas nuevas

Enlaces sociales