HowtoForge

Tutoriales de Linux

Cómo instalar el generador de sitios Hugo en Ubuntu 18.04 LTS

Hugo es un framework gratuito y de código abierto escrito en lenguaje Go que puede utilizarse para crear sitios web con facilidad. Es un generador de sitios estáticos sencillo, rápido y seguro, que no necesita ninguna base de datos para funcionar. Hugo admite un número ilimitado de tipos de contenido, taxonomías, menús, contenido dinámico basado en la API y mucho más, todo ello sin necesidad de plugins. Hugo viene con un rico conjunto de características que incluyen, una robusta gestión de contenidos, plantillas incorporadas, códigos cortos, salidas personalizadas, multilingüe y muchas más.

En este tutorial, aprenderemos a instalar Hugo en un servidor Ubuntu 18.04 LTS.

Requisitos

  • Un servidor con Ubuntu 18.04.
  • Una dirección IP estática 136.243.240.39 está configurada en tu servidor.
  • Una contraseña de root está configurada en tu servidor.

Cómo empezar

Antes de empezar, tendrás que actualizar tu sistema con la última versión. Puedes hacerlo ejecutando el siguiente comando:

apt-get update -y
 apt-get upgrade -y

Una vez que tu servidor esté actualizado, reinicia tu servidor para aplicar los cambios.

Instalar Hugo

Por defecto, la última versión de Hugo no está disponible en el repositorio por defecto de Ubuntu 18.04. Por tanto, tendrás que descargarla desde el repositorio Git. Puedes descargarlo con el siguiente comando:

wget https://github.com/gohugoio/hugo/releases/download/v0.58.2/hugo_0.58.2_Linux-64bit.deb

Una vez completada la descarga, instala el Hugo con el siguiente comando:

dpkg -i hugo_0.58.2_Linux-64bit.deb

Si obtienes algún error de dependencia, ejecuta el siguiente comando para resolver la dependencia:

apt-get install -f

A continuación, puedes comprobar la versión de Hugo con el siguiente comando:

hugo version

Deberías obtener la siguiente salida:

Hugo Static Site Generator v0.58.2-253E5FDC linux/amd64 BuildDate: 2019-09-13T08:05:59Z

También puedes ver una lista de opciones disponibles con Hugo ejecutando el siguiente comando:

hugo --help

Deberías obtener la siguiente salida:

hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io/.

Usage:
  hugo [flags]
  hugo [command]

Available Commands:
  config      Print the site configuration
  convert     Convert your content to different formats
  deploy      Deploy your site to a Cloud provider.
  env         Print Hugo version and environment info
  gen         A collection of several useful generators.
  help        Help about any command
  import      Import your site from others.
  list        Listing out various types of content
  mod         Various Hugo Modules helpers.
  new         Create new content for your site
  server      A high performance webserver
  version     Print the version number of Hugo

Flags:
  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/
  -D, --buildDrafts            include content marked as draft
  -E, --buildExpired           include expired content
  -F, --buildFuture            include content with publishdate in the future
      --cacheDir string        filesystem path to cache directory. Defaults: $TMPDIR/hugo_cache/
      --cleanDestinationDir    remove files from destination not found in static directories
      --config string          config file (default is path/config.yaml|json|toml)
      --configDir string       config dir (default "config")
  -c, --contentDir string      filesystem path to content directory
      --debug                  debug output
  -d, --destination string     filesystem path to write files to
      --disableKinds strings   disable different kind of pages (home, RSS etc.)
      --enableGitInfo          add Git revision, date and author info to the pages
  -e, --environment string     build environment
      --forceSyncStatic        copy all files when static is changed.
      --gc                     enable to run some cleanup tasks (remove unused cache files) after the build
  -h, --help                   help for hugo
      --i18n-warnings          print missing translations
      --ignoreCache            ignores the cache directory
      --ignoreVendor           ignores any _vendor directory
  -l, --layoutDir string       filesystem path to layout directory
      --log                    enable Logging
      --logFile string         log File path (if set, logging enabled automatically)
      --minify                 minify any supported output format (HTML, XML etc.)
      --noChmod                don't sync permission mode of files
      --noTimes                don't sync modification time of files
      --path-warnings          print warnings on duplicate target paths etc.
      --quiet                  build in quiet mode
      --renderToMemory         render to memory (only useful for benchmark testing)
  -s, --source string          filesystem path to read files relative from
      --templateMetrics        display metrics about template executions
      --templateMetricsHints   calculate some improvement hints when combined with --templateMetrics
  -t, --theme strings          themes to use (located in /themes/THEMENAME/)
      --themesDir string       filesystem path to themes directory
      --trace file             write trace to file (not useful in general)
  -v, --verbose                verbose output
      --verboseLog             verbose logging
  -w, --watch                  watch filesystem for changes and recreate as needed

Una vez que hayas terminado, puedes pasar al siguiente paso.

Crear un sitio web con Hugo

Ahora que Hugo está instalado, es hora de crear un sitio web y contenido con Hugo.

Puedes crear un nuevo sitio web llamado prueba.ejemplo.com ejecutando el siguiente comando:

hugo new site test.example.com

Una vez que el sitio web se haya creado con éxito, deberías obtener la siguiente salida:

Congratulations! Your new Hugo site is created in /root/test.example.com.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme " command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new /.".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

También puedes listar todos los archivos creados en tu sitio web con el siguiente comando:

ls test.example.com/

Deberías ver la siguiente salida:

archetypes  config.toml  content  data  layouts  static  themes

Crear una página Acerca de y una entrada de blog

Ahora, cambia el directorio a tu sitio web y crea una página about.md con el siguiente comando:

cd test.example.com
 hugo new about.md

Deberías ver el siguiente resultado:

/root/test.example.com/content/about.md created

A continuación, abre un archivo about.md y añade algo de contenido:

nano content/about.md

Haz los siguientes cambios:

---
title: "About"
date: 2019-09-10T06:57:08Z
draft: false
---

I am hitesh jethva working as a technical writer.

Guarda y cierra el archivo cuando hayas terminado. A continuación, crea tu primer post con el siguiente comando:

hugo new post/first.md

Deberías ver la siguiente salida:

/root/test.example.com/content/post/first.md created

A continuación, abre el archivo first.md y añade algo de contenido:

nano content/post/first.md

Haz los siguientes cambios:

---
title: "First"
date: 2019-09-10T06:58:51Z
draft: false
---

## This is my first blog post

Hi How are you!

Configura tu primer tema

Ahora que has creado tu página sobre y tu entrada en el blog, es el momento de configurar tu primer tema.

Primero, cambia el directorio a themes y descarga el tema hugo-strata-theme con el siguiente comando:

cd themes
 wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip

Una vez descargado, extrae el tema descargado con el siguiente comando:

unzip master.zip

A continuación, cambia el nombre del tema extraído como se muestra a continuación:

mv hugo-strata-theme-master hugo-strata-theme

A continuación, tendrás que copiar el contenido del archivo config.toml de ejemplo desde themes/hugo-strata-theme al archivo config.toml de tu sitio ubicado en /root/test.example.com/config.toml.

Puedes hacerlo con el siguiente comando:

cat hugo-strata-theme/exampleSite/config.toml > ../config.toml

A continuación, actualiza la variable baseurl y también incluye tu nueva página about en la navegación de este tema en el archivo config.toml como se muestra a continuación:

nano ../config.toml

Actualiza la URL base como se muestra a continuación:

baseurl = "/"

Añade también las siguientes líneas para incluir tu nueva página sobre:

 [[menu.main]]
  name = "About"
  url  = "about"
  weight = 5

Guarda y cierra el archivo cuando hayas terminado.

A continuación, también tendrás que actualizar el diseño de tu página de destino con el diseño de la plantilla del tema que se encuentra en themes/hugo-strata-theme/layouts/index. html a test.example.com/layouts/index.html:

nano /root/test.example.com/layouts/index.html

Añade el siguiente contenido:

{{ define "main" }}
        {{ if not .Site.Params.about.hide }}
                {{ partial "about" . }}
        {{ end }}

        {{ if not .Site.Params.portfolio.hide }}
                {{ partial "portfolio" . }}
        {{ end }}

        {{ if not .Site.Params.recentposts.hide }}
                {{ partial "recent-posts" . }}
        {{ end }}

        {{ if not .Site.Params.contact.hide }}
                {{ partial "contact" . }}
        {{ end }}
{{ end }}

Guarda y cierra el archivo cuando hayas terminado.

Una vez que hayas terminado, puedes pasar al siguiente paso.

Construye tu sitio web

Tu tema ya está configurado para tu sitio web. Es hora de construir tu sitio web. Para ello, cambia el directorio a tu sitio web y construye el sitio con el siguiente comando:

cd /root/test.example.com
 hugo

Deberías ver la siguiente salida:

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 18 ms

Ahora, inicia tu servidor Hugo y enlázalo con la dirección IP de tu servidor ejecutando el siguiente comando:

hugo server --bind=0.0.0.0 --baseUrl=http://136.243.240.39 -D -F

Una vez que el servidor se haya iniciado con éxito, deberías ver la siguiente salida:

                   | EN  
+------------------+----+
  Pages            | 17  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 26  
  Processed images |  0  
  Aliases          |  5  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 28 ms
Watching for changes in /root/test.example.com/{content,data,layouts,static,themes}
Watching for config changes in /root/test.example.com/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://136.243.240.39:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Una vez hecho esto, puedes proceder a acceder a la interfaz web de Hugo.

Acceder al servidor Hugo

Tu servidor Hugo está ahora iniciado y escuchando en el puerto 1313. A continuación, abre tu navegador web y escribe la URL http://136.243.240.39:1313. Serás redirigido a tu panel de control del servidor Hugo como se muestra a continuación:

Sitio web generado con Hugo

Ahora, haz clic en Acerca de en el panel izquierdo. Deberías ver tu página Acerca de en la siguiente imagen:

Acerca de la página

Ahora, haz clic en el botón Blog en el panel izquierdo. Deberías ver la entrada de tu blog en la siguiente imagen:

Primera página

Conclusión

En el tutorial anterior, hemos aprendido a instalar el servidor Hugo en el servidor Ubuntu 18.04. También hemos aprendido a crear un sitio con una página sobre y un tema con Hugo. Para más información sobre Hugo, puedes visitar la documentación oficial de Hugo en Hugo Doc. No dudes en preguntarme si tienes alguna duda.

También te podría gustar...