Com crear un bloc amb Hugo

Introducció

Hugo és un generador de llocs estàtic amb una velocitat de representació ràpida i una excel·lent facilitat d'ús. Gràcies a totes les seves funcions orientades al contingut, sempre podeu centrar-vos a crear contingut en lloc de crear l'entorn:

• Amb Hugo, podeu crear un lloc estàtic en execució en qualsevol lloc en uns quants minuts sense preocupar-vos per dependències o bases de dades tedioses.
• Podeu redactar el vostre contingut a Markdown, l'estil d'escriptura més convenient, i veure instantàniament els canvis que heu fet al web.
• A més, podeu aprofitar al màxim el dipòsit de temes rics d'Hugo i la comunitat de ràpid creixement.

En aquest tutorial, us mostraré com instal·lar i utilitzar Hugo per crear un lloc de bloc estàtic en una instància de servidor Vultr LEMP basada en CentOS.

Requisits previs

Inicieu sessió a la vostra instància com a usuari no root amb permisos sudo. Vegeu com crear un usuari així en aquest article .

Pas 1: instal·leu el programa Hugo

Hugo es pot instal·lar a gairebé totes les plataformes principals. Per a CentOS, només cal que baixeu l'últim fitxer del programa en un .tar.gzarxiu i descomprimiu-lo a una ubicació convenient. En el moment d'escriure, l'última versió és la 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

Proveu la vostra instal·lació amb l'ordre següent:

 hugo version

Pas 2: creeu el vostre lloc

Amb Hugo, podeu crear el vostre lloc des de qualsevol carpeta del vostre servidor. Aquí, vaig crear un lloc al directori mysite/del meu directori d'inici.

cd ~
hugo new site ~/mysite

Executeu les ordres següents per veure l'arquitectura del lloc:

cd mysite
ls -lF

Com veieu, l'arquitectura actual del lloc s'assembla a:

archetypes/

config.toml

content/

data/

layouts/

static/

Amb altres dos directoris per crear themes/i public/, tota l'arquitectura d'un lloc Hugo és compacta però completa.

Per començar, sabeu que el vostre contingut s'ha d'emmagatzemar al directori content/.

Pas 3: instal·leu temes des del repositori Hugo

Per instal·lar tots els temes del repositori Hugo, executeu les ordres següents. Aquests crearan un directori anomenat themes/al directori del vostre lloc i descarregaran tots els temes del repositori de temes Hugo.

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

Si només voleu instal·lar un sol tema, visiteu el repositori del tema Hugo per determinar el vostre tema preferit. Copieu el seu URL i enganxeu-lo a l' git cloneordre següent.

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

Pas 4: feu alguns canvis bàsics de configuració

El fitxer anomenat config.tomlal directori del vostre lloc conté la configuració global del vostre lloc Hugo. Editeu el fitxer amb un editor de text per fer alguns canvis bàsics de configuració tal com s'enumeren a continuació. Recordeu substituir els valors segons les vostres condicions específiques.

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

Pas 5: redacteu el vostre contingut

Al directori del vostre lloc, introduïu l'ordre següent per crear una pàgina de contingut al directori ~/mysite/content/post/.

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

Obriu el fitxer en un editor de text, el format del fitxer hauria de semblar-se al següent.

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

+++

Entre les dues línies de +++mentides hi ha la metainformació sobre la vostra pàgina de contingut. Aquí, podeu eliminar la línia draft = truei modificar la línia del títol com vulgueu.

A la segona +++línia, afegiu el contingut que voleu mostrar a la pàgina web. Recordeu escriure el vostre contingut en l'idioma Markdown.

## This is an H2 headline

Text goes here.

Després d'acabar aquesta edició, manteniu l'editor de text obert per al seu ús posterior.

Pas 6: ajusteu el vostre contingut amb el servidor Hugo

Podeu utilitzar el servidor web integrat d'Hugo per desplegar el vostre lloc, que pot mostrar instantàniament els vostres canvis a la pàgina web tan bon punt modifiqueu el vostre contingut en un editor de text.

Obriu un altre terminal, configureu les iptablesregles per permetre l'accés al vostre lloc al port predeterminat 1313 del servidor Hugo:

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

Inicieu el servidor Hugo:

hugo server --bind="[YourServerIP]"

Visiteu el vostre lloc des d'un navegador:

http://[YourServerIP]:1313

Ara, podeu provar d'editar el contingut del fitxer de pàgina al terminal anterior o afegir/eliminar un fitxer de pàgina. Trobareu que qualsevol modificació al content/directori es reflectirà simultàniament a la pantalla del vostre navegador. Aquesta és una característica fantàstica per a un blogger ocupat perquè sempre podeu veure immediatament les vostres modificacions per millorar les experiències de composició.

Quan hàgiu acabat l'edició, premeu Ctrl+Cper aturar el servidor Hugo.

Pas 7: publiqueu el vostre lloc

Ara és el moment de publicar el vostre lloc al web. Executeu les ordres següents i Hugo generarà tot el contingut estàtic adequat per publicar-lo dins del public/directori.

cd ~/mysite
hugo

Nota : Hugo no suprimirà els fitxers antics que es van generar anteriorment quan executeu les ordres anteriors. Per evitar resultats inesperats, sempre podeu suprimir el public/directori abans d'executar l' hugoordre o especificar una destinació de sortida nova, tal com es mostra a l'ordre següent.

hugo --destination=public2

Com que el servidor web Nginx ja s'ha executat al servidor, tot el que heu de fer és copiar el contingut del ~/mysite/public/directori o altres directoris de destinació personalitzats al vostre directori web /usr/share/nginx/html/.

Elimina els fitxers originals:

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

Copieu els fitxers del vostre lloc estàtic al directori web:

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

Això és. Ara podeu visitar el vostre lloc estàtic súper ràpid des del vostre navegador: http://[YourServerIP].

Per veure més detalls, utilitzeu l'ordre hugo helpo visiteu el lloc web oficial d'Hugo .