Hola, esta publicación se saldra de la esfera de cyberseguridad pero aún asi puede ser util para quien quiera iniciar un blog sin tener que preocuparse por buscar un hosting para alojar sus recursos .

Primero comenzaremos por lo mas basico

¿Que es hugo?

Hugo es un framework, generador de sitios web estáticos que esta programado en GO. Basicamente nos sirve para crear una estructura de directorios con un archivo de configuracion principal el cual modificaremos una vez que hayamos elegido y agregado un tema de diseño

con Hugo encontrarás muchos temas desarrollados por la comunidad, es fácil de configurar y los artículos que escribas son fácilmente exportables de un tema a otro.

¿Como instalo Hugo?

Para instalar hugo basta un solo comando dependiendo del S.O en el que te encuentres en mi caso uso debian y basta con un apt install hugo -y. de todas maneras te dejo un enlaze a la documentacion de hugo Hugo doc en otros sistemas operativos basados en unix generalmente el paquete se encuentra en la mayoria de gestores de paquetes, o en Windows con Chocolatey… de todas maneras te recomiendo que pases por la documentación.

Windows

choco install hugo -confirm

Mac

brew install hugo

Debian linux

sudo apt install hugo -y

Creando nuestro primer Blog

En lo que llevo experimentando con hugo he encontrado distintos metodos, hay algunos que suelen hacerse 2 repositorios en github.

  • El primer repositorio es para que aloje los recursos de hugo (este apuntara al segundo repositorio como submodulo a una carpeta publica)
  • El segundo repositorio sera en donde desplegaremos el blog.

en nuestro caso iremos por el mas sencillo, alojar nuestro repositorio de forma local y cuando necesitemos subir informacion a nuestro blog bastara con hacer un push a nuestro repositorio remoto en github, aunque tiene su contra parte qué dependeremos de nuestros recursos alojados local cada vez que quieramos actualizar el blog es decir si no contamos con nuestro equipo o acceso a nuestro equipo se convertira en una tarea dificil actualizar el blog. Una vez dicho esto continuemos.

  • Instalamos Hugo
apt install hugo -y && hugo version

  • Creamos nuestro nuevo sitio con HUGO donde alojaremos nuestros recursos con el siguiente comando hugo creara la estructura de nuestro directorio con un archivo de configuracion principal de formato ‘toml’, que lo modificaremos a continuación notesé que esto es solo la estructura y no poseé ningun tema.
hugo new site <Name>

Agregando un tema a nuestro sitio

En sì hugo posee una variedad de temas para nuestro sitio web, asi que procederemos a elegir el que mas nos guste y seguiremos su guia de instalacion que suele ser bastante sencilla. Hugo themes

Nosotros instalaremos un tema llamado ‘Coder’ que visualmente se ve bastante atractivo, para eso solamente clonamos el repositorio del tema aputando hacia la carpeta ‘themes’ en la estructura de nuestro blog creada anteriormente con hugo

git clone https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

Modificando nuestro archivo de configuracion toml

bien una vez que hemos agregado un tema a nuestro directorio de hugo, modificaremos nuestro fichero ‘config.toml’ para eso agregaremos la configuracion por defecto del tema especificado en su documentacion dejando nuestro fichero principal de configuracion de esta manera .

a continuacion montaremos un servidor web de forma local para visualizar el blog.

hugo server -D

como vemos nuestro blog se desplego correctamente de manera local.

Desplegando nuestro blog en Github con GitPages

Antes de realizar cualquier tipo de accion primero debemos loguearnos en github, y crear un repositorio con visibilidad publica con el siguiente nombre <Username>.github.io que sera donde desplegaremos nuestro blog ( hemos nombrado anteriormente que los recursos de hugo lo dejaremos de manera local)

Configurando nuestra cuenta de github

una vez creado nuestro repositorio para desplegar nuestro blog, debemos configurar los parametros globales de acceso a nuestra cuenta (para permitirnos realizar ciertas tareas con nuestro repositorio remoto )

# Seteamos los parametros globales de git
git config --global  user.name "<Username>"
git config --global user.email "<Email>"

# Creamos un par de llaves para agrear la llave publica a nuestra cuenta en github
ssh-keygen -t rsa -b 4096

bien, una vez configurado los parametros globales de nuestra cuenta y generadas las llaves de ssh … copiaremos nuestra llave publica y la agregaremos a nuestra cuenta de github

Settings > Access > SSH AND GPG Keys > SSH KEYS -> New SSH KEY

una vez que hemos agregado nuestra llave publica a nuestra cuenta de github, procederemos a desplegar nuestro blog en el repositorio creado

Antes que nada debemos modificar nuestro fichero config.toml para que apunte a la url del repositorio en github modificando el parametro ‘baseurl’ en mi caso ‘0xcybercave.github.io’

despues de eso crearemos nuestra carpeta publica con el siguiente comando (la carpeta publica sera la que enlazaremos a nuestro repositorio de github remoto )

# Crea un directorio de nombre 'public' de nuestro sitio creado con hugo
hugo -t <themeName>

despues nos movemos a la carpeta pública cd public y realizamos los siguientes comandos

# Iniciamos un repositorio local de git en nuestra carpeta publica
git init
 
# Agregar nuestros recursos
git add .

# confirmamos todos los cambios en el área de preparación
git commit -m "First Commit"

# En la Branch main
git branch -M main

# Asociar el repositorio local con el repositorio remoto
git remote add origin git@github.com:0xCybercave/0xcybercave.github.io.git

# Push al almacén remoto
git push -u origin main

e intentamos acceder al url de nuestro blog

Y como vemos nuestro blog en github fue desplegado correctamente.

P/D: me olvidaba de algo importante para agregar contenido a nuestro nuestro blog

# Le decimos a hugo que crearemos un nuevo posts dentro de "content"
hugo new posts/my-first-post.md

esto creara un nuevo directorio dentro de content de nombre “posts” que sera donde agregaremos cada uno de nuestros posts para depues modificar el template creado por hugo

y customizamos el fichero markdown

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

## <TITLE>
<Information>

Asi de sencillo es desplegar un blog con hugo en github , gracias por tomarte el tiempo de leer este articulo 🙂.