Téléchargement tinystatic - Téléchargement du code source tinystatic

tinystatic

Autres catégories

JS helper functions; Dynamic URLs

Télécharger

minusculestatique

Un petit générateur de site Web statique, flexible et facile à utiliser. Il est flexible, car il n'y a pas de structure de site Web requise ni de concepts spécifiques au blog. Il est facile à utiliser, car nous pouvons commencer avec un site HTML standard et introduire progressivement tinystatic.

Le concept de tinystatic est simple : à partir de chaque fichier d'un répertoire d'entrée, créez un fichier dans un répertoire de sortie que nous pouvons ensuite utiliser comme répertoire public de notre serveur Web. La façon dont tinystatic génère un fichier de sortie dépend de l'extension du fichier d'entrée : Markdown est converti en HTML, tandis que CSS, JS et les images sont simplement copiés. Pour les fichiers markdown et HTML, vous pouvez spécifier des métadonnées en haut d'un fichier. En spécifiant un modèle dans les métadonnées de ce fichier et en fournissant des modèles dans des répertoires séparés, vous pouvez utiliser le moteur de création de modèles HTML de Go. Voici un exemple de site Web de blog typique et pour un guide de démarrage rapide, voir ci-dessous.

Installer

Binaires pré-construits

Téléchargez le binaire tinystatic pour votre système d'exploitation :

Linux
macOS

Facultativement, ajoutez le binaire à votre chemin shell, soit en plaçant le binaire dans un répertoire existant comme /usr/bin , soit en ajoutant le répertoire parent du binaire à votre variable de chemin.

Si vous avez ajouté tinystatic à votre chemin, vous devriez pouvoir appeler

tinystatic -help

Sinon, vous devrez spécifier le chemin d'accès au binaire tinystatic lors de son appel.

/path/to/tinystatic -help

Compilation à partir des sources

Si vous ne souhaitez pas utiliser les binaires prédéfinis, vous devrez installer le compilateur Golang pour compiler tinystatic. Ensuite, vous pouvez installer tinystatic en exécutant

go install -u github.com/julvo/tinystatic

ou en clonant le référentiel et en exécutant go install ou go build dans le répertoire racine de ce référentiel.

Démarrage rapide

Il s'agit d'un didacticiel de 10 minutes dans lequel nous construisons un petit blog, en commençant par une seule page HTML et en présentant les fonctionnalités de tinystatic une par une.

Tout d’abord, nous créons un dossier appelé routes . Dans ce dossier, nous créons un seul fichier HTML index.html avec le contenu suivant :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

Maintenant, nous pouvons exécuter tinystatic pour la première fois. Par défaut, tinystatic s'attend à être appelé dans le répertoire contenant le répertoire routes , mais vous pouvez modifier cela en utilisant le paramètre -routes . Après avoir exécuté la commande, vous devriez voir une output de dossier apparaître à côté du dossier routes . Notre structure de fichiers ressemble maintenant à ceci :

 my-blog/
    routes/
        index.html
    output/
        index.html

Nous pouvons maintenant exécuter un serveur Web dans le répertoire de sortie, par exemple en utilisant le serveur intégré de Python pour ouvrir notre site Web sur http://localhost:8000 :

 cd output
python3 -m http.server

Jusqu'à présent, tout ce que tinystatic a fait a été de copier le index.html des routes vers output - pas très utile, mais accrochez-vous...

Ajoutons un deuxième fichier HTML à routes , par exemple about.html :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

Après avoir exécuté à nouveau tinystatic et avec notre serveur Web toujours en cours d'exécution, nous pouvons maintenant accéder à http://localhost:8000/about . Notez qu'il n'y a plus de .html dans cette route, car tinystatic a créé un dossier about un seul index.html , comme ceci :

 output/
    index.html
    about/
        index.html

Ce que nous n'aimons pas dans nos pages actuelles, c'est la duplication de toute la structure HTML de base. Ne serait-il pas préférable d'utiliser un modèle partagé pour index.html et about.html ?. Pour ce faire, nous créons un dossier appelé templates à côté de notre dossier routes et y plaçons un fichier HTML default.html :

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

Le contenu de default.html doit être :

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

De plus, nous modifions le contenu de routes/index.html en

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

et le contenu de routes/about.html à

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

Lors de l'exécution à nouveau tinystatic , la sortie est identique à la sortie précédente, mais nous avons consolidé le squelette HTML en un seul endroit.

Comme nous venons de le voir, nous pouvons spécifier un modèle dans lequel restituer notre contenu en fournissant un nom de modèle dans les métadonnées en haut d'un fichier. Nous pouvons également inclure d'autres modèles (voir ci-dessous) et utiliser les pipelines de modèles de Go. Lors du rendu, nous avons accès aux métadonnées définies en haut du fichier, une struct Route avec les champs Route.Href , Route.FilePath et Route.Meta qui est encore une fois une carte de métadonnées définie en haut du fichier. De plus, nous pouvons accéder Routes , qui est une tranche (pensez : un tableau pour les nouveaux utilisateurs de Go) de toutes les routes, sur lesquelles nous en apprendrons davantage plus loin.

Utilisons ces métadonnées avec les primitives de modèles de Go pour modifier le titre de la page en fonction de la page actuelle. Pour cela, nous modifions les métadonnées dans routes/about.html en

 ---
template: default.html
title: About
---

et enfin changez templates/default.html en

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

Après avoir régénéré le site Web, le navigateur devrait maintenant afficher différents titres de page pour notre index et notre page À propos.

Maintenant, créons quelques articles de blog dans notre dossier routes, par exemple

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

Placez des démarques dans ces fichiers .md avec une section de métadonnées en haut spécifiant le modèle comme default.html , de la même manière que nous avons spécifié les métadonnées dans routes/index.html et routes/about.html . Pour first_post.md , cela pourrait ressembler à ceci :

 ---
template : default.html
title : First Post
---

# Here could be some fine content

En exécutant à nouveau tinystatic pour régénérer la sortie, nous pouvons maintenant visiter http://localhost:8000/posts/first_post et http://localhost:8000/posts/second_post . La démarque a été convertie en HTML et placée dans un modèle appelé body pour nous, afin qu'elle s'affiche dans l'espace réservé {{template "body" .}} dans templates/default.html . Notez en quoi cela est différent des fichiers .html , où nous devons appeler {{define "body"}} ... {{end}} manuellement.

Ensuite, créons une liste de nos publications en utilisant la tranche Routes susmentionnée. Nous modifions le contenu de routes/index.html comme suit :

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

Après la régénération, nous devrions voir une liste de nos publications sur la page d'index. La tranche Routes fournit une liste de toutes les routes que nous pouvons filtrer à l'aide de fonctions d'assistance prédéfinies, par exemple

.Routes | filterFilePath "**/posts/*.md" pour afficher tous les fichiers se terminant par .md dans n'importe quel dossier appelé posts
.Routes | sortAsc "title" pour trier les itinéraires en fonction du title du champ de métadonnées
.Routes | limit 10 pour obtenir uniquement les 10 premiers itinéraires
.Routes | offset 3 pour ignorer les trois premiers itinéraires
.Routes | filter "title" "*Post" pour filtrer en fonction du title du champ de métadonnées correspondant au modèle *Post
.Routes | filterFileName "*.md" pour obtenir tous les fichiers se terminant par *.md
.Routes | filterHref "/*" pour obtenir toutes les routes de niveau supérieur
.Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 pour combiner certains des éléments ci-dessus

Ensuite, nous aimerions utiliser une mise en page différente pour les articles et pour les autres pages. Les publications doivent avoir une image avant le texte, par laquelle nous souhaitons définir l'URL de l'image dans les métadonnées de la publication. Par conséquent, nous ajoutons un deuxième modèle appelé templates/post.html avec le contenu suivant :

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

Nous modifions les métadonnées de publication en

 ---
template: post.html
title: First Post
image: https://some-image.url
---

Régénérer la sortie devrait nous donner une belle image au-dessus de notre message. Cependant, nous nous sommes également retrouvés avec du code HTML dupliqué dans nos modèles. Pour améliorer cela, nous créons un autre dossier à côté routes et templates appelés partials . À l'intérieur des partiels, nous créons un fichier appelé head.html avec

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

et nous remplaçons <head>...</head> dans nos modèles par {{template "head" .}} , comme ceci

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

Nous avons désormais réduit au minimum la réplication du code entre différents modèles. Nous pouvons utiliser ce répertoire partials pour stocker toutes sortes de composants récurrents, par exemple des barres de navigation ou des pieds de page.

Notez que nous n'avons pas réellement besoin de structurer le projet en utilisant les noms de dossiers que nous avons utilisés dans ce didacticiel. Ces noms de dossiers sont simplement les noms par défaut, mais peuvent être modifiés à l'aide des arguments de ligne de commande respectifs (voir tinystatic -help pour en savoir plus).

Il y a un exemple complet de blog ici.

Développer

Informations supplémentaires