2017-10-17

Dernièrement, je me rendais compte que l'entreprise qui héberge mon site Web, fourni des certificats SSL (OpenSSL de cPanel.inc) depuis la fin mai. En plus d'être disponibles à l'ancienne adresse telle http://sigmdel.ca/michel/ha/ha_index_fr.html, toutes les pages sont accessibles à la même adresse, mais de façon sécuritaire via HTTPS https://sigmdel.ca/michel/ha/ha_index_fr.html. Le petit cadenas vert est maintenant visible dans la barre d'adresse: .

Voilà qui devrait inspirer confiance et qui m'enlève un souci devant l'attitude de plus en plus exigeante de Google vis-à-vis la sécurité des sites. Tout cela a été fait de façon transparente sans que je m'en rende compte et sans déboursement de ma part. Alors merci Hébergement Web Canada.

Un seul hic, les fichiers de style et les images n'étaient plus visibles alors qu'on descendait dans la hiérarchie de fichier HTML. Il fallait trouver un solution.

En même temps, il était temps de réorganiser le site. Tout était plus ou moins rangé comme dans un fourre-tout. Je m'y perdais et mettre à jour le site devenait une tâche ardue.

Table des matières

La balise base

GTML et la balise base

Engendrer le site en un clic

Copier les fichiers binaires

tdm

La balise `base`

J'ai essayé de régler le problème avec des liens symboliques (symlink). Cela fonctionnait sauf que le nom affiché dans la barre d'adresse ne correspondait plus au véritable fichier HTML. Il fallait une meilleure solution.

Comme c'est souvent le cas, la solution est arrivée pendant le sommeil. Dans tous les fichiers HTML du site, on retrouvait les balises suivantes dans la section HEAD :

<base href="http:sigmdel.ca/michel/index.html">
<link href="css/basic.css" type="text/css" rel="stylesheet">

La solution était simple; changer la balise base de

<base href="http://sigmdel.ca/michel/index.html">

<base href="/michel/index.html">

tdm

GTML et la balise `base`

Certains pourraient se demander pourquoi employer la balise base pour ancrer mon site. Par commodité simplement. Si l'on se sert d'adresses relatives et si le fichier de style CSS est ailleurs dans la hiérarchie des dossiers, alors il devient difficile d'en indiquer l'adresse. On doit écrire quelque chose comme ceci :

  <link href="../../../ha/css/spec.css" type="text/css" rel="stylesheet">

GTML

link

Quand on utilise des adresse absolues, il faudrait refaire tout le site si jamais on devait le déménager. Plus conséquent, en ce qui me concerne, il faudrait refaire tous les liens pour avoir une copie locale du site.

Voici le début du fichier projet GMTL de mon site :

// site.gtp: fichier projet pour mon site personnel
//
// Il y a deux versions selon la directive LOCAL_HOME
//
// Si LOCAL_HOME est défini alors le site est créé sur mon ordi dans
// le répertoire
//   /home/michel/Site/local
// Tous les liens fonctionnent et je peux consulter ces pages locales
// en tout temps.
//
// Si LOCAL_HOME n'est pas défini alors le site est crée sur mon ordi
// dans le répertoire
//   /home/michel/Site/sigmdel
// pour être ensuite copier sur mon compte chez l'hébergeur du site Web.
// Les liens sont tous en relation avec ce  site externe (et ne fonctionnent
// pas sur l'ordinateur local)?
//
// Dans les deux cas pour que les liens soient corrects ils doivent être
// spécifiés en termes absolus comme   ha/ha_index_fr.html

define LOCAL_HOME

ifdef LOCAL_HOME
define BASE "file:///home/michel/Site/local/index.html"
define OUTPUT_DIR ../local
else
define BASE "/michel/index.html"
define INCLUDE_SEARCH 
define OUTPUT_DIR ../sigmdel
endif

