Hugo es un generador de sitios web estáticos de código abierto diseñado para pequeños proyectos y sitios informativos. Está escrito en lenguaje Go, lo que lo hace muy seguro y extremadamente rápido. Hugo brinda una excelente experiencia de escritura y está optimizado para la visualización de sitios web. No necesita instalar ninguna dependencia como PHP, Python o bases de datos para ejecutar los sitios de Hugo.
En este tutorial, le mostraremos cómo instalar y usar el generador de sitios Hugo en Ubuntu 20.04.
Requisitos
- Un Ubuntu 20.04 VPS nuevo en la plataforma en la nube Atlantic.Net
- Una contraseña de root configurada en su servidor
Paso 1:crear el servidor en la nube de Atlantic.Net
Primero, inicie sesión en su servidor en la nube de Atlantic.Net. Cree un nuevo servidor, eligiendo Ubuntu 20.04 como sistema operativo con al menos 1 GB de RAM. Conéctese a su servidor en la nube a través de SSH e inicie sesión con las credenciales resaltadas en la parte superior de la página.
Una vez que haya iniciado sesión en su servidor Ubuntu 20.04, ejecute el siguiente comando para actualizar su sistema base con los últimos paquetes disponibles.
apt-get update -y
Paso 2:instalar Hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.79.0/hugo_0.79.0_Linux-64bit.deb
Una vez descargado el paquete, puede instalarlo con el siguiente comando:
dpkg -i hugo_0.79.0_Linux-64bit.deb
Si ve algún error de dependencia, puede resolverlo con el siguiente comando:
apt-get install -f
Después de instalar Hugo, verifique la versión instalada de Hugo con el siguiente comando:
hugo version
Deberías obtener el siguiente resultado:
Hugo Static Site Generator v0.79.0-1415EFDC linux/amd64 BuildDate: 2020-11-27T09:09:02Z
Paso 3:crea un sitio web con Hugo
Primero, cree un nuevo sitio web llamado web1.doamin.com usando el comando hugo, como se muestra a continuación:
hugo new site web1.domain.com
Deberías obtener el siguiente resultado:
Congratulations! Your new Hugo site is created in /root/web1.domain.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 <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
Puede ver la lista de todos los archivos y directorios generados por Hugo con el siguiente comando:
ls web1.domain.com
Salida:
archetypes config.toml content data layouts static themes
Paso 4:crea tu primera página
Ahora, cambie el directorio a su sitio web y cree una nueva página llamada main.md con el siguiente comando:
cd web1.domain.com hugo new main.md
Deberías obtener el siguiente resultado:
/root/web1.domain.com/content/main.md created
A continuación, edite la página main.md y agregue algo de contenido:
nano content/main.md
Agregue las siguientes líneas al final del archivo:
# Test Page This is my first test page.
Guarde y cierre el archivo cuando haya terminado.
Paso 5:descarga e instala un tema
Primero, cambie el directorio a temas y descargue el tema de Hugo con el siguiente comando:
cd web1.domain.com/themes wget https://github.com/digitalcraftsman/hugo-strata-theme/archive/master.zip
Una vez descargado, descomprima el archivo descargado con el siguiente comando:
unzip master.zip
A continuación, cambie el nombre del directorio extraído con el siguiente comando:
mv hugo-strata-theme-master hugo-strata-theme
A continuación, copie el contenido de muestra del archivo config.toml ubicado dentro del directorio de temas al archivo config.toml predeterminado:
cat hugo-strata-theme/exampleSite/config.toml > ../config.toml
A continuación, edite el archivo config.toml con el siguiente comando:
nano ../config.toml
Cambie la URL base y defina el nombre de su página como se muestra a continuación:
baseurl = "/" [[menu.main]] name = "main" url = "main" weight = 5
Guarde y cierre el archivo, luego cree un archivo de diseño de página de destino con el siguiente comando:
nano /root/web1.domain.com/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.
Paso 6:cree su sitio web
Ahora, cambie el directorio a su sitio web y cree su sitio web de Hugo usando el siguiente comando:
cd /root/web1.domain.com hugo
Deberías obtener el siguiente resultado:
Start building sites …
WARN 2020/12/06 09:21:44 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:21:44 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}
| EN
-------------------+-----
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 26
Processed images | 0
Aliases | 2
Sitemaps | 1
Cleaned | 0 A continuación, inicie el servidor Hugo especificando la IP de su servidor como se muestra a continuación:
hugo server --bind=0.0.0.0 --baseUrl=http://your-server-ip -D -F
Deberías obtener el siguiente resultado:
Start building sites …
WARN 2020/12/06 09:22:02 Page.Hugo is deprecated and will be removed in a future release.
Use the global hugo function.
WARN 2020/12/06 09:22:02 Page.RSSLink is deprecated and will be removed in a future release.
Use the Output Format's link, e.g. something like:
{{ 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 35 ms
Watching for changes in /root/web1.domain.com/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /root/web1.domain.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://69.87.216.179:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop Paso 7:acceda a la interfaz de usuario web de Hugo
Ahora, abra su navegador web y escriba la URL http://your-server-ip:1313 . Debería ver el panel de control de Hugo en la siguiente pantalla:
Haga clic en principal en el panel izquierdo. Deberías ver tu página en la siguiente pantalla:
Conclusión
En la guía anterior, aprendió cómo instalar Hugo y generar un sitio web estático en Ubuntu 20.04. Ahora debería tener suficiente conocimiento para construir su propio sitio web estático fácilmente con Hugo; ¡Pruébelo hoy en alojamiento VPS de Atlantic.Net!