La idea de Crear sitios con Hugo y subirlo a github surge por necesidad de una profe que se contacto por telegram en donde en parte me contaba que tenia interés en aprender sobre github para tener su web pero que no encontraba info detallada en lenguaje lo más sencillo posible por eso decidi hace esta guia que tal vez facilite a varios. Sin más los dejo con este tutorial que denomine Crear sitios con Hugo y subirlo a github

El tutorial lo estoy desarrollando sobre mi notebook que tiene ubuntu 20.04 y creeria (aunque no lo probe) que los pasos para distribuciones similares basadas en debian no tendrian que tener ningun tipo de problema.

1- Necesitas tener una cuenta en github por lo cual deberás entrar https://github.com/ y registrarte

2 – En una terminal vas a tener que instalar HUGO el cual se conoce como generador de sitios estáticos y que es un tipo de herramienta moderna que permite construir el sitio web en simples archivos HTML + CSS + Javascript, sin programación del lado del servidor, ni siquiera una base de datos.

sudo apt install hugo

Para ver si esta instalado solo queda ver la version:

hugo version

en mi caso responde:

Hugo Static Site Generator v0.68.3/extended linux/amd64 BuildDate: 2020-03-25T06:15:45Z

Vamos a trabajar ordenados, asi que lo mejor será crear una carpeta que se llame proyectosgithub:

mkdir proyectosgithub
cd proyetosgithub

Y aqui dentro construiremos nuestro primer sitio con hugo, en mi caso voy a crear uno que se llame puntoLibre

hugo new site puntoLibre

El resultado será algo asi:

hugo github creando sitios

Como dijimos que queríamos un sitio relativamente lindo pero no sabemos “programación” como para hacerlo realidad rápidamente vamos a usar una de las tantas plantillas que nos ofrece hugo en su sitio: https://themes.gohugo.io/

Una vez que tengas alguno en mente hay que descargarlo y pegarlo en la carpeta theme que se creo automaticamente en nuestro proyecto y que debiera estar vacio.

mi tema de hugo

Atenti: No hace falta descargar desde la web y luego hacer todo con el mouse. Podemos utilizar git para descargarnos directamente el tema. Por ejemplo a mi me gusto para puntoLibre este tema:

https://github.com/lxndrblz/anatole

Abajo tienen dos botones para probar y para descargar, solo que el de descargar te llevara a github:

Ahora que tenemos copiado el link vamos a una terminal para descargarlo pero antes, vamos a instalar git:

sudo apt install git

Si intentaramos hacer un git clone del repositorio del thema nos va a dar un error por que el “lugar” o carpeta donde estamos parados no es un repositorio.

Entonces, en la carpeta principal (en mi caso puntoLibre) vamos a iniciar git:

git init

Te deberia dar un resultado similar a:

Inicializado repositorio Git vacío en /home/tuusuario/proyectosgithub/puntolibre/.git/

Ahora si vamos a clonar el tema con el siguiente comando:

git submodule add https://github.com/lxndrblz/anatole.git themes/anatole

Dentro de la carpeta principal, en mi caso puntoLibre, vamos a encontrar un archivo de configuración que se llama  config.toml que tendremos que editarlo para decirle que use esa plantilla que seleccionamos.

Lo podemos editar con:

nano config.toml
baseURL = "http://example.org/"
languageCode = "es"
title = "Punto Libre"
theme = "anatole"

Bien en este punto es importante probar que lo que hicimos funcione, pare eso vamos a tipear:

hugo server
hugo server

Como ven en la imagen anterior a mi me va a funcionar la web abriendo la direccion localhost:1313/puntolibre pero en principio uds solo con localhost:1313 estaria bien.

Si anda, ahora toca hacer algo que es necesario para #GitHubPages y es crear un una carpeta con todo el render o desarrollo de lo que hicimos.

En primer lugar tenemos que ver la dirección de nuestro repositorio, por ejemplo la mia es https://luisazambrana.github.io/puntolibre/

Esta dirección la tenemos que copiar en el config.toml para que al subir todo nuestros archivos esten en esa url

config.toml

Luego que más deberiamos hacer??? y… basicamente podriamos hacer muchisimas configuraciones que van a estar dentro de la plantilla que elegiste. Seguramente va a ver un menu, imagenes etc etc pero no es para este momento por que es medio largo…..

Ahora vamos a hacer algo asi como el famoso /public pero esta vez será un docs

hugo -d docs

Una vez que lo tenemos armado podemos listar los archivos para ver que todo se haya creado correctamente, y al hacerlo encontraremos dentro de nuestro proyecto la carpeta docs.

En nuestro repositorio de github vamos a ir a settings y buscaremos branch, donde renombraremos lo que tenemos por gh-pages

branch

En este momento nos va a dar una serie de comandos que los guardamos para ejecutarlos.

Luego vamos nuevamente a settings y buscamos:

github pages configuracion

En sources tendremos que elegir gh-pages y seguramente no vamos a poder elegir docs por que aun no subimos nada.

Es un buen momento de hacer un commit y pun para arriba. ¿Como lo vas a hacer? Sensillo:

git remote add origin https://github.com/LuisAZambrana/puntolibre.git
git add .
git commit -m "Subiendo Blog"
git branch -u origin/gh-pages gh-pages
git fetch origin
git push -u origin gh-pages

Si todo esta bien tendria que pedirnos nuestro usuario y contraseña para subir el push y en minutos tendriamos todo arriba en github.

Queda volver a settings como dijimos antes, y ver que en gh-pages al lado diga docs sino elegirlo!

Si todo salio bien deberian tener un sitio sin actualizar sin entradas pero un sitio al fin, por que justamente no hicimos menu ni post ni paginas. En mi caso yo cree un par de cosas como para que lo puedan ver:

https://luisazambrana.github.io/puntolibre/

imagen de mi pagina

De buenas a primeras tal vez tengan dificultades, pero a no rendirse por que justamente es lo bueno bonito y barato que buscamos para practicar! La cuenta en github es gratis y subir nuestra web tambien y podemos borrar el repo y crearlo las veces que haga falta aunque sea un chino.

Print Friendly, PDF & Email
Share:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *