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:
Ahora, haz clic en Acerca de en el panel izquierdo. Deberías ver tu página Acerca de en la siguiente imagen:
Ahora, haz clic en el botón Blog en el panel izquierdo. Deberías ver la entrada de tu blog en la siguiente imagen:
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.