Introducción
Llevaba bastante tiempo queriendo jugar con lo necesario para levantar una página web pequeña, sí bien tengo algunas nociones básicas de HTML y CSS, llegar a un diseño que no produzca aversión y lidiar con lo necesario para hostearla, sería ese tipo side quests tediosas que solo completas con el objetivo de decir simplemente “lo hice”. Para hacerlo más entretenido, conocer diferentes tecnologías, procedimientos y concentrarme un poco más en el contenido, probé la mezcla de Jekyll, GitHub Pages y junto a la configuración del dominio personalizado obtuve el resultado donde estas leyendo esto, así que si te interesa tener algo parecido y en una de esas aprender algo, siga leyendo compadre.
Jekyll
Jekyll es un generador de páginas web estáticas escrito en el lenguaje de programación Ruby bajo la licencia de software MIT por uno de los co-fundadores de GitHub.
Dicho de forma rápida y simple, una página web estática cumple con entregar contenido fijo en base a sus archivos y normalmente muestra la misma información para todo usuario, un ejemplo de esto puede ser el sitio de donde se publica la documentación de Linux. Por contraparte un sitio web dinámico se conecta a un backend y/o base de datos para generar una aplicación más interactiva con el usuario, como por ejemplo Facebook.
Si te interesa conocer las alternativas dentro de este mundito de los generadores de sitios, puedes visitar este enlace.
Instalación
Como se dijo, Jekyll está escrito con Ruby, particularmente se trata de una Ruby Gem, por lo que para utilizarla necesitamos primero instalar Ruby, RubyGems además de herramientas de compilación como GCC y Make. El siguiente código sirve para cualquier distribución basada en Debian.
1
2
# Instalación de los requisitos
sudo apt-get install ruby-full build-essential zlib1g-dev
1
2
3
4
5
# Configuración de las variables de entorno
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
1
2
# Instalaciíon de Jekyll y Bundler
gem install jekyll bundler
En caso de usar otra shell por defecto, como por ejemplo zsh, ksh, etc. usar el dotfile correspondiente.
Primeros pasos en Jekyll
Para levantar nuestro primer sitio en local con plantilla por defecto, ejecutemos lo siguiente en nuestro directorio de trabajo.
1
2
3
4
jekyll new myblog
cd myblog
bundle add webrick
bundle exec jekyll serve
Si todo ha ido bien, procedamos a ingresar en algún navegador a http://localhost:4000
Primer sitio con el tema por defecto
Para modificar el post “Welcome to Jekyll” basta con editar el archivo en ./_post/ o bien crear uno nuevo en ese lugar nombrándolo con el formato YEAR-MONTH-DAY-title.MARKUP, por ejemplo 2022-10-13-MiPrimerPost.md
1
2
3
4
5
6
7
8
9
10
11
---
layout: post
title: "Este es mi primer post!"
---
# ¡Por algo se empieza!
**Hola mundo**
Aquí puedes escribir lo que quieras aunque te recomiendo mirar un poquito de Markdown para organizar mejor tu texto ^-^
Una vez tienes escritos tus posts o alguna modificación al código, vuelve a levantar el sitio con bundle exec jekyll serve para ver los cambios.
Primera publicación en local
Si quieres conocer más a detalle cómo crear un post, puedes visitar la documentación oficial, en especial este enlace
GitHub Pages
GitHub Pages viene a ser un servicio de hosting de sitios web estáticos, principalmente usado para generar documentación y/o presentación de algún proyecto de software. La particularidad es que toma directamente los archivos HTML, CSS y JavaScript necesarios desde un repositorio y los publica por defecto bajo el dominio github.io, cuyo subdominio en particular viene dado por el nombre de usuario propietario del repositorio en GitHub.
Primeros pasos con GitHub Pages
Levantemos un sitio básico de la manera más sencilla posible. Lo primero es crear un repositorio público y nombrarlo UserName.github.io donde el UserName corresponde a tu usuario de GitHub.
Creación de un repositorio para GitHub Pages
En este punto lo ideal sería saber un poco de Git y gestionar el repositorio de forma local desde una terminal, pero para efectos del ejemplo limitémonos a crear un archivo desde el navegador.
Cómo crear un archivo desde el quick setup
Lo importante aquí es que el archivo creado tenga el nombre de index.html para que GitHub lo reconozca como el archivo principal a mostrar.
Archivo index.html
Ahora solo basta esperar unos minutos y GitHub reconocerá el archivo index.html creado y mostrará su contenido al visitar la url correspondiente, en mi caso https://abeludec.github.io.
Un “Hola Mundo” en GitHub Pages
Implementación
Las secciones anteriores dan una cierta idea de las dos cosas por separado, aquí se pretende mostrar de manera resumida la implementación de las dos tecnologías.
Lo primero es elegir el diseño de preferencia, para ello existe una sección en la documentación de Jekyll que recopila sitios demo con temas creados por usuarios, ahí se puede encontrar un montón de diseños, por ejemplo, desde orientados a ser un portafolio como Neumorphism hasta diseños como LatexJekyll con apariencia de documento LaTex.
Como elección personal se escogió el tema Chirpy, las instrucciones más detalladas están en su documentación, pero básicamente es realizar lo siguiente:
Crear un repositorio en base al template Chirpy Starter
![Using Chirpy Templete]()
Generando el repositorio con Chirpy Starter- Clonar el repositorio a tu máquina local.
1
git clone git@github.com:abeludec/abeludec.github.io.git
- Instalar las dependencias del proyecto.
1 2
# Ejecutar el el direcorio del proyecto. Bundle: Ruby Dependency Management bundle![Chirpy dependencies]()
Instalación de las dependencias del proyecto - Editar el archivo
./_config.ymlpara la primera configuración.1 2 3 4 5 6 7 8 9 10
# El archivo _config.yml viene bien comentado por lo que es sencillo ubicar que cosas cambiar. # A continuación dejo algunas línas básicas que interea modificar. lang: es-ES # Cambiar el idioma completo del sitio. timezone: America/Santiago # Zona horaria para el manejo del horario en los posts. title: Abel Alarcón # El título principal de la página tagline: Una especie de blog (?) # Subtitulo url: 'https://abeludec.github.io' # Usar la url correspondiente a tu sitio github: username: abelalarcon # Usuario de GitHub avatar: # Aquí va la ruta de la imagen de perfil del blog.
- Realizar un push al repositorio con los cambios, esto desencadenará un proceso CI/CD en GitHub Action.
1 2 3
git add . git commit -m "Primer test" git push
![GitHub Actions Chirpy]()
- Esperar unos minutos y visitar el sitio https://UserName.github.io
Generando el repositorio con Chirpy Starter
Instalación de las dependencias del proyecto
De aquí en adelante solo basta con crear los posts que quieras en el directorio ./_post/ y desencadenar el deploy con un push al repositorio.
Para más información acerca de la creación de un post, visitar este enlace.
Dominio personalizado
En caso de querer tener un dominio personalizado necesitas comprarlo en algún proveedor o bien buscar alguna alternativa gratis. En mi caso al tratarse de un .cl, el trámite tiene que realizarse con el Registro de Nombres de Dominio .CL NIC Chile. Posteriormente necesitas configurar el DNS, para eso basta con crear un registro CNAME con el subdominio que quieras a https://UserName.github.io y finalmente habilitar escribir tu dominio personalizado en la configuración del repositorio.
Registro CNAME 
Dominio personalizado GitHub Pages