Usuario:ManuelRomero/DesarrolloWeb/Estatico

Desarrollo de páginas estáticas

• Está desarrollado en lenguaje Go
• MRM_PENDIENTE Comentarios sobre la diferencia entre un sistio estático y uno dinámico ....

Aplicaciones para desarrollar sitios estáticos

https://jamstack.org/generators/ https://gohugo.io/

Instalación

sudo apt-get install hugo

Crear un nuevo proyecto

hugo new site probando_hugo Esto nos creará una carpeta con dicho nombre, dentro de la cual tendremos una estructura de ficheros como mostramos en el siguiente apartado Después de crear el proyecto nos muestra un mensaje de cómo podemos proceder para poder ver nuestro sitio en el navegador

Estructura de ficheros creados

Vemos la siguiente estructura de ficheros Posteriormente iremos viendo el significado y utilidad de cada carpeta y ficheros.

Selecconar un tema

Por tema vamos a entender el formato o estilo de nuestra página Por supuesto podemos crear uno nuestro o modificar uno que esté disponible Los temas disponibles, los podemos ver en https://themes.gohugo.io/ Para instalar un tema procedemos de la siguiente manera: Lo podemos descargar la web (opción download de la página del tema) Lo podemos instalar directamente con git en la carpeta correspondiente o especificándolo en la descarga git init #Inicializamos git en el directorio actual git submodule init #Inicializamos git para instalar submódulos en el directorio actual git submodule add https://git.okkur.org/syna themes/syna #Instala este tema en la carpeta thems Una vez realizada esta acción, ya tendremos el tema instalado (ver contenido del directorio themes Podríamos instalar todos los temas y luego ir seleccionando uno u otro git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes Una vez instalado el tema, hay que especificar en el fichero de configuración qué tema vamos a usar La configuración del sitio se establece en el fichero config.toml Lo abrimos y añadimos el tema en este caso syna o el que queramos establecer theme="syna"

Añadiendo contenido a nuestro sitios

Ahora vamos a escribir el contenido de nuestras páginas de nuestro sitio web Para ellos escribiremos en texto plano en ficheros md (con sintaxis Markdonw https://markdown.es/sintaxis-markdown/) Podremos añadir tantos ficheros como contenido queremos crear y cada fichero de la extensión que necesitemos. Es importante organizar bien los contenidos, de momento vamos a crear un fichero Se puede hacer directamente en el editor o usar comandos de hugo hugo new index.md Esto nos creará un fichero index.md en la carpeta de content El contenido del fichero es mínimo

Escribiendo contenido

Ahora podemos escribir contenido en el fichero y observar el resultado Vamos a escribier en un fichero lo que quisiéramos publicar, por ejemplo escribimos # Creación de sitios Web con Hugo   ****Hugo**** es un sotfware que nos va a permitir crear sitios web con contenido estático. Podemos considerarlo un CSM pero sin posibilidad de agregar bases de datos ni formularios para interactuar con el usuario Su cometido es visualizar de forma agradable y fácil el contenido de fihceros de texto como éste. El formato del texto escrito es formato markdown. Así si queremos ver un listado de viñetas   * Este es un item * Este es otro ite * Etc etc   También podemos visualizar código fuente ````html <h1>Esto es texto de primera línea</h1> ```` ---