Et voici un peu à quoi ressemble le dossier contenant les fichiers sources du site.

[home]
   |
   +--[Site]
   |    |
   |    +--[local]
   |    +--[sigmdel]
   |    +--[src]
   |         |
   |         +--[css]
   |         +--[ha]
   |         +--[program]
   .         +--0_foot.gtt
   .         +--0_head.gtt
   .         +--0_topmenu.gtt
             +--about_en.gtm
             +--about_fr.gtm
             +--archives_en.gtm
             +--archives_fr.gtm
             +--downloads_en.gtm
             +--downloads_fr.gtm
             +--index_en.gtm
             +--index_fr.gtm
             +--site.gtp
             +--build.sh

Pour construire le site, dans le répertoire local ou sigmdel il suffit de lancer la commande gtml site.gtp dans un terminal ou de cliquer sur le script exécutable build.sh dont voici le contenu:

#!/bin/bash
gtml site.gtp

Tous les fichiers .*gtm sont transformés en fichiers HTML placés dans le répertoire de sortie. Chacun de ces fichiers commence avec des directives pour GTML. Les fragments 0_head.gtt et 0_topmenu.gtt sont importés au début et le fragment 0_foot.gtt à la fin. Entre il y a le texte HTML. GTML fonctionne de façon récursive. Donc les fichiers *.gtm dans les sous répertoires sont aussi transformés en fichiers HTML qui sont placés dans des sous-répertoires correspondants du dossier de sortie.

Voici le début de 0_head.gtt :

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta name="author" content="Michel Deslierres" />
 <meta name="created" content="[:ORGDATE:]" />
 <meta name="changed" content="[:MTIMESTAMP:]" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
#ifdef DESCRIPTION
 <meta name="description" content="[:DESCRIPTION:]" />
#endif
#ifdef TITLE
 <title>[:TITLE:]</title>
#endif	
#ifdef BASE  
 <base href=[:BASE:]>
#endif
<link href="css/basic.css" type="text/css" rel="stylesheet">
...

Les directives MTIMESSTAMP et BASE sont définie dans le fichier de projet site.gtp, les autres directives dont ORGDATE et TITLE sont différentes d'un fichier à l'autre et sont définies dans chaque fichier source *.gtm. J'utilise [: et :] pour délimiter les directives plutôt que << et >> qui sont les valeurs par défaut (voir Subsitution delimiters dans le fichier de référence de GTML).

#define TITLE À propos
#define ORGDATE 2016-12-07, 01:28
#define MODAUTHOR Michel Deslierres
#define LANG fr
#define LANGLINK about_en
#include "0_head.gtt"
#include "0_topmenu.gtt"

<div class="content">

<div class="date">2017-11-13</div>

<h1>À propos de moi</h1>

<p> À la retraite depuis...

</div><!-- content -->
#include "0_foot.gtt"

Comme on peut voir, c'est assez simple. Ajouter une nouvelle page consiste à créer un nouveau fichier *.gtm dans le bon répertoire, puis d'y inclure les directives GTML qu'on peut voir ci-dessus. Il faut aussi ajouter le nom du fichier *.gtm dans le fichier projet site.gtp. Il faut évidemment écrire le texte lui-même. La dernière étape est de cliquer sur le script.

tdm

Engendrer le site en un clic

Ce n'est que tout dernièrement que j'ai enfin tout en place pour construire le site en un clic ou une commande. J'ai du mettre un peu d'ordre dans les dossiers et fichiers du site. Auparavant toutes les pages HTML, les scripts et autres fichiers liés à la domotique étaient dans un seul sous-répertoire nommé ha. Le sous-répertoire program n'était guère mieux organisé. Alors il y a maintenant une structure plus complexe des dossiers ce qui permet de simplifier un peu les noms des fichiers.

Alors que GTML permet de bien gérer les pages statiques de type HTML d'un site, il en est autrement pour ce qui est des fichiers graphiques et autres fichiers qu'il ne faut pas modifier. Certes il y a une façon de stopper l'action du script pour qu'il ne fasse que copier le fichier binaire vers le bon répertoire dans le dossier de sortie. Mais j'oubliais souvent de m'en servir en plus le fichier de projet devenait trop complexe. Alors Je copiais ces fichiers un par un selon le besoin. C'était devenu un fouillis. J'ai donc opté pour une nouvelle approche. Systématiquement, les répertoires source contiennent tous deux sous-répertoires nommés img et dnld. Dans le premier il y a les images (des jpeg et png) qu'on retrouve sur les pages web. Dans le second répertoire, il y a les fichiers binaires comme des archives compressées ou des fichiers textes contenant du code source.

Voici une partie de la nouvelle hiérarchie des dossiers du site.

 |
 +--[local]
 +--[sigmdel]
 |    |
 |    +--[css]
 |    +--[ha]
 |    |    |
 |    |    +--[img]
 |    |    +--[dnld]
 |    |    |
 |    |    +--[x10]
 |    |    |    |
 |    |    |    +--[img]
 |    |    |    +--[dnld]
 |    |    |     
 |    |    +--[rpi]
 |    |         |
 |    .         +--[img]
 |    .         +--[dnld] 
 |    .
 |               
 +--[src]
      |
      +--[base]
      +--[css]
      +--[ha]
      |    |
      |    +--[img]
      |    +--[dnld]
      |    |
      |    +--[x10]
      |    |    |
      |    |    +--[img]
      |    |    +--[dnld]
      |    |    +--[extra]
      |    |     
      |    +--[rpi]
      |         |
      .         +--[img]
      .         +--[dnld] 
      .

Maintenant, il suffit de copier les dossiers img et dnld plutôt que les fichiers individuels. J'ai aussi souvent un dossier fourre-tout extra. C'est là que je garde des images non utilisées, ou de l'information supplémentaire qui pourrait être utile ultérieurement. C'est une valve de soupape qui me permet de strictement limiter le contenu des autres répertoires à ce qui apparaît dans le site Web public.

tdm

Copier les fichier binaires

Le dernier truc pour automatiser la construction du site est donc de copier le contenu des dossiers img et dnld. Dans Linux on peut le faire ainsi :

michel@hp:~Site/src$ cp -urT ha/rpi/dnld ../local/ha/rpi/dnld michel@hp:~Site/src$ cp -urT ha/rpi/img ../local/ha/rpi/img

L'option T fait que cp créera les sous répertoires dnld et img s'ils n'existent pas. C'est ce qui nous permet d'effacer le dossier de sortie local (ou sigmdel) et d'engendrer tout le site sans avoir à reproduire la hiérarchie de répertoire avant.

L'option u fait que cp ne copie un fichier que s'il n'existe pas dans le dossier cible ou, s'il existe, que si le fichier source est plus récent que le fichier dans le dossier cible.

L'option r fait que cp copie de façon récursive. Ce n'est pas nécessaire pour l'instant, dnld et img ne contiennent pas de sous-répertoire actuellement.

On pourrait ajouter ces commandements au script build.sh. Mais alors il faut trouver un mécanisme pour identifier le répertoire de sortie. Or GTML connaît déjà le nom de ce répertoire. Alors, il est préférable d'ajouter les commandes pour copier dans le fichier de projet. GTML est un script perl dans lequel on peut insérer des commandes. Voici comment je l'ai fait:

// ha/rpi dnld and img files
[:__SYSTEM__(cp -urT ha/rpi/dnld /var/www/html/michel/ha/rpi/dnld):]
[:__SYSTEM__(cp -urT ha/rpi/img /var/www/html/michel/ha/rpi/img):]

Table des matières

La balise base

GTML et la balise base

Engendrer le site en un clic

Copier les fichier binaires

La balise `base`

GTML et la balise `base`