Haz que crear sitios web sea divertido otra vez con Hugo

Los sitios estáticos son populares por muchas razones. Evitar soluciones excesivas y mantener un proyecto simple sin bases de datos, demasiadas dependencias o configuraciones específicas del servidor (sin PHP, sin MySQL / MSSQL, .NET, Python, Ruby, etc.) hace que sea muy fácil de implementar y ser robusto Contra numerosas vulnerabilidades posibles. En última instancia, estas se convierten en páginas HTML básicas servidas al usuario..

En esta guía, le mostraré cómo configurar su entorno de desarrollo con Hugo y construir su primer sitio web estático de Hugo.

Un nuevo enfoque para los sitios web estáticos

El legendario acrónimo de diseño KISS. - Mantenlo simple, estúpido - Se puede aplicar a Hugo y cómo se acerca al espacio del generador de sitios web estáticos..

Construido en Go, Hugo compila rápidamente sus páginas estáticas (se requieren fracciones de milisegundos para compilar un sitio pequeño, y puede hacer miles de páginas en segundos).

Además, Hugo proporciona herramientas esenciales para el flujo de trabajo del sitio web estático (incluidas las herramientas de implementación y migración), lo que permite a los desarrolladores y diseñadores concentrarse en las partes divertidas, como ejercitar su creatividad e implementar dicha creatividad en la construcción del sitio web..

Por qué sitios web estáticos?

Cuando construimos sitios web basados en contenido, podemos asumir algunas generalidades en todos los sitios y Hugo da un marco para eso. Específicamente, podemos tomar tipos de contenido como publicaciones, categorías, reseñas o productos y organizar los datos. Luego, podemos darle a cada uno un aspecto específico a través de plantillas y hojas de estilo..

En el futuro, podemos conducirlo a cualquier lugar que necesitemos dentro del espacio web estático HTML / CSS / JS. Cuando lo piensas pragmáticamente, es un gran espacio que permite mucho espacio para la creatividad..

jQuery funcionará bien y no hay nada que le impida utilizar servicios de terceros en su página estática, si los necesita. Así que no se limite pensando que no puede integrar otras bibliotecas o aplicaciones en sus sitios estáticos. Realmente no es el caso, puedes usar cualquiera de las bibliotecas de JavaScript disponibles.

Así que para algunas páginas de un sitio web tipo folleto de la empresa, con un enlace a una página de Formularios de Google para contactarnos. Y si necesita mostrar otros tipos de datos, puede usar JavaScript para ese aspecto de su sitio.

¿Cómo puede funcionar para mi negocio y mis clientes??

Tome, por ejemplo, una tienda pequeña o un profesional independiente con algunos productos o servicios que no requieren una solución completa de comercio electrónico. En su lugar, solo requieren información del producto y un enlace de "contacto" en la página. Hugo puede hacerlo al final de una mañana. El hosting no es un gran problema, es una idea de último momento, en realidad, porque solo estamos sirviendo páginas HTML básicas.

Hugo también trabaja bien para la documentación de proyectos en proyectos GNU. Por ejemplo, piense en nuevas empresas o pymes que necesitan una presencia simple.

Cuáles son las limitaciones de los sitios estáticos?

Lo que Hugo no puede hacer es dinámica contenido, por ejemplo, formularios basados en bases de datos, búsqueda o sistemas de usuario. Si eso es lo que buscas, entonces ciertamente Hugo es no Lo que quieras. Pero para las otras ocasiones, cuando te encuentras diciendo "¿no podemos simplemente poner una página básica para esto?" Los generadores de sitios web estáticos son una opción sólida. Además, tenga en cuenta que Hugo no es el único generador de sitios estáticos. Hay muchos por ahí y han existido por mucho tiempo, aquí hay una lista de ellos..

Para crear blogs de contenido en vivo como sitios de noticias, Hugo podría ser una gran solución para cambiar rápidamente una página para que esa cobertura se vincule desde su sitio principal, conéctelo en línea en minutos, lo que significa que puede continuar agregándolo rápidamente y volver a implementar los cambios. muy rápidamente. Pero para hacer un sitio de noticias completo con búsqueda y muchos escritores, no sería adecuado utilizar a Hugo..

Hugo también carece de herramientas más avanzadas para su canalización de activos como ES6 y Sass. Si desea utilizar esa tecnología, deberá incluir Gulp o Grunt para hacer el trabajo. de lo contrario, la vainilla CSS y JavaScript funcionan mejor.

El entorno de tu hogar

Hugo está escrito en Go y tiene soporte para muchas plataformas, para ver todos los lanzamientos que puedes encontrar aquí.

Para usuarios de macOS con HomeBrew, la instalación se puede hacer de la siguiente manera:

actualización de cerveza && brew install hugo

Más información sobre la instalación para Mac OSX y Windows.

Una vez que Hugo está instalado, podemos probar la instalación ejecutando hugo ayuda en el símbolo del sistema o versión hugo

Haciendo su primer sitio web estático con Hugo

Ahora que hemos instalado Hugo, podemos comenzar a crear el sitio web. Ejecute el siguiente comando reemplazando 'su-nombre de sitio-aquí' con el nombre de su proyecto:

$ hugo nuevo sitio tu-nombre de sitio-aquí

Esto creará un andamiaje para su sitio, puede verlo en su buscador

o en su terminal a través del árbol mando

Hugo ha creado 5 subdirectorios y 1 archivo, que utiliza para crear el sitio web final a partir de lo que significan:

arquetipos: Aquí definimos cuál es nuestro contenido, podemos establecer etiquetas o categorías predeterminadas y definir tipos como una publicación, tutorial o producto aquí.
config.toml: La configuración principal está aquí, podemos definir todos los títulos de los sitios web, el idioma, las URL, etc. aquí.
contenido: Las páginas de contenido del sitio se almacenan aquí, los subdirectorios se usan para las secciones que ayudan a organizar el contenido, crea un contenido / productos para el contenido de sus productos, por ejemplo
datos: Los datos del sitio como las configuraciones de localización van aquí.
diseños: diseños para la biblioteca html / template Go que utiliza Hugo, haga clic aquí
estático: Cualquier archivo estático aquí se compilará en el sitio web final, se permite la libertad total para que pueda servir cualquier archivo css, js o de imagen, por ejemplo..
temas: Cree nuevos temas o clone temas de github en este directorio para usarlos con su sitio.

"Hola mundo" en Hugo

Necesitamos agregar una publicación para ver el sitio que acabamos de crear, hágalo usando el siguiente comando:

$ hugo nuevo post / first-post.md

Ahora edite el archivo en content / post / first-post.md, contendrá algo similar a lo siguiente por defecto:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "primer mensaje" +++

Materia delantera

El contenido dentro +++ Es la configuración TOML para el post. Esta configuración se llama materia delantera. Le permite definir la configuración de la publicación junto con su contenido. Por defecto, cada publicación tendrá las propiedades de configuración mostradas arriba..

Añadir un texto después de la +++al igual que:

+++ date = "2016-09-26T13: 19: 03 + 07: 00" title = "primer post" +++ Hola mundo!

Servir datos y recargar en vivo

Así que podemos ver la funcionalidad de recarga en vivo que está incorporada con Hugo, hagamos algunos cambios en el sitio y veamos qué sucede.

Primero inicia el servidor ejecutando

$ servidor hugo

Ahora, si realiza algunos cambios en su archivo, verá a Hugo recargarse instantáneamente.

Su sitio web estará disponible en http: // localhost: 1313 pero Espere - todavía solo verás un página en blanco en blanco En este punto, porque no hemos definido un tema.!

Añadir un tema

Hugo tiene una biblioteca de temas muy robusta y versátil, ya que utiliza Go's html / plantilla biblioteca. Es fácil trabajar con los temas, la instalación se realiza simplemente clonando el repositorio de un tema en el temas directorio para su sitio Hugo.

Hugo no viene con un tema por defecto, por lo que debe establecer uno.

Hay un montón de temas de código abierto para elegir.

Agreguemos un montón de temas a nuestro sitio para poder jugar con todos ellos y ver qué nos gusta. Hazlo ejecutando lo siguiente en nuestro directorio de Hugo:

$ git clone --recursive https://github.com/spf13/hugoThemes.git themes Clonación en 'temas' ... remoto: contando objetos: 880, listo. remoto: Compresión de objetos: 100% (5/5), hecho. remoto: Total 880 (delta 1), reutilizado 0 (delta 0), paquete reutilizado 875 Objetos de recepción: 100% (880/880), 669.20 KiB | 288.00 KiB / s, hecho. Resolución de deltas: 100% (506/506), hecho. Comprobando la conectividad ... hecho.

Ahora verá un montón de temas clonados en su sitio. Hay muchas, así que tendrás tiempo para un descanso mientras se clona ...

Usando un tema

Para usar un tema solo comienza Hugo con el -t o --tema parámetro como tal

