Cómo crear un blog con Hugo

• Introducción
• Prerrequisitos
• Paso 1: instale el programa Hugo
• Paso 2: construye tu sitio
• Paso 3: Instalar temas desde el repositorio de Hugo
• Paso 4: realiza algunos cambios básicos de configuración
• Paso 5: redacta tu contenido
• Paso 6: ajuste su contenido con el servidor Hugo
• Paso 7: publique su sitio

Introducción

Hugo es un generador de sitio estático con una velocidad de renderización increíblemente rápida y una excelente facilidad de uso. Gracias a todas sus características orientadas al contenido, siempre puede concentrarse en crear contenido en lugar de crear el entorno:

• Con Hugo, puede crear un sitio estático que se ejecute en cualquier lugar en varios minutos sin preocuparse por tediosas dependencias o bases de datos.
• Puede componer su contenido en Markdown, el estilo de escritura más conveniente, y ver instantáneamente los cambios que ha realizado en la web.
• Además, puede aprovechar al máximo el rico repositorio de temas y la comunidad de rápido crecimiento de Hugo.

En este tutorial, le mostraré cómo instalar y usar Hugo para construir un sitio de blog estático en una instancia de servidor Vultr LEMP basada en CentOS.

Prerrequisitos

Inicie sesión en su instancia como usuario no root con permisos sudo. Vea cómo crear dicho usuario en este artículo .

Paso 1: instale el programa Hugo

Hugo se puede instalar en casi todas las plataformas principales. Para CentOS, solo necesita descargar el último archivo de programa en un .tar.gzarchivo y descomprimirlo en una ubicación conveniente. Al momento de escribir, la última versión es 0.15.

sudo yum update -y
sudo yum install git -y
cd ~
wget https://github.com/spf13/hugo/releases/download/v0.15/hugo_0.15_linux_amd64.tar.gz
tar -zxvf hugo_0.15_linux_amd64.tar.gz
sudo mv hugo_0.15_linux_amd64/hugo_0.15_linux_amd64 /usr/local/bin/hugo

Pruebe su instalación con el siguiente comando:

 hugo version

Paso 2: construye tu sitio

Con Hugo, puede construir su sitio desde cualquier carpeta en su servidor. Aquí, construí un sitio en el directorio mysite/debajo de mi directorio personal.

cd ~
hugo new site ~/mysite

Ejecute los siguientes comandos para ver la arquitectura del sitio:

cd mysite
ls -lF

Como puede ver, la arquitectura actual del sitio se asemeja a:

arquetipos /

config.toml

contenido/

datos/

diseños /

estático/

Con otros dos directorios para ser creados, themes/y public/, toda la arquitectura de un sitio de Hugo es compacta pero completa.

Como iniciación, sepa que su contenido debe almacenarse en el directorio content/.

Paso 3: Instalar temas desde el repositorio de Hugo

Para instalar todos los temas del repositorio de Hugo, ejecute los siguientes comandos. Estos crearán un directorio nombrado themes/en el directorio de su sitio y descargarán todos los temas del repositorio de temas de Hugo.

cd ~/mysite/
git clone --depth 1 --recursive https://github.com/spf13/hugoThemes.git themes

Si solo desea instalar un solo tema, visite el repositorio de temas de Hugo para determinar su tema favorito. Copie su URL y péguelo en el git clonesiguiente comando.

cd ~/mysite/
mkdir themes
cd themes
git clone https://github.com/jaden/twentyfourteen

Paso 4: realiza algunos cambios básicos de configuración

El archivo nombrado config.tomlen el directorio de su sitio contiene la configuración global de su sitio Hugo. Edite el archivo con un editor de texto para realizar algunos cambios de configuración básicos como se detalla a continuación. Recuerde reemplazar los valores de acuerdo con sus condiciones específicas.

baseurl = "http://[YourSiteIP]/"
languageCode = "en-us"
title = "Your Site Name"
theme = "twentyfourteen"

Paso 5: redacta tu contenido

En el directorio de su sitio, ingrese el siguiente comando para crear una página de contenido en el directorio ~/mysite/content/post/.

cd ~/mysite/
hugo new post/about.md

Abra el archivo en un editor de texto, el formato del archivo debe ser similar al siguiente.

+++
date = "2015-12-25T03:21:23Z"
draft = true
title = "about"

+++

Entre las dos líneas de +++mentiras, la meta información sobre su página de contenido. Aquí, puede eliminar la línea draft = truey modificar la línea de título como desee.

Debajo de la segunda +++línea, agregue el contenido que desea mostrar en la página web. Recuerde escribir su contenido en el lenguaje Markdown.

## This is an H2 headline

Text goes here.

Después de terminar esta edición, mantenga abierto el editor de texto para su uso posterior.

Paso 6: ajuste su contenido con el servidor Hugo

Puede usar el servidor web incorporado de Hugo para implementar su sitio, que puede mostrar instantáneamente sus cambios en la página web tan pronto como modifique su contenido en un editor de texto.

Abra otra terminal, configure las iptablesreglas para permitir su acceso a su sitio en el puerto 1313 predeterminado del servidor Hugo:

sudo iptables -I INPUT -p tcp --dport 1313 -j ACCEPT

Inicie el servidor Hugo:

hugo server --bind="[YourServerIP]"

Visite su sitio desde un navegador:

http://[YourServerIP]:1313

Ahora, puede intentar editar el contenido del archivo de página en el terminal anterior o agregar / eliminar un archivo de página. Encontrará que cualquier modificación en el content/directorio se reflejará simultáneamente en la pantalla de su navegador. Esta es una gran característica para un blogger ocupado porque siempre puede ver inmediatamente sus modificaciones para una mejor experiencia de composición.

Después de terminar su edición, presione Ctrl+Cpara detener el servidor Hugo.

Paso 7: publique su sitio

Ahora es el momento de publicar su sitio en la web. Ejecute los siguientes comandos y Hugo generará todo el contenido estático adecuado para su publicación dentro del public/directorio.

cd ~/mysite
hugo

Nota : Hugo no eliminará los archivos antiguos que se generaron previamente cuando ejecuta los comandos anteriores. Para evitar resultados inesperados, siempre puede eliminar el public/directorio antes de ejecutar el hugocomando o especificar un nuevo destino de salida como se muestra en el siguiente comando.

hugo --destination=public2

Dado que el servidor web Nginx ya se ha estado ejecutando en el servidor, todo lo que necesita hacer es copiar el contenido del ~/mysite/public/directorio u otros directorios de destino personalizados en su directorio web /usr/share/nginx/html/.

Eliminar los archivos originales:

cd /usr/share/nginx/html/
sudo rm -rf background.jpg index.php logo.png

Copie los archivos de su sitio estático en el directorio web:

cd ~/mysite/public
sudo cp -R ~/mysite/public/. /usr/share/nginx/html/

Eso es. Ahora se puede visitar su sitio súper rápido estática de su navegador: http://[YourServerIP].

Para ver más detalles, use el comando hugo helpo visite el sitio web oficial de Hugo .