tinystatic
JS helper functions; Dynamic URLs
Un pequeño generador de sitios web estáticos que es flexible y fácil de usar. Es flexible, ya que no se requiere una estructura de sitio web ni conceptos específicos de blog. Es fácil de usar, ya que podemos comenzar con un sitio HTML estándar e introducir tinystatic gradualmente.
El concepto de tinystatic es simple: de cada archivo en un directorio de entrada, crea un archivo en un directorio de salida que luego podemos usar como directorio público de nuestro servidor web. La forma en que tinystatic genera un archivo de salida depende de la extensión del archivo de entrada: Markdown se convierte a HTML, mientras que CSS, JS y las imágenes simplemente se copian. Para archivos HTML y de rebajas, puede especificar metadatos en la parte superior de un archivo. Al especificar una plantilla en los metadatos de este archivo y proporcionar plantillas en directorios separados, puede utilizar el motor de plantillas HTML de Go. A continuación se muestra un ejemplo de un sitio web de blog típico y, para obtener una guía de inicio rápido, consulte a continuación.
Descarga el binario tinystatic para tu sistema operativo:
Opcionalmente, agregue el binario a su ruta de shell, ya sea colocando el binario en un directorio existente como /usr/bin o agregando el directorio principal del binario a su variable de ruta.
Si agregó tinystatic a su ruta, debería poder llamar
tinystatic -helpDe lo contrario, deberá especificar la ruta al binario tinystatic al llamarlo
/path/to/tinystatic -helpSi no desea utilizar los binarios prediseñados, deberá instalar el compilador Golang para compilar tinystatic. Luego, puedes instalar tinystatic ejecutando
go install -u github.com/julvo/tinystatic o clonando el repositorio y ejecutando go install o go build en el directorio raíz de este repositorio.
Este es un tutorial de 10 minutos en el que creamos un pequeño blog, comenzando con una sola página HTML e introduciendo las características de tinystatic una por una.
Primero, creamos una carpeta llamada routes . Dentro de esta carpeta creamos un único archivo HTML index.html con el siguiente contenido:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > Welcome to our blog </ h1 >
</ body >
</ html > Ahora podemos ejecutar tinystatic por primera vez. De forma predeterminada, tinystatic espera ser llamado en el directorio que contiene el directorio routes , pero puede cambiarlo usando el parámetro -routes . Después de ejecutar el comando, debería ver una output de carpeta que aparece junto a la carpeta routes . Nuestra estructura de archivos ahora se ve así:
my-blog/
routes/
index.html
output/
index.html
Ahora podemos ejecutar un servidor web en el directorio de salida, por ejemplo, usando el servidor integrado de Python para abrir nuestro sitio web en http://localhost:8000 :
cd output
python3 -m http.server
Hasta ahora, todo lo que tinystatic hizo fue copiar el index.html de routes a output ; no es tan útil, pero aguanta...
Agreguemos un segundo archivo HTML a routes , por ejemplo, about.html :
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
< h1 > About us </ h1 >
</ body >
</ html > Después de ejecutar tinystatic nuevamente y con nuestro servidor web aún ejecutándose, ahora podemos navegar a http://localhost:8000/about . Tenga en cuenta que ya no hay .html en esta ruta, ya que tinystatic creó una about con un solo index.html , así:
output/
index.html
about/
index.html
Lo que no nos gusta de nuestras páginas actuales es la duplicación de toda la estructura HTML básica. ¿No sería mejor utilizar una plantilla compartida para index.html y about.html ? Para hacer esto, creamos una carpeta llamada templates al lado de nuestra carpeta routes y colocamos un archivo HTML default.html dentro de ella:
my-blog/
routes/
index.html
about.html
templates/
default.html
El contenido de default.html debería ser:
<!doctype html >
< html >
< head >
< title > Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html > Además, cambiamos el contenido de routes/index.html a
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}} y el contenido de routes/about.html a
---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}} Al ejecutar tinystatic nuevamente, el resultado es idéntico al resultado anterior, pero consolidamos el esqueleto HTML en un solo lugar.
Como se vio hace un momento, podemos especificar una plantilla para representar nuestro contenido proporcionando un nombre de plantilla en los metadatos en la parte superior de un archivo. También podemos incluir otras plantillas (ver más abajo) y utilizar las canalizaciones de plantillas de Go. Mientras renderizamos, tenemos acceso a los metadatos definidos en la parte superior del archivo, una estructura Route con los campos Route.Href , Route.FilePath y Route.Meta que es nuevamente un mapa de metadatos definidos en la parte superior del archivo. Además, podemos acceder Routes , que es una porción (piense: una matriz para personas nuevas en Go) de todas las rutas, sobre las cuales aprenderemos más más adelante.
Usemos estos metadatos junto con las primitivas de plantillas de Go para cambiar el título de la página según la página actual. Para esto, cambiamos los metadatos en routes/about.html a
---
template: default.html
title: About
---
y finalmente cambie templates/default.html a
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
{{template "body" .}}
</ body >
</ html >Después de regenerar el sitio web, el navegador ahora debería mostrar diferentes títulos de página para nuestro índice y nuestra página Acerca de.
Ahora, creemos algunas publicaciones de blog en nuestra carpeta de rutas, por ejemplo
routes/
index.html
about.html
posts/
first_post.md
second_post.md
Coloque algunas rebajas dentro de estos archivos .md con una sección de metadatos en la parte superior que especifica la plantilla como default.html , similar a cómo especificamos los metadatos en routes/index.html y routes/about.html . Para first_post.md , esto podría verse así:
---
template : default.html
title : First Post
---
# Here could be some fine content
Al ejecutar tinystatic nuevamente para regenerar la salida, ahora podemos visitar http://localhost:8000/posts/first_post y http://localhost:8000/posts/second_post . La rebaja se convirtió en HTML y se colocó dentro de una plantilla llamada body para nosotros, de modo que se represente en el marcador de posición {{template "body" .}} en templates/default.html . Tenga en cuenta que esto es diferente a los archivos .html , donde debemos llamar {{define "body"}} ... {{end}} manualmente.
A continuación, creemos una lista de nuestras publicaciones utilizando el segmento Routes mencionado anteriormente. Cambiamos el contenido de routes/index.html a:
---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
< a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul > Después de regenerar, deberíamos ver una lista de nuestras publicaciones en la página de índice. El segmento Routes proporciona una lista de todas las rutas que podemos filtrar usando funciones auxiliares predefinidas, por ejemplo
.Routes | filterFilePath "**/posts/*.md" para mostrar todos los archivos que terminan en .md en cualquier carpeta llamada publicaciones.Routes | sortAsc "title" para ordenar rutas según el title del campo de metadatos.Routes | limit 10 para obtener solo las primeras 10 rutas.Routes | offset 3 para omitir las primeras tres rutas.Routes | filter "title" "*Post" para filtrar según el title del campo de metadatos que coincida con el patrón *Post.Routes | filterFileName "*.md" para obtener todos los archivos que terminan en *.md.Routes | filterHref "/*" para obtener todas las rutas de nivel superior.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 para combinar algunos de los anteriores A continuación, nos gustaría utilizar un diseño diferente para las publicaciones que para las otras páginas. Las publicaciones deben tener una imagen antes del texto, por lo que queremos definir la URL de la imagen en los metadatos de la publicación. Por lo tanto, agregamos una segunda plantilla llamada templates/post.html con el siguiente contenido:
<!doctype html >
< html >
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
< body >
< img src = {{.image}} />
{{template "body" .}}
</ body >
</ html >Cambiamos los metadatos de la publicación a
---
template: post.html
title: First Post
image: https://some-image.url
---
Regenerar la salida debería darnos una hermosa imagen encima de nuestra publicación. Sin embargo, también terminamos nuevamente con código HTML duplicado en nuestras plantillas. Para mejorar eso, creamos otra carpeta junto a routes y templates llamada partials . Dentro de los parciales, creamos un archivo llamado head.html con
{{define "head"}}
< head >
< title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}} y reemplazamos <head>...</head> en nuestras plantillas con {{template "head" .}} , así
<!doctype html >
< html >
{{template "head" .}}
< body >
{{template "body" .}}
</ body >
</ html > Ahora reducimos al mínimo la replicación de código entre diferentes plantillas. Podemos utilizar este directorio partials para almacenar todo tipo de componentes recurrentes, por ejemplo, barras de navegación o pies de página.
Tenga en cuenta que en realidad no necesitamos estructurar el proyecto usando los nombres de carpeta que usamos en este tutorial. Los nombres de estas carpetas son simplemente los predeterminados, pero se pueden cambiar usando los argumentos de la línea de comando respectivos (consulte tinystatic -help para obtener más información).
Hay un ejemplo completo de un blog aquí.
