Categories
es

Cómo utilizar el generador de sitios estáticos hugo en linux

Artículos en profundidad sobre Node. js, Microservicios, Kubernetes y DevOps.

En este artículo:

Desarrollador Full-Stack en RisingStack

En este artículo, voy a mostrar cómo se puede generar rápidamente un sitio estático con Hugo y Netlify de una manera fácil.

¿Qué son los generadores de sitios estáticos y por qué necesitas uno?

En pocas palabras, un generador de sitios estáticos toma tu contenido, lo aplica a una plantilla y genera un sitio estático basado en HTML. Es excelente para blogs y páginas de aterrizaje.

  • Rápido despliegue
  • Seguro (sin contenido dinámico)
  • Tiempos de carga rápidos
  • Uso sencillo
  • Control de versiones

Entonces, ¿cuáles son las opciones más populares en términos de generadores de sitios estáticos?

  • Gatsby (React/JS)
  • Hugo (Go)
  • Next. js (React/JS)
  • Jekyll (Ruby)
  • Gridsome (Vue/JS)

Estos son los proyectos con más estrellas en GitHub. He leído sobre Hugo anteriormente, y parecía divertido de probar, así que me voy a quedar con Hugo.

¿Qué es Hugo?

El sitio web oficial afirma que Hugo es el motor de sitios web estáticos más rápido del mundo.

Podemos confirmar que es realmente rápido. Hugo está escrito en Golang. También viene con un rico sistema de tematización y tiene como objetivo hacer que la construcción de sitios web sea divertida de nuevo.

Veamos lo que tenemos aquí.

Instalando Hugo

Para verificar tu instalación:

Usando Hugo

Crea un nuevo proyecto:

Añade un tema para un comienzo rápido. Puedes encontrar temas aquí.

Añade el tema al archivo de configuración.

Añade algo de contenido.

Debería parecerse a esto:

Hay muchas opciones (etiquetas, descripción, categorías, autor) que puedes escribir en los detalles del tema.

Puedes leer más sobre los detalles aquí.

Echa un vistazo a lo que hemos hecho:

Entendiendo la estructura de directorios de Hugo

  • arquetipos : Los arquetipos son archivos de plantilla de contenido que contienen información de portada preconfigurada (fecha, título, borrador). Puedes crear nuevos arquetipos con campos preconfigurados personalizados.
  • assets : La carpeta Assets almacena todos los archivos procesados por Hugo Pipes. (Este directorio no se crea por defecto.
  • config. toml : Hugo utiliza config. toml , config. yaml , o config. json (si se encuentra en la raíz del sitio) como el archivo de configuración del sitio por defecto. En lugar de un único archivo de configuración, también puedes utilizar un directorio config para separar los diferentes entornos..
  • content : Aquí es donde viven todos los archivos de contenido. Las carpetas de nivel superior cuentan como secciones de contenido. Si tiene secciones devops y nodejs, entonces tendrá los directorios content/devops/first-post. md y content/nodejs/second-post. md.
  • data : Este directorio se utiliza para almacenar archivos de configuración que pueden ser utilizados por Hugo al generar su sitio web.
  • layouts : Almacena plantillas en forma de archivos. html. Consulta la sección Estilos para más información.
  • static : Almacena todo el contenido estático: imágenes, CSS, JavaScript, etc. Cuando Hugo construye tu sitio, todos los activos dentro de tu directorio estático se copian tal cual.
  • themes : Tema Hugo de tu elección.

Estilizar nuestro sitio estático

Recuerda que antes aplicamos un tema. Ahora, si inspeccionamos la carpeta themes, podemos ver los archivos de estilo.

NO EDITAR ESTOS ARCHIVOS DIRECTAMENTE .

En su lugar, vamos a reflejar la estructura del directorio de temas a la carpeta raíz de diseños.

Digamos que quiero aplicar CSS personalizado al tema.

El tema tiene una carpeta themes/theme-name/layouts/partials, donde podemos encontrar algunas plantillas HTML (header. html, footer. html). Ahora editaremos la plantilla header. html, así que copia el contenido de este archivo a layouts/partials/header. html y ten cuidado de crear la misma estructura de directorios que la del tema en la carpeta raíz de layouts.

Cree un archivo CSS personalizado: static/css/custom-style. css .

Añada el archivo css personalizado a config. toml :

Añade este código dentro de la etiqueta:

Ahora puede sobrescribir las clases CSS aplicadas por su tema.

Desplegando nuestro sitio estático en Netlify

Uno de los beneficios de un sitio estático es que puedes desplegarlo fácilmente. Netlify o AWS S3 es una muy buena opción para alojar un sitio estático. Veamos cómo desplegarlo en Netlify.

  • Cuenta Netlify
  • Repositorio Github

Qué hacer en Netlify

Crear un repositorio git

Crea un archivo netlify. toml en la raíz de tu proyecto con el contenido de abajo.

Ahora, si empujas tu código a Github, Netlify desplegará el sitio, y se iniciará el blogging.

Conecta Netlify y tu repositorio Git

Construir y desplegar

También puedes echar un vistazo a los detalles de alojamiento de Netlify oficiales de Hugo para obtener más información.

AWS S3 + CI

Vamos a utilizar Terraform para crear un cubo S3 que alojará nuestro sitio estático. Asumo que tienes una cuenta en AWS.

Crea un archivo s3_bucket. tf en tu proyecto e inserta el contenido de abajo en él:

A continuación, siga estos pasos:

ejecutar terraform init

inserte el siguiente fragmento de código

  • ejecutar terraform apply

Esto creará un cubo AWS S3 de lectura pública, que alojará el sitio estático.

Ahora tenemos que encargarnos de construir el sitio estático por nuestra cuenta: necesitamos una herramienta CI.

Configuración de CircleCI para la integración continua

En RisingStack, solemos utilizar CircleCI para este tipo de tareas. Vamos a configurar el proceso de construcción.

Crear los siguientes archivos en la raíz del proyecto:.circleci/config. yml

Aplica el siguiente código a config. yml :

Nota: Para añadir las credenciales de AWS, localiza el enlace AWS Permissions bajo la sección Permissions en CircleCI.

Avanzando con Hugo

Hugo ofrece mucho más que deberías conocer. Descubre la documentación oficial aquí.

LTV Co. Blog de ingeniería

hace 4 días – 5 min leer

ESTE POST FUE PUBLICADO ORIGINALMENTE EN NUESTRO PROPIO SITIO BLOG ¡CONSÚLTALO PARA VER MÁS POSTS COMO ESTE!

  • Quién es Hugo
  • Un nuevo CMS: Forestry. io
  • Rendimiento adicional
  • Los resultados finales

Rompimos con WordPress, un proceso doloroso pero necesario que detallamos en un post anterior. Pero esta no es una historia sobre finales, sino sobre nuevos comienzos, con Hugo, nuestro nuevo CMS. Dicen que siempre hay algo mejor esperándote ahí fuera y, para nosotros, era Hugo.

Hugo es un generador de sitios estáticos (SSG) escrito en Go. Los sitios web se visualizan más a menudo de lo que se editan y Hugo se aprovecha de ello construyendo páginas sólo cuando se crea o actualiza el contenido, a diferencia de los sistemas dinámicos como WordPress que generan HTML para cada petición del usuario. Dado que el servidor HTTP sirve una versión estática de la página, no es necesario crear páginas bajo demanda cada vez que un usuario quiere acceder al sitio web. El resultado: mejor rendimiento. Los desarrolladores que mantienen Hugo afirman que un sitio medio se construye en menos de un segundo.

Hugo toma archivos Markdown y genera archivos HTML utilizando plantillas. Markdown es un lenguaje de marcado ligero que puede utilizarse para añadir elementos de formato a documentos de texto plano. Podemos añadir # para los títulos o rodear las palabras con dos asteriscos para poner el texto en negrita. Por ejemplo, esta sección markdown comienza con:

Una de las cosas que más gustan de WordPress es la facilidad de uso de su editor de texto. Markdown no es WYSIWYG, lo que significa que tienes que añadir la sintaxis a tu texto para poder mostrar diferentes estilos. Aprender markdown no es difícil y hoy en día, hay un montón de aplicaciones de mensajería (WhatsApp, Telegram y Slack, por nombrar algunas) que hacen uso de este lenguaje, pero este proceso puede ser tedioso, especialmente para las personas sin conocimientos técnicos. Entonces, ¿por qué eliminar una función tan buena como un editor de texto integrado? Forestry fue nuestra solución.

Forestry. io es un sistema de gestión de contenidos (CMS) construido para SSG como Hugo, Jekyll o Gatsby. Un CMS es una aplicación que ayuda a los usuarios a crear y gestionar contenidos para su sitio web. Esto es extremadamente útil para las personas sin conocimientos técnicos. Sin Forestry. io, cada colaborador de un blog tendría que descargar el proyecto de nuestro repositorio y empezar a “codificar” sus artículos utilizando un lenguaje de marcado. Queremos que este proceso sea lo más sencillo posible para que los editores puedan centrarse en la creación de contenidos. Forestry. io cuenta con una interfaz WYSIWYG familiar que permite a los usuarios escribir, guardar y previsualizar borradores.

El principal argumento de venta de Forestry. io para nuestros ingenieros es que está totalmente respaldado por Git. Todo el contenido y el código se controlan por versiones con Git y se guardan en Github, sin necesidad de una base de datos o una aplicación de terceros para almacenar la información. Esto facilita el proceso de Integración Continua porque todos los archivos que necesitamos están almacenados en un repositorio Git. Los editores pueden utilizar la interfaz de Forestry. io para generar los archivos markdown y estos se almacenan como el contenido que Hugo utiliza posteriormente para construir toda la aplicación. Al mismo tiempo, los desarrolladores pueden realizar cambios en cualquiera de las plantillas o añadir nuevas funciones al sitio web y enviarlos al mismo repositorio. El siguiente esquema ayuda a ilustrar el proceso:

Anteriormente utilizábamos un framework CSS y hacíamos uso de librerías JavaScript de terceros, así que queríamos echarles un vistazo para ver si se podían hacer mejoras. En el caso de nuestro CSS, descubrimos que Bootstrap venía con una alta dependencia de jQuery, lo que nos ralentizaba con el uso de funciones innecesarias. También reconocimos la posibilidad de futuras vulnerabilidades de seguridad con la librería y tener que mantener la librería actualizada para evitar dichas vulnerabilidades. Un informe de W3Tech descubrió que jQuery es utilizado por el 73% de todos los sitios web y, lo que es más importante, el 81% de esos sitios web utilizan la versión 1, una versión que ya no recibe soporte por parte del equipo de jQuery. Otro informe de Snyk mostró que más del 50% de las vulnerabilidades encontradas para jQuery son de esta primera versión. Sin embargo, la mayoría de los sitios web utilizan jQuery como componente heredado, lo que lo convierte en un objetivo más fácil para los hackers malintencionados.

Otro problema con el que nos encontramos al utilizar jQuery: hacía que nuestras páginas se cargaran mucho más despacio debido al tamaño del paquete, lo que afectaba a la puntuación general de SEO de nuestro dominio.

No había ninguna razón de peso para seguir utilizando jQuery, así que decidimos dejarlo. Una vez tomada la decisión, utilizamos sitios como youmightnotneedjquery. com para buscar la implementación vanilla js de cualquier función jQuery que estuviéramos utilizando. Queríamos mantener los prácticos selectores de jQuery y, para ello, hicimos uso de Cash, una alternativa a jQuery con sintaxis de estilo jQuery que es estupenda para manipular el DOM. Es más ligero con 32 KB sin comprimir comparado con jQuery con 271 KB.

Para eliminar aún más nuestra dependencia de jQuery, empezamos a utilizar el framework Bulma, un framework CSS basado en flexbox sin dependencias de javascript.

PurgeCSS fue otra herramienta que implementamos para ayudar a nuestra minimización de CSS. A pesar de que Bulma es modular y te permite elegir qué componentes quieres en tu paquete, todavía encontramos algunas clases extra incluidas que nunca utilizamos. PurgeCSS fue genial para identificar las clases no utilizadas de nuestros archivos de contenido y nos ayudó a reducir aún más nuestra huella CSS y, en consecuencia, hacer que nuestras páginas se carguen más rápido.

El tamaño de CSS para el diseño de WordPress era de unos 57,1 KB, más de 3 veces nuestro tamaño actual con Hugo. El propio Bootstrap 4 ocupa 20 KB comprimido, mientras que el CSS de todo el blog en Hugo ocupa 16,6 KB, incluidos todos los componentes de Bulma que hemos utilizado.

En LTV, nos comprometemos a mejorar cada día. Siempre estamos buscando las mejores herramientas, los mejores frameworks y las mejores personas. Cada nuevo proyecto es una oportunidad para reflexionar sobre el pasado y ver qué se ha hecho y qué se puede mejorar. Independientemente de si estás trabajando en rehacer un viejo proyecto en un nuevo lenguaje o en un proyecto completamente nuevo, lo normal es que llegues a esta conclusión: “Oye, esto ya lo he hecho antes”. Siempre que me encuentro en esta situación, me pregunto si hay alguna forma de encontrar una solución que mejore lo que hicimos antes.

¿Te interesa trabajar con nosotros? Eche un vistazo a nuestra página de empleo y póngase en contacto con nosotros si desea formar parte de nuestro equipo.

Descubre cómo Hugo hace que crear sitios web vuelva a ser divertido.

Suscríbete ahora

Recibe lo más destacado en tu bandeja de entrada cada semana.

¿Quieres abrir un blog para compartir tus últimas aventuras con diversos marcos de software? ¿Te gusta un proyecto que está mal documentado y quieres solucionarlo? ¿O simplemente quieres crear un sitio web personal?

Mucha gente que quiere empezar un blog tiene una advertencia importante: la falta de conocimientos sobre un sistema de gestión de contenidos (CMS) o de tiempo para aprender. Bueno, ¿y si te dijera que no necesitas pasar días aprendiendo un nuevo CMS, configurando un sitio web básico, dándole estilo y endureciéndolo contra los atacantes? ¿Y si te dijera que puedes crear un blog en 30 minutos, de principio a fin, con Hugo?

hugo_1.png

Hugo es un generador de sitios estáticos escrito en Go. ¿Por qué utilizar Hugo?

  • Porque no hay base de datos, ni plugins que requieran permisos, ni plataforma subyacente que se ejecute en tu servidor, por lo que no hay problemas de seguridad añadidos.
  • El blog es un conjunto de páginas web estáticas, lo que significa un tiempo de servicio rapidísimo. Además, todas las páginas se renderizan en el momento del despliegue, por lo que la carga de tu servidor es mínima.
  • El control de versiones es fácil. Algunas plataformas CMS utilizan su propio sistema de control de versiones (VCS) o integran Git en su interfaz. Con Hugo, todos sus archivos fuente pueden vivir de forma nativa en el VCS de su elección.
  • Blog de desarrolladores de Red Hat
  • Hojas de trucos de programación
  • Pruébelo gratis: Suscripción a Red Hat Learning
  • eBook: Introducción a la programación con Bash
  • Guía descargable: 7 bibliotecas esenciales de PyPI y cómo utilizarlas
  • Para simplificar, me referiré a la ruta al binario de Hugo (incluyendo el binario) como hugo . Por ejemplo, hugo version se traduciría como C:\hugo_dir\hugo version en tu ordenador.

Si recibes un mensaje de error, es posible que hayas descargado una versión incorrecta. También ten en cuenta que hay muchas formas posibles de instalar Hugo. Consulta la documentación oficial para más información. Lo ideal es poner el binario de Hugo en PATH. Para este inicio rápido, está bien utilizar la ruta completa del binario Hugo.

Crea un nuevo sitio que se convertirá en tu blog: hugo new site awesome-blog .

  1. Cambia al directorio recién creado: cd awesome-blog .
  2. ¡Enhorabuena! Acabas de crear tu nuevo blog.
  • Minutos 5-10: Tematiza tu blog
  • Con Hugo, puedes tematizar tu blog tú mismo o utilizar uno de los bonitos temas ya creados. Yo elegí Kiera porque es deliciosamente sencillo. Para instalar el tema:

Entra en el directorio themes: cd themes .

Clona tu tema: git clone https://github. com/avianto/hugo-kiera kiera . Si no tienes Git instalado:

  1. Descarga el archivo. zip de GitHub.
  2. Descomprímelo en el directorio themes de tu sitio.

Cambia el nombre del directorio de hugo-kiera-master a kiera .

Cambia el directorio al nivel de awesome-blog: cd awesome-blog .

Active el tema. Temas (incluyendo Kiera) a menudo vienen con un directorio llamado exampleSite , que contiene contenido de ejemplo y un archivo de configuración de ejemplo. Para activar Kiera, copie el archivo config. toml proporcionado a su blog:

  1. En Unix: cp themes/kiera/exampleSite/config. toml .
  2. En Windows: copiar themes/kiera/exampleSite/config. toml .
    • Confirme Sí para anular el antiguo config. toml
    • (Opcional) Puede iniciar su servidor para verificar visualmente que el tema está activado: hugo serve r-D y acceda a http://localhost:1313 en su navegador web. Una vez que hayas revisado tu blog, puedes apagar el servidor pulsando Ctrl+C en la línea de comandos. Tu blog está vacío, pero estamos llegando a algún sitio. Debería parecerse a esto:
    • hugo_2.png
  3. ¡Acabas de tematizar tu blog! Puedes encontrar cientos de bonitos temas en el sitio oficial de temas de Hugo.
  4. Minutos 10-20: Añade contenido a tu blog
    • Mientras que un cuenco es más útil cuando está vacío, no es el caso de un blog. En este paso, añadirás contenido a tu blog. Hugo y el tema Kiera simplifican este proceso. Para añadir tu primer artículo:
    • Los arquetipos de artículo son plantillas para tu contenido.
    • Añade arquetipos de temas al sitio de tu blog:
  5. En Unix: cp themes/kiera/arquetipos/*arquetipos/

En Windows: copy themes/kiera/archetypes/* archetypes/

Confirme Sí para anular el arquetipo default. md

Cree un nuevo directorio para las entradas de su blog:

En Unix: mkdir content/posts

  1. En Windows: mkdir content\posts
  2. Utiliza Hugo para generar tu entrada:
    • En Unix: hugo new posts/first-post. md
    • En Windows: hugo new posts/first-post. md
    • Abra el nuevo post en un editor de texto de su elección:
  3. En Unix: gedit content/posts/first-post. md
    • En Windows: notepad content/posts/first-post. md
    • Llegados a este punto, ya puedes darle rienda suelta. Observa que tu post consta de dos secciones. La primera está separada por
  4. Publicado: 15 agosto 2017 | Última actualización: 11 septiembre 2017 | Web
    • Durante el fin de semana, moví mi blog de GitHub a GitLab. Ahora tengo una construcción CI totalmente automatizada en GitLab que agarra una imagen Docker de NodeJS, descarga Hugo, UglifyCSS y HTMLMinifier a través de NPM, construye y minifica páginas, y finalmente publica en GitLab Pages en cada merge de Git a master.
    • Motivación
  5. He estado utilizando Hugo Static Site Generator durante más de un año. Inicialmente mi blog estaba alojado en Google Firebase. Poco después, me mudé a GitHub Pages y lo he estado utilizando durante más de un año. Tanto Firebase como GitHub me han funcionado muy bien.
    • Si han estado funcionando, ¿por qué arreglar lo que no está roto?
    • TL;DR, para automatizar tareas.

Para una explicación completa, permítanme comenzar explicando mis viejas tareas de componer y publicar una nueva entrada de blog:

En primer lugar, compongo una entrada de blog en Markdown utilizando Visual Studio Code.

Además, ejecuta Hugo mientras que la composición como se traducirá Markdown a HTML sobre la marcha listo para ver. Tengo toda la línea de comandos en un archivo por lotes.

A continuación, los archivos fuente de mi blog se sincronizan con un repositorio Git en Google Cloud Source Repositories.

Cuando está listo para publicar, ejecuto Hugo sin parámetros para desplegar en la carpeta pública. A continuación, minifico los archivos CSS y HTML. Estos comandos también estaban en un archivo por lotes.

A continuación, utilizo Free File Sync, una herramienta de sincronización de carpetas de código abierto, para duplicar en un solo sentido la carpeta pública en un clon Git local del contenido publicado de mi blog en GitHub. Por último, hago commit y push a la rama maestra remota.

Pasé el fin de semana mejorando el proceso de principio a fin tanto como pude.

Qué, por qué y cómo automatizar

Un repositorio Git para el código fuente y el contenido publicado

La siguiente tabla muestra la comparación entre las opciones gratuitas:

Google Cloud Repository

Páginas de GitHub

  1. Páginas de GitLab
  2. Almacenamiento
  3. 1GB
  4. 1GB
  5. 10 GB

Ancho de banda al mes

10 GB

100 GB

Ilimitado

Depósito privado
Repositorio público Generador de sitios estáticos
Jekyll Generador de sitios estáticos * Posible mediante el uso de imágenes Docker para construcciones CI. Ver ejemplos de sitios web alojados en GitLab Pages. Qué imagen Docker usar y por qué
He comparado 3 configuraciones diferentes de GitLab CI. Las configuraciones están en formato YAML: Ejemplo de GitLab No Ejemplo de GitLab
Mi enfoque No Ejemplo de GitLab Ejemplo de GitLab
Las líneas clave son las siguientes: No Hay que configurar las variables. Son HUGO_VERSION que es la versión a descargar y HUGO_SHA que es un hash SHA256 de la versión de Hugo. Esto te pondrá en marcha si sólo necesitas lo mínimo.

El ejemplo de Hugo

El ejemplo de Hugo elimina la necesidad de mantener el archivo YAML al no tener que actualizar la versión y la suma de comprobación SHA256 de las versiones de Hugo. Su imagen Docker ya tiene Hugo en ella.

Este enfoque es la opción más simplificada que pude encontrar.

  1. Mi enfoque
  2. Configuré mi. gitlab-ci. yml para utilizar la imagen Docker de NodeJS Alpine.
  3. Sin duda más complicado que las otras dos opciones pero hay razones.

Mi enfoque

Nota: Esta imagen Docker no contiene Python. Python es necesario para que Pygments funcione. Si no has oído hablar de Pygments, es un resaltador de sintaxis del lado del servidor. Para reducir las dependencias de mi blog, elegí reemplazarlo con HighlightJS, una alternativa del lado del cliente.

Mi archivo package. json

A continuación se muestra un archivo JSON que NPM entiende. Se coloca en la raíz de tu carpeta fuente Hugo:

Mientras compones los archivos Markdown, ejecuta npm start para que Hugo pueda generar los archivos tan pronto como se guarden.

Configuré mi. gitlab-ci. yml para utilizar la imagen Docker de NodeJS Alpine.

Activando GitLab CI

Todo lo que queda es empujar estos junto con los archivos fuente de Hugo en la rama maestra en GitLab. El CI se activa automáticamente al realizar Git push a GitLab. Si la construcción falla, recibirá una notificación por correo electrónico casi de inmediato. De lo contrario, el sitio web debería publicarse en aproximadamente un minuto.

Sin duda más complicado que las otras dos opciones pero hay razones.

Puedes encontrar información adicional, como la configuración SSL/TLS en dominios personalizados, en la guía de inicio de GitLab Pages.

Introducción

Según su GitHub README, Hugo es un generador de sitios web estáticos HTML y CSS escrito en Go. Está optimizado para ser rápido, fácil de usar y configurable. Hugo toma un directorio con contenido y plantillas y los convierte en un sitio web HTML completo. Hugo se basa en archivos Markdown con front matter para metadatos, y puedes ejecutar Hugo desde cualquier directorio. Esto funciona bien para hosts compartidos y otros sistemas en los que no tienes una cuenta privilegiada. Hugo renderiza un sitio web típico de tamaño moderado en una fracción de segundo. Una buena regla general es que cada pieza de contenido se renderice en alrededor de 1 milisegundo. Hugo está diseñado para funcionar bien con cualquier tipo de sitio web, incluidos blogs, tumbles y documentos.

Al principio, ni siquiera sabía cómo crear un sitio web estático. La gente de Dotfiles ID me recomendó que intentara crear un sitio web utilizando SSG (Static Site Generator) como Jekyll, Hexo o Hugo. No tenía conocimientos de programación, así que me preocupaba que fuera difícil. Pero después de ver una hermosa lista de temas, me sentí motivado para intentarlo. Después de eso, duckduckwent sobre SSG populares. Los cuatro grandes eran

Me interesaba Hugo, simplemente porque distribuía el paquete *.deb. Yo uso Debian, así que me facilita la instalación. Y aún mejor no tira de ninguna dependencia, ni siquiera el compilador Go. Así que mantiene mi configuración simple. Los otros SSG se basan en cosas que no entiendo, que necesita para configurar un montón de cosas como node. js, ruby, y otras cosas que no entiendo. No tengo tiempo para aprenderlas. Por lo tanto, Hugo es perfecto SSG para mí. La ventaja no intencional, Hugo es realmente rápido en la construcción de sitios web.

Instalación

Bueno, en realidad está disponible en el repositorio de Debian desde Stretch. Pero la versión del paquete es demasiado antigua. La mayoría de los temas de Hugo requieren una versión superior de Hugo. Por lo tanto, fui a su página de publicación en GitHub para obtener la versión más alta del paquete en formato *.deb. La instalación de paquetes fuera del repositorio es en realidad poco recomendable, pero Hugo no tira de ninguna dependencia. Por lo tanto, si algo va mal, sólo tengo que quitar Hugo, otros paquetes no se verán afectados. Afortunadamente, hasta ahora nunca he tenido ningún problema con el sideloaded Hugo. Después de descargarlo, lo instalé usando dpkg .

  1. Construir un sitio web
  2. Creación de dos repositorios en GitHub

Alojé mi blog en GitHub. Así que hice dos repositorios en GitHub. Uno para alojar el html generado. Llamé al repositorio addy-dclxvi/addy-dclxvi. github. io . Tenía que ser. github. io , para que fuera instantáneamente accesible desde https://.github. io . Y uno más para poner el código fuente para mantener el espíritu de Open Source. Simplemente llamé al repositorio addy-dclxvi/blog .

Clonando el repositorio vacío

El repositorio de html generado tuvo que ser colocado en la carpeta pública. La guía oficial de Hugo me pedía crear submódulos git, pero no lo hice. No quería que las cosas fueran complicadas, quería simplicidad. Entonces le dije a Hugo que creara una nueva página web.

Luego elegí un tema de Hugo Themes.

Me interesó Jane de Xianmin. Así que lo instalé.

Introducción

Hugo es un generador de sitios estáticos con una velocidad de renderizado rapidísima y una facilidad de uso excelente. Gracias a todas sus características orientadas al contenido, siempre puedes centrarte en crear contenido en lugar de construir el entorno:

Con Hugo, puedes construir un sitio estático en cualquier lugar en cuestión de minutos, sin dependencias tediosas o bases de datos.

Puedes componer tu contenido en Markdown, el estilo de escritura más cómodo, y ver instantáneamente los cambios que has hecho en la web.

Además, puedes aprovechar al máximo el repositorio de temas de Hugo y su comunidad de rápido crecimiento.

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

Requisitos previos

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

Paso 1: Instale el programa Hugo

Hugo puede instalarse en casi todas las plataformas principales. Para CentOS, sólo tienes que descargar el último archivo de programa en un archivo. tar. gz y descomprimirlo en una ubicación conveniente. En el momento de escribir estas líneas, la última versión es la 0.15.

Pruebe su instalación con el siguiente comando:

Paso 2: Construye tu sitio

Me interesó Jane de Xianmin. Así que lo instalé.

Ejecuta los siguientes comandos para ver la arquitectura del sitio:

  • Como ves, la arquitectura actual del sitio se parece:
  • Con otros dos directorios por crear, themes/ y public/ , toda la arquitectura de un sitio Hugo es compacta pero completa.
  • Para empezar, debes saber que tu contenido debe almacenarse en el directorio content/ .

Paso 3: Instalar temas del repositorio Hugo

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

Si sólo quieres instalar un tema, visita el repositorio de temas Hugo para determinar tu tema favorito. Copia su URL y pégala en el comando git clone que aparece a continuación.

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

El archivo llamado config. toml en el directorio de tu sitio contiene la configuración global de tu sitio Hugo. Edita el archivo con un editor de texto para hacer algunos cambios básicos de configuración como se indica a continuación. Recuerda sustituir los valores según tus condiciones específicas.

Paso 5: Redacte su contenido

En el directorio de su sitio, introduzca el siguiente comando para crear una página de contenido en el directorio

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

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

Bajo la segunda línea +++, añade el contenido que quieres mostrar en la página web. Recuerda escribir el contenido en el lenguaje Markdown.

Tras finalizar esta edición, mantén abierto el editor de texto para utilizarlo más adelante.

Paso 6: Ajusta tu contenido con el servidor Hugo

Puedes utilizar el servidor web integrado de Hugo para desplegar tu sitio, que puede mostrar instantáneamente tus cambios en la página web tan pronto como modifiques tu contenido en un editor de texto.

Abre otro terminal, configura las reglas iptables para permitir el acceso a tu sitio en el puerto 1313 por defecto del servidor Hugo:

Inicia el servidor Hugo:

Visita tu sitio desde un navegador:

Ahora, puedes intentar editar el contenido del archivo de página en el terminal anterior o añadir/eliminar un archivo de página. Verás que cualquier modificación en el contenido/directorio se reflejará simultáneamente en la pantalla de tu 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.

Una vez finalizada la edición, pulsa Ctrl+C para detener el servidor Hugo.

Paso 7: Publica tu sitio

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

Nota: Hugo no borrará los archivos antiguos que se generaron anteriormente cuando ejecutes los comandos anteriores. Para evitar resultados inesperados, siempre puedes borrar el directorio public/ antes de ejecutar el comando hugo o especificar un nuevo destino de salida como se muestra en el siguiente comando.

Dado que el servidor web Nginx ya se ha ejecutado en el servidor, todo lo que necesitas hacer es copiar el contenido del directorio

/mysite/public/ u otros directorios de destino personalizados a tu directorio web /usr/share/nginx/html/ .

Elimina los archivos originales:

Copia los archivos de tu sitio estático al directorio web:

Eso es todo. Ahora puedes visitar tu sitio estático súper rápido desde tu navegador: http://[YourServerIP] .

Para ver más detalles, utiliza el comando hugo help o visita el sitio web oficial de Hugo.

Los generadores de sitios ya no son un tema novedoso. Varios lenguajes de programación han lanzado sus propios marcos de construcción de sitios web populares. Por ejemplo, Python lanzó Pelican , JavaScript lanzó Hexo y PHP lanzó WordPress, que tiene la mayor cuota de mercado. He probado todas estas herramientas al desplegar mi blog personal. Pero al construir el sitio oficial de Nebula Graph, después de la evaluación, elegí Hugo, que está escrito en Golang.

Para aclarar, no hay mucha diferencia en los frameworks escritos en varios lenguajes. Lo que importa son las preferencias personales y la estética, que no es el tema tratado en este post.

Requisitos del sitio web en Nebula Graph

Gestión del contenido del blog

El equipo de Nebula Graph comparte con frecuencia artículos técnicos en el blog de la empresa. Hugo dispone de un sistema de gestión de contenidos flexible y potente. Puede añadir varios tipos de contenido, como blogs, comunicados y documentos técnicos, según sea necesario. Los detalles se presentarán más adelante.

Proliferación de productos

Las páginas de proliferación de productos más comunes incluyen una página de inicio, una página de sala de prensa y una página de empresa, etc. Esto requiere que el sistema de gestión de contenidos admita varios tipos de páginas. Estas páginas pueden compartir los mismos componentes, como la barra de navegación y el pie de página. Los detalles también se tratarán más adelante.

Hugo en sí es un framework web similar a la plantilla de extremo de servicio, que soporta la renderización de extremo de servidor de forma nativa.

Soporte multi-idioma

Nebula Graph sirve a usuarios de todo el mundo. Para garantizar una experiencia de usuario de calidad, el sitio web debe ser compatible con varios idiomas. Hugo nos tiene cubiertos. Siempre que disponga de la configuración del corpus correspondiente, podrá utilizar el idioma en su sitio y gestionarlo fácilmente.

Fácil de gestionar para personal no técnico

Basado en el potente sistema de plantillas de Hugo, los gestores de contenidos pueden utilizarlo sin problemas después de que los técnicos hayan realizado desarrollos personalizados en la plantilla.

Características destacadas de Hugo

Sistema de gestión de contenidos flexible y potente

La anterior es la estructura de proyecto construida con la potente plantilla Hugo. Personalmente creo que demuestra los requisitos de diferentes sitios de forma intuitiva. Consulta la descripción oficial de plantillas de Hugo para obtener más información.

Ricas herramientas integradas

Además del potente sistema de gestión de contenidos, Hugo proporciona un montón de útiles plantillas integradas y funciones para mejorar la eficiencia de la construcción. Por ejemplo Compartir

Twitter

Linkedin

Facebook

Otros

Dado que Hugo renderiza sitios web estáticos, puede alojar su nuevo sitio web Hugo prácticamente en cualquier lugar .

Un repositorio git más

Buen conocimiento de git

Conocimientos básicos de Heroku

Un Heroku Dyno

También asumo que tu proyecto Hugo ya está bajo control de código fuente git . Si no es así, ejecuta un simple git init en la raíz del mismo.

¿Todo bien? Vamos a empezar.

Vamos a crear un pequeño pipeline local que nos ayudará a desplegar el contenido de la carpeta public, que contiene el html “compilado” de nuestro sitio estático.

  • Además, cada vez que vayamos a compilar nuestro sitio con el comando hugo, podremos desplegarlo en heroku.
  • Para ello, inicializaremos un submódulo git que será justo ese código compilado, que será desplegado a Heroku. Con algunos ajustes para que funcione con una aplicación Heroku.
  • En la raíz de tu proyecto Hugo, ejecuta el siguiente comando:
  • Esto eliminará la carpeta pública del índice. Como vamos a crear un submódulo de esa carpeta, tenemos que tomar este repositorio fuera del índice. Esto no eliminará realmente los archivos 🙂 .

Ve a tu servidor de código online favorito (GitHub, Bitbucket…) y crea un repositorio allí. Nombra el repositorio mi_sitio_web_impresionante. public , o cualquier otro nombre que te encaje. Crea un archivo README. md en él.

  • Vuelve a tu directorio público Hugo y escribe lo siguiente:
  • Dentro de la carpeta pública del proyecto Hugo, crea un archivo index. php. Pon el siguiente código dentro de él:
  • Del mismo modo, cree un archivo composer. json. Introduce el siguiente código:
  • En la raíz del proyecto Hugo, escribe lo siguiente:

Con un terminal, ve a otro directorio. En otro lugar que no sea tu proyecto Hugo. Digamos por ejemplo

Dentro de esta carpeta, ejecuta el siguiente comando:

Desde el repositorio my_awesome_website. public, crea tu app Heroku si aún no existe, o asocia tu repo a una ya existente:

A continuación, despliega la aplicación Heroku con:

Y ¡voilà! Su sitio debe ser desplegado en consecuencia a esa aplicación Heroku.

Si actualizas tu sitio, digamos que añades una entrada de blog o modificas los archivos en el directorio

Es tu decisión confirmarlos o no :). Personalmente, yo lo haría para mantener el repositorio limpio.

Podrías hacer un script que se encargara de compilar el sitio (con hugo ) que ejecutarías con los scripts pre-push de git hook.

Mientras desarrollaba mi sitio web de muestra usando Hugo, aprendí sobre los submódulos git.

Veo que hay un verdadero interés en utilizarlos como resolvedor de dependencias, especialmente cuando modificas el código del módulo, y quieres fusionarlo con las actualizaciones.

Hugo es un generador de sitios estáticos escrito en Go. Está optimizado para ser rápido, fácil de usar y configurable. Hugo toma un directorio con contenido y plantillas y las convierte en un sitio web html completo.

Hugo hace uso de archivos markdown con front matter para metadatos. Escrito en GoLang para mayor velocidad, Hugo es significativamente más rápido que la mayoría de los generadores de sitios estáticos.

Un sitio web típico de tamaño moderado puede renderizarse en una fracción de segundo. Una buena regla general es que Hugo tarda alrededor de 1 milisegundo por cada pieza de contenido. Es tan rápido que renderizará el sitio en menos tiempo del que tardas en cambiar de navegador y recargarlo.

Hugo está hecho para ser muy flexible. Define tus propios tipos de contenido. Define tus propios índices. Crea tus propias plantillas, shortcodes y mucho más. Está escrito para funcionar bien con cualquier tipo de sitio web, incluyendo blogs, tumbles y docs.

Instalación de Hugo

Hugo está escrito en GoLang y es compatible con Windows, Linux, FreeBSD y OSX.

La última versión se puede encontrar en hugo releases. Actualmente construimos para Windows, Linux, FreeBSD y OS X para arquitecturas x64 y 386.

La instalación es muy sencilla. Simplemente descargue la versión apropiada para su plataforma desde hugo releases. Una vez descargada se puede ejecutar desde cualquier lugar. No necesitas instalarlo en una ubicación global. Esto funciona bien para hosts compartidos y otros sistemas donde no tienes una cuenta privilegiada.

Lo ideal es que lo instales en algún lugar de tu ruta para facilitar su uso. /usr/local/bin es la ubicación más probable.

El ejecutable Hugo no tiene dependencias externas.

Instalación desde el código fuente

Dependencias

Git

Go 1.1+

Mercurial

Bazaar

Clonar localmente (para colaboradores):

Como go espera que todas tus librerías se encuentren en $GOROOT o $GOPATH, es útil enlazar el proyecto a una de las siguientes rutas:

l n-s /ruta/a/tu/hugo $GOPATH/src/github. com/spf13/hugo

l n-s /ruta/su/hugo $GOROOT/src/pkg/github. com/spf13/hugo

Instalando Hugo

Si sólo quieres compilar desde el código fuente, es aún más fácil.

Construyendo Hugo

Ejecutar Hugo

La documentación completa está disponible en Documentación de Hugo.

Licencia

Hugo está publicado bajo la Licencia Pública Simple. Ver LICENSE. md.

Jue Jul 4, 2013

  • 400 palabras
  • Leer en unos 2 Min
  • Desarrollo
  • Bloguear

GoLang

Desarrollo

  • golang
  • Bloguear

Sobre el autor:

Steve Francia es un ingeniero de software, conferenciante y autor estadounidense afincado en Nueva York. Ha ocupado puestos de liderazgo en cinco de los mayores proyectos de código abierto.

Actualmente trabaja en Google en el equipo de liderazgo del lenguaje Go.