Esta guía se ha utilizado como material para el Workshop de Como crear tu primera página web de Dublineros 🇮🇪 y debido a la gran variedad de posibilidades que se pueden presentar en los distintos ordenadores, no abarca todos los posibles casos como todas las instalaciones para los distintos SO. Por lo que si lo estas siguiendo y tienes cualquier duda no esperes a unirte al grupo de whatsapp Dublineros IT que se puede encontrar Aquí 🕸️ y estaremos encantados de ayudar!

Resultado deseado

Por si hay alguno un poco perdido o ansioso de resultados, algo así es lo que queremos obtener:

Requisitos

• Git
• Hugo
• Netlify

Dónde: En git almacenaremos el codigo fuente de nuestra web

Hugo es el framework o herramienta que usaremos para hacerla!

Y Netlify será la plataforma encargada de gestionar la web, y donde obtendremos un enlace como este https://blogvalera.netlify.app

🐎 Installar hugo y git!

Lo primero que tendremos que hacer es instalar Hugo y Git, en funcion de que ordenador tengamos, ya sea Windows, Mac o Linux tendremos que seguir un procedimiento u otro.

Para instalar hugo tenemos las instrucciones oficiales en funcion de cada SO brew install hugo

Para instalar git podemos seguir esta guía de github

Crear un sitio web y ejecutarlo en nuestro ordenador

Si seguimos la guía de hugo, con tan solo los siguientes comandos podremos crear nuestra pagina web y tener un sitio funcionando. Si lo consideras mas sencillo, puedes seguir la guía oficial en https://gohugo.io/getting-started/quick-start/

1. Creamos el sitio con hugo y accedemos a la carpeta

hugo new site quickstart
cd quickstart

2. Añadimos el submodulo con el tema que queramos, en este caso Ananke

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml

3. Ejecutamos el servidor de hugo en nuestro entorno local

hugo server

4. Y ya podemos observar nuestro resultado en http://localhost:1313/

🎨 Añadir contenido a nuestra página web

Ya tenemos la web, ¿Pero ahora qué? Pues podemos crear contenido! Para añadir contenido y nuevas paginas solo tendremos que hacer lo siguiente.

1. Creamos una nueva página y dejamos ejecutando el servidor de hugo, en este caso con buildDrafts pedimos que se muestren los borradores

hugo new content posts/my-first-post.md
hugo server --buildDrafts

2. El lenguaje que maneja hugo es Markdown, Si accedemos a content/posts/my-first-post.md podemos de que está compuesto.

---
title: "My First Post"
date: 2022-11-20T09:03:20-08:00
draft: true
---
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

3. Prueba a realizar cualquier tipo de cambio, veras como se refleja inmediatamente en la web.

👯‍♀️ Usando temas de la comunidad!

Llegado a este punto ya hemos creado una web, vamos a borrar todo y empezar de nuevo!

Vamos a visitar la lista completa de temas de hugo: Lista completa de temas

A nosotros nos interesan sobre todo las de portfolio, podemos seleccionar esa categoría y buscar el que nos interese. En este caso vamos a utilizar “Personal web:

Personal Web

Si queremos un ejemplo, podemos visitar la pagina del creador del tema: Baptistej, el gran creador

Iniciamos el projecto

Una vez elegido el tema, lo recomendable es seguir el tutorial del autor.

1. Vamos a crear un nuevo sitio

hugo new site superweb
cd superweb

2. Y una vez creado, podemos instalar el tema de la siguiente forma

cd themes
git clone https://github.com/bjacquemet/personal-web

3. Activar el tema: Para simplicar el proceso, vamos a copiar todos los ejemplos del autor en nuestro directorio raiz, y a partir de este ejemplo podremos ir realizando pequeñas modificaciones sin tener que estar investigando todas las posibilidades que tenemos.

Para ello, copiamos el contenido de la carpeta exampleSite: {nuestro-proyecto}/themes/personal-web/exampleSite

y lo movemos a 👇 la raiz de nuestro proyecto {nuestro-proyecto}/

3. y así tenemos una guia practica y simple en la que basarnos, comprueba que funciona el proyecto al hacer

hugo serve

4. Modificar y añadir artículos Para modificar los parametros de la web modificamos el hugo.toml, donde encontramos distintos parametros desde el título hasta subpaginas que podemos añadir o incluso las redes sociales! también en content/post podemos encontrar los artículos de ejemplo, dedica un tiempo a investigar las posibilidades que te ofrece el tema.

😎 Publicar nuestra web al mundo exterior

Una vez preparada la web, tan solo nos queda construirla y mostrarla ante el mundo!

Para construirla, tan solo tendremos que escribir hugo en la terminal, estando en la raiz del proyecto.

hugo

Ten en cuenta que, como veremos en el apartado 3 de esta sección, deberemos añadir el enlace de nuestra web en netlify a la configuración para que se vea correctamente.

1. Creamos un repositorio en Github y enlazamos con el que hemos creado!

Ahora tenemos que subir nuestro codigo a internet, para ello, creamos un repostiorio en github y lo enlazamos

Accede a GitHub y haz click en nuevo proyecto

Y seguimos las instrucciones de github en la raiz de nuestro repositorio para añadir el contenido y subirlo a la nube, no olvides cambiar los siguientes comandos con la información de tu repositorio, estos comandos también se pueden ver en el repositorio que acaba de ser creado.

$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/{nuestro user}/<{repo}>.git
$ git push -u origin main

Una vez subido podemos comprobar que esta en internet a traves del enlace: https://github.com/{nuestro user}/<{repo}>.git

2. Creamos un nuevo proyecto en Netlify

Ya tenemos el repositorio con la web construida y tan solo nos queda exponerla a internet a traves de algun servicio que nos la hostee, para ello tenemos netlify

1. Creamos una cuenta en netlify

Netlify App

2. creamos un proyecto a traves de la opción importar Netlify → import project

3. seleccionamos el repositorio que creamos, que es donde hemos subido el código y la web compilada

⚠️ Ahora importante:

• No hay que seleccionar hugo como comando de ejecución
• seleccionamos la carpeta public como la carpeta a la que se subirá el contendio, pues ahí se almacena el proyecto compilado Una vez consideremos que estan las opciones correctas vamos a aceptar, y por ahora no configuraremos ningún DNS

Y hecho! cada vez que compilemos y subamos el codigo a github, aparecerá en la carpeta public y es desde ahí desde donde la tomará Netlify y desde donde se mostrará al público.

4. En el proyecto de netlify obtenemos el enlae a la web y hasta le podemos modificar el nombre, será de la forma {nuestraweb}.netlify.app

3. Añadimos la raiz de nuestro sitio web a la configuración

El último paso es añadir la url raiz a nuestro archivo hugo.toml para que sepa como redireccionar y servir los archivos del sitio web, para ello, el inicio de este archivo debe lucir como sigue:

baseURL = 'http://{nuestraweb}.netlify.app/'
languageCode = 'en-us'
title = "Titulos's blog"
theme = ... Tema elegido
...

Ya tenemos una web hecha y derecha!

Last modified on 2023-08-15