Comenzando con Hugo: Cómo crear un sitio web simple

Hugo es un generador de sitios estáticos que le permite crear un sitio web con poca o ninguna experiencia en codificación. Puede utilizar temas preconstruidos como base para el diseño de su sitio web. Esto le permite concentrarse más en llenar el sitio con su contenido.

Debido a que Hugo se usa principalmente para sitios web estáticos, es perfecto para crear blogs, portafolios o sitios de documentación.

Puede configurar y crear fácilmente un sitio web de Hugo utilizando un tema de Hugo prediseñado. Con solo unos pocos pasos, puede agregar contenido y páginas a su sitio web usando Markdown.

Cómo instalar Hugo

Necesitas instalar el generador de sitios estáticos de Hugo para crear, ejecutar y probar un sitio web de Hugo. De acuerdo con la Hugo documentación, hay muchas formas de instalarlo. A continuación se muestran algunas de las opciones.

Mac

Puedes instalar Hugo usando Homebrew.

1. Abra su terminal macOS.
2. Instale el administrador de paquetes Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

instagram viewer
3. Instala a Hugo.

   elaborar cerveza Instalar en pc hugo

ventanas

Necesitará un administrador de paquetes equivalente para Windows. Por ejemplo, puede utilizar el Administrador de paquetes Scoop.

1. Abra Windows PowerShell, que ya debería ser parte de su sistema operativo Windows.
2. Si está instalando Scoop por primera vez, es posible que deba configurar su Política de ejecución.

   Colocar-ExecutionPolicy RemoteSigned -alcance Usuario actual

3. Instalar Scoop:

   es decir (nuevo-objeto net.webclient).downloadstring('https://get.scoop.sh')
   

4. Instalar Hugo:

   cucharón Instalar en pc hugo

Cómo crear un proyecto de Hugo

Para crear un nuevo proyecto de Hugo, necesitará usar el integrado hugo nuevo sitio dominio.

1. Abra su terminal o símbolo del sistema. Navegue a la carpeta donde le gustaría crear su proyecto.
2. Ejecutar el hugo nuevo sitio dominio:

   hugo nuevo sitio nuevo-hugo-sitio web

3. Navegue a la ubicación de su proyecto Hugo en su explorador de archivos.
4. Abra la carpeta del proyecto. Verá que su nuevo sitio web de Hugo tiene la estructura de archivos y carpetas necesaria para que su sitio web funcione.

Cómo agregar un tema

Por el momento, su proyecto solo contiene las carpetas base principales para el proyecto Hugo. Ejecutar su sitio web localmente en este punto solo mostraría una pantalla vacía. Dado que aún no tiene ningún diseño HTML, CSS o UI configurado para su sitio web, deberá agregarlos.

Hugo ya proporciona una biblioteca de Temas de Hugo creado por los desarrolladores.

1. Selecciona un tema que te guste. Cada tema puede tener instrucciones de configuración ligeramente diferentes, que se muestran en su página de vista previa respectiva. Este tutorial usará el tema de cuento como ejemplo.
2. Navegue a la carpeta raíz de su proyecto en una terminal o línea de comandos.

   discos compactos nuevo-hugo-sitio web

3. Ejecute el comando para agregar el tema Tale. Puede agregar el tema como un submódulo, lo que creará una nueva carpeta llamada cuento dentro de temática carpeta.

   iniciar git
   submódulo git agregar https://github.com/EmielH/cuento-hugo.git temas/cuento

   Alternativamente, puede clonar el repositorio de cuentos de GitHub en la carpeta de temas de su proyecto.

   git clon https://github.com/EmielH/cuento-hugo.git temas/cuento

4. Navega a la carpeta de tu proyecto. Clickea en el temas carpeta para abrirlo. Independientemente del comando que haya utilizado, habrá un nuevo cuento carpeta que almacena el tema recién descargado.
5. En el config.toml archivo, agregue el tema tale como parte de la configuración. Esto le indicará a Hugo que use HTML, CSS y otros estilos que incluye el tema Tale.

   tema = "cuento"

Cómo agregar páginas a su sitio web

Puedes escribir tu contenido en cualquier formato que acepte Hugo. Hugo convertirá automáticamente sus archivos en archivos HTML cuando se los entregue al usuario. Esto hace que sea rápido tanto para construir como para implementar. Este ejemplo usará Markdown, un lenguaje simple de texto sin formato, como formato para su contenido.

Puede escribir Markdown principalmente en inglés simple con algunos símbolos agregados para especificar cualquier formato. Esto incluye agregar símbolos para representar encabezados, qué palabras están en negrita o cualquier otro formato básico que pueda necesitar.

Para agregar una nueva subpágina o publicación a su sitio web, deberá agregar un nuevo archivo Markdown en el contenido carpeta. Cada publicación o página tendrá su propio archivo Markdown asociado.

1. Abre el contenido carpeta dentro de su proyecto Hugo. Cree un nuevo archivo Markdown llamado myFirstPost.md.
2. Abra el archivo en cualquier editor de texto como Notepad++ o Visual Studio Code.
3. En la parte superior del archivo, agregue algunos metadatos. Esto incluirá información importante sobre la publicación. El tema que está utilizando formateará esta información de cierta manera en la página.

   
   autor: "Su nombre"
   título: "mi primera publicación"
   fecha: "2022-05-17"
   

4. Una vez que haya agregado los metadatos, puede comenzar a agregar su contenido usando Markdown.

   Este es ¡mi primera publicación en mi sitio web de Hugo!
   El tema de Hugo que se utiliza poreste el sitio se llama Tale.
   Eso es muy simple de instalar y configurar.
   # subtítulo
   Este es algún contenido.
   # Otro Subtítulo
   Este es más contenido

5. Siéntase libre de agregar más archivos de rebajas para agregar más páginas a su sitio web.

Cómo ejecutar y probar su sitio web de Hugo localmente

Para ejecutar su sitio web, utilice el servir hugo dominio.

1. Abra una terminal o línea de comando.
2. Navegue a la carpeta raíz de su proyecto Hugo.
3. ejecutar el servir hugo dominio:

   servir hugo

4. Espere a que el sitio web complete el proceso de inicio. Una vez que se haya completado, la terminal imprimirá un mensaje que indica desde qué dirección local puede acceder al sitio web. Por lo general, esto es http://localhost: 1313/.
5. Abra un navegador web e ingrese http://localhost: 1313/, o la dirección que te haya dado el terminal. Verá la página principal de su sitio web de Hugo.
6. En la página habrá una lista de publicaciones para cada archivo de descuento que tenga. En este caso, hay dos archivos de rebajas poblados con contenido. Esto incluye la página myFirstPost.md que creó anteriormente. También incluye una nueva publicación llamada bananaCakeRecipe.md.
7. Haga clic en el enlace del título en una de las vistas previas. Te llevará a la página completa de esa publicación en particular.

Hospedaje de su sitio web de Hugo

Poner en funcionamiento un sitio web estático es simple y rápido con Hugo. Puede usar y configurar temas preconstruidos y ejecutar su sitio web de Hugo localmente para realizar pruebas. También puede agregar páginas de contenido a su sitio web usando Markdown.

Una vez que haya creado su sitio web de Hugo, puede comenzar a aprender más sobre cómo alojarlo. Hay muchas opciones gratuitas de alojamiento de sitios web entre las que puede elegir, como Dropbox, Google Drive o OneDrive.

Cómo obtener alojamiento de sitios web gratuito con Dropbox, Google Drive o OneDrive

Leer siguiente