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
1
2
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.
1
2
3
4
5
# 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
1
2
cd nombre-repo
bundle
Luego de realizar los cambios, commit y push a git
1
2
3
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
1
code .
Comandos de Jekyll
Inicializar el servidor local
1
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:
1
2
... como se puede apreciar en la captura:
Vincular un archivo:
1
... 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