$ hugo -t ThemeName

O puede agregar a su config.toml :

tema: "ThemeName"

los ThemeName debe coincidir con el nombre del directorio interno / temas.

Cuando haya elegido un nombre de tema del directorio, inicie su servidor con servidor hugo --theme = ThemeName y eche un vistazo a http: // localhost: 1313

Aquí hay algunos ejemplos de algunos de esos temas que clonamos, que usé mendigar, crujiente ycactus echar un vistazo alrededor hay muchos para elegir!

Así que ahora ha generado un sitio web con una publicación de hello world, ¿qué más podemos hacer??

Construyendo un blog

Hacer un blog básico es muy fácil de hacer con Hugo. Primero, deberás definir un arquetipo para la publicación predeterminada, así que crea un nuevo archivo en arquetipos / default.md y agrega lo siguiente como materia delantera

+++ etiquetas = ["soldadura", "trabajo en metal"] categorías = ["mensajes"] +++

Aquí establecemos algunas etiquetas predeterminadas, para un blog sobre soldadura podemos estar seguros de que queremos estas etiquetas en todas nuestras publicaciones, y creamos una categoría llamada publicaciones solo para que tengamos una predeterminada cuando creamos una publicación.

Ahora agrega tu primer post a través del terminal así:

$ hugo new post / tig-welding-a-bike-frame.md

Esto creará una publicación con el arquetipo que definió anteriormente, ahora puede abrirlo en un editor de texto y comenzar a escribir en formato de reducción.!

Vamos a añadir algunas publicaciones más:

$ hugo new post / welding-a-roll-cage.md

Una vez más para agregar contenido, simplemente abra el archivo que Hugo creó y comience a agregar contenido al final del archivo después de la primera parte..

Construyendo una galería de fotos

Para construir una galería de fotos con Hugo usaremos la excelente herramienta. galeria de hugo disponible en GitHub.

Su uso es así:

galeria de hugo [BaseUrl]</code></p><p>los <code>galeria de hugo</code> La herramienta creará un nuevo directorio de publicaciones que contiene un archivo de reducción para cada imagen en el directorio de origen, lo que permite una presentación de diapositivas ordenada. Leerá todos los archivos de la <code>Ruta de origen</code> directorio y guardarlos en el directorio estático del sitio Hugo. <br></p><p>Creará un nuevo directorio dentro del directorio de contenido basado en el <code>Título</code> proporcionado por ejemplo <code>contenido / soldadura</code></p><p>Por ejemplo: </p><pre>$ hugo-gallery estática / imágenes / soldadura-fotos de soldadura "Fotos de mis locas habilidades de soldadura"</pre><p>Visitar <code>localhost: 1313 / soldadura</code> para ver el contenido.</p><h2>Despliegue</h2><p>Hugo tiene varias herramientas para la implementación, como hugomac, que es una aplicación de barra de menús OSX que permite al usuario publicar fácilmente en el alojamiento EC2. No se necesita línea de comando.</p><p>Además, hugodeploy proporciona una configuración de SFTP para implementar, o simplemente puede usar las implementaciones automatizadas que vienen con Hugo.</p><h2>Conclusión</h2><p>Los generadores de sitios estáticos han existido por un tiempo, y Hugo realmente se basa en el conjunto de herramientas, lo que hace que sea rápido y fácil de eliminar sitios, o incluso migrar un sitio existente de WordPress a Hugo. Hay muchas herramientas para Hugo, incluidos los editores de front-end..</p><p>En el futuro, será bueno ver más módulos para Hugo que brinda soporte para cosas como un formulario de contacto y soporte de galería, o publicaciones relacionadas, por ejemplo.. </p><p>La hoja de ruta de Hugo tiene muchas ideas interesantes como el cambio de tamaño dinámico de la imagen, la compatibilidad con rsync y la importación de imágenes de proveedores de alojamiento y el alojamiento más sencillo con la integración de AWS EC2 y GitHub.</p><p>Si aún no está utilizando Hugo, asegúrese de revisar el proyecto a medida que se desarrolla!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Código</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/crafts/make-cute-origami-bunny-decorations-for-easter.html">Hacer lindas decoraciones de conejito de origami para Pascua</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/make-cute-origami-bunny-decorations-for-easter_41.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/crafts/make-copper-and-pearl-earrings-for-valentines-day.html">Hacer pendientes de cobre y perlas para el día de San Valentín.</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_15/make-copper-and-pearl-earrings-for-valentines-day_13.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Buscar..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>