Cómo crear un sitio web usando Hugo en Debian 11

Sitio web generado con Hugo

Hugo es un marco de sitio web gratuito y de código abierto escrito en desarrollado en Go. Hugo proporciona un generador de sitios estáticos confiable y moderno que le permite crear fácilmente un sitio web simple y rápido. Viene con plantillas prefabricadas y otras características que incluyen SEO, comentarios, análisis y otras funciones. Los sitios de Hugo pueden ejecutarse sin costosos tiempos de ejecución como PHP, Python, Ruby y no necesitan ninguna base de datos.

En esta publicación, le mostraremos cómo instalar y usar el generador de sitios Hugo en Debian 11.

Requisitos previos

  • Un servidor que ejecuta Debian 11.
  • Una contrase√Īa de root est√° configurada en el servidor.

Instalar Hugo en Debian 11

De forma predeterminada, el paquete Hugo se incluye en el repositorio predeterminado de Debian 11. Puedes instalarlo usando el siguiente comando:

apt-get install hugo -y

Una vez que Hugo esté instalado, puede verificar la versión de Hugo usando el siguiente comando:

hugo version

Deberías obtener el siguiente resultado:

Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2021-07-18T09:31:51Z (debian 0.80.0-6+b5)

Crear un sitio web con Hugo

En esta sección, crearemos un nuevo sitio web llamado hugo.example.com.

Ejecute el siguiente comando para crear un sitio web:

hugo new site hugo.example.com

Una vez que se crea el sitio web, debe obtener el siguiente resultado:

Congratulations! Your new Hugo site is created in /root/hugo.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.

Puede listar todos los archivos creados por Hugo usando el siguiente comando:

ls -l hugo.example.com

Obtendr√° el siguiente resultado:

drwxr-xr-x 2 root root 4096 Nov 13 09:27 archetypes
-rw-r--r-- 1 root root   82 Nov 13 09:27 config.toml
drwxr-xr-x 2 root root 4096 Nov 13 09:27 content
drwxr-xr-x 2 root root 4096 Nov 13 09:27 data
drwxr-xr-x 2 root root 4096 Nov 13 09:27 layouts
drwxr-xr-x 2 root root 4096 Nov 13 09:27 static
drwxr-xr-x 2 root root 4096 Nov 13 09:27 themes

Crear una página Acerca de y una publicación de muestra

Primero, cambie el directorio a su sitio web usando el siguiente comando:

cd hugo.example.com

A continuación, cree una página acerca de con el siguiente comando:

hugo new about.md

Obtendr√° el siguiente resultado:

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

A continuación, edite la página about.md con el siguiente comando:

nano content/about.md

Cambie el archivo como se muestra a continuación:

---
title: "About Us"
date: 2021-11-13T09:28:18Z
draft: false
---

This is About Us page for this website.

A continuación, cree una publicación de muestra con el siguiente comando:

hugo new post/page.md

Obtendr√° el siguiente resultado:

/root/hugo.example.com/content/post/page.md created

A continuación, edite la página de publicación de muestra con el siguiente comando:

nano content/post/page.md

Cambie el archivo como se muestra a continuación:

---
title: "Page"
date: 2021-11-13T09:29:29Z
draft: true
---

# Hugo Page

This is my first hugo website page!

Guarde y cierre el archivo cuando haya terminado.

Instalar temas en su sitio web

A continuación, deberá descargar y configurar un tema para acceder a su sitio web de Hugo.

Primero, cambie el directorio a temas con el siguiente comando:

cd themes

A continuación, descargue el tema de Hugo con el siguiente comando:

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

A continuación, descomprima el tema descargado con el siguiente comando:

unzip master.zip

A continuación, cambie el nombre del tema extraído con el siguiente comando:

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

A continuación, copie el contenido de config.toml en la configuración de su sitio.

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

A continuación, edite el archivo config.toml con el siguiente comando:

nano ../config.toml

Agregar/Modificar las siguientes líneas:

baseurl = "/"

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

Guarde y cierre el archivo y luego cree un archivo index.html para su sitio web:

cd ../
nano layouts/index.html

Agregue las siguientes líneas:

{{ 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 }}

Guarde y cierre el archivo.

Crea y lanza tu sitio web

Ahora, deber√° crear su sitio web para usarlo. Puedes construirlo ejecutando el siguiente comando:

hugo

Obtendr√° el siguiente resultado:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

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

Total in 48 ms

Luego, inicie el servidor Hugo y vinc√ļlelo con la IP de su servidor usando el siguiente comando:

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

Obtendr√° el siguiente resultado:

    {{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}

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

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

En este punto, el servidor de Hugo se inicia y escucha en el puerto 1313.

Accede al sitio web de Hugo

Ahora, abra su navegador web y acceda a su sitio web usando la URL http://su-servidor-ip:1313. Debería ver la página predeterminada de Hugo:

Sitio web generado con Hugo

Haga clic en el Sobre en el panel izquierdo. Debería ver su página Acerca de en la siguiente pantalla:

P√°gina

Conclusión

¡Felicidades! Ha instalado Hugo con éxito y ha creado un sitio web en Debian 11. Ahora puede crear un sitio web seguro y rápido fácilmente con Hugo.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *