Un calendrier pour Hugo

  |   Source

Depuis quelques années, je maintiens un simili site web pour le conseil local FCPE de Montrabé. Ce site est strictement sans ambition et relève essentiellement de la carte de visite afin que l'on puisse nous trouver via Internet. Vu la simplicité, je le maintiens à la main, en rédigeant directement le HTML qui le compose. Il ne contient qu'une seule partie un peu dynamiqe : le calendrier des événements. Celui-ci est créé avec fullcalendar, c'est à dire un bout de JavaScript qui contient une série d'événements en JSon.

Récemment, il s'est fait sentir qu'il était temps de changer le style du site, voire de prévoir d'aller un peu plus loin en permettant l'ajout de contenus plus conséquent. L'idée d'un site Web rédigé à la main était donc naturellement remise en cause. L'évolution naturelle consistait donc à convertir tout le site pour le faire générer par un générateur de site statique.

Or, quand on a dit ça, on a rien dit, tant il existe de générateurs de sites statiques. Personnellement, j'utilise avec une certaine satisfaction le générateur Nikola pour mon site personnel. Comme en même temps j'ai entendu parler du générateur Hugo, un générateur en Go simple et rapide, c'était donc l'occasion réver de l'essayer.

Convertir ce très simple site web pour qu'il soit généré par Hugo n'a pas été particulièrement compliqué, si ce n'est que le site n'est pas un blog et qu'il m'a un peu fallut luter contre les apprioris de l'outil pour générer une homepage statique.

Ensuite, j'ai pu m'attaquer au calendrier. Dans le sous-dossier content/agenda j'ai créé autant de billets que d'événements. Chacun contient exclusivement une entète (front matter) avec les informations suivantes : title, start, end et color. Ensuite, dans le fichier layouts/section/agenda.html j'ai remplacé la série d'événements par

                      events: [
{{ range .Data.Pages }}
                                {
                                        title: "{{ .Title }}",
                                        start: "{{ .Params.start }}",
                                        {{ if .Params.end }}
                                        end: "{{ .Params.end }}",
                                        allDay: false,
                                        {{ else }}
                                        allDay: true,
                                        {{ end }}
                                        {{ if .Params.color }}
                                        color: {{ .Params.color }},
                                        {{ end }}
                                },
{{ end }}
                        ]

Maintenant, il me suffit de créer un simple fichier pour que l'agenda se mette à jour avec une simple commande : hugo.