Vous n'avez pas encore de notification

Page d'accueil

Options d'affichage

Abonné

Actualités

Abonné

Des thèmes sont disponibles :

Thème de baseThème de baseThème sombreThème sombreThème yinyang clairThème yinyang clairThème yinyang sombreThème yinyang sombreThème orange mécanique clairThème orange mécanique clairThème orange mécanique sombreThème orange mécanique sombreThème rose clairThème rose clairThème rose sombreThème rose sombre

Vous n'êtes pas encore INpactien ?

Inscrivez-vous !

Hébergeons (gratuitement) un site statique avec accès sécurisé

Low tech is good tech
Hébergeons (gratuitement) un site statique avec accès sécurisé
Crédits : DeanDrobot/iStock

Ces dernières années, les sites statiques sont revenus à la mode. Légers, rapides, ils sont très adaptés à certains besoins, à un usage en mobilité. Malgré leur nom, ils peuvent aussi se faire dynamiques, côté client. Et servir de base de travail pour une application web progressive (PWA). On vous explique comment.

Dans un précédent article, nous avions décortiqué ce qui fait la spécificité des PWA. Mais cela peut sembler abstrait. Pour mieux comprendre nous allons aujourd'hui créer avec vous une telle application. Cela commence par la mise en ligne d'un site très simple, statique, qui ne nécessite donc aucune technologie spécifique côté serveur.

Le statique, c'est fantastique

Une tendance que l'on retrouve chez les défenseurs de la JAMStack (JavaScript, API, Markdown) et des générateurs de sites statiques, permettant d'en créer depuis de simples fichiers textes. Un concept à l'origine des GitHub Pages (via Jekyll) mais il existe des dizaines d'outils du même genre dont 11ty, Hugo, Hexo ou même le français Cecil.

Dans ce dossier nous opterons pour une méthode 100 % manuelle, ce qui vous aidera à mieux comprendre ce qui compose un site, comme il en existe des millions en ligne, que n'importe qui peut créer simplement. Puis comment en faire une PWA. Libre à vous de plonger ensuite dans les méandres de bibliothèques et frameworks plus complexes à la manière d'Angular, React, Vue.js ou même d'outils comme Gatsby.

Pour rendre le tout plus intéressant, notre site utilisera une dose de JavaScript pour charger du contenu, le traiter puis l'afficher. Seule contrainte : nous avons besoin d'un hébergement sécurisé (HTTPS/TLS), un prérequis des PWA. Heureusement, il existe des services qui proposent de telles solutions, avec un accès gratuit pour de petits projets.

Un « Hello, World ! » gratuit mais sécurisé

Il y a quelques années, il était impensable de pouvoir diffuser une page web avec accès sécurisé sans totalement dépendre d'une plateforme tierce et de ses contraintes. Let's Encrypt a tout changé en 2016, permettant à n'importe qui d'obtenir un certificat gratuit pour son nom de domaine, facile à créer et à mettre en place.

Malgré cela, il est rare de pouvoir trouver des hébergeurs avec une offre gratuite. Si Scaleway le fait, c'est uniquement à travers son offre de stockage objet (75 Go offerts) qui n'est pas vraiment prévue pour cela. Ce n'est pas le cas de Gandi, Infomaniak ou OVH pour ne citer que ces exemples. Surtout, ils en sont resté à des méthodes de déploiement « old school », nécessitant en général de passer par un serveur FTP pour envoyer vos fichiers.

Il existe pourtant bien mieux désormais. Avec ses Pages, GitHub avait montré la voie dès 2015 : il suffisait d'envoyer des fichiers texte au format Markdown dans un dépôt via Git, et votre site est publié. L'upload peut ainsi se faire via une multitude de clients compatibles, ou l'interface web du service. La conversion en site est assurée par Jekyll.

Certains hébergeurs se sont inspirés de ces méthodes et ont capitalisé dessus, ainsi que sur la JAMStack et la mode des sites statiques. C'est notamment le cas de l'américain Netlify. Il propose ainsi de nombreux services et plugins, du serverless, du déploiement simplifié, et surtout des comptes gratuits pour les projets personnels.

NetlifyNetlify

Création et mise en ligne de la première version du site

Le nombre de sites hébergés est illimité, mais vous ne devez pas dépasser 100 Go de bande passante par mois et 300 minutes de build time via Git, ce qui est largement suffisant. D'autres limites sont imposées, tous les détails se trouvent par ici. Aucun moyen de paiement n'est nécessaire pour créer un compte, un email suffit.

Ce sera donc suffisant pour notre test du jour, d'autant que les certificats Let's Encrypt sont gérés. On commence donc par créer un fichier index.html dans un dossier de notre machine nommé Site.

Une première page web qui contient le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Bonjour, le monde !</title>
</head>
<body>
<p>Bonjour, le monde !</p>
</body>
</html>

C'est un simple « Hello, world ! ». On déclare une page HTML, en français, utilisant le codage de caractères UTF-8 (à utiliser par défaut), avec un titre et un paragraphe affichant notre message à quiconque se rendra sur le site internet. Vous pouvez lancer ce fichier avec votre navigateur pour observer le résultat.

Pour le mettre en ligne, rendez-vous dans l'onglet Sites de Netlify, puis glissez votre dossier Site dans la zone prévue à cet effet. Un espace d'hébergement sera créé, une URL (xxx.netlify.app) lui sera attribuée.

Votre site est désormais en ligne. Facile non ?

Déploiement Netlify

Notez que vous pouvez opter pour une mise en ligne via Git. Trois plateformes sont gérées pour cette méthode de déploiement continu : GitHub, GitLab et Bitbucket. Seuls les comptes Business peuvent le faire depuis un serveur Github/GitLab auto-hébergé. Autre bonne nouvelle, l'accès est sécurisé (HTTPS/TLS) par défaut.

Vous pouvez aussi opter pour un nom de domaine personnalisé. Netlify en vend mais vous pouvez aussi le faire chez votre registrar habituel. Il faudra simplement y configurer votre zone DNS pour qu'elle pointe vers les serveurs de Netlify. Ce dernier peut également gérer entièrement les DNS de votre domaine. C'est à vous de voir.

Différents guides (en anglais) sont disponibles par ici.

Déploiement NetlifyDéploiement Netlify

Ajoutons un peu de style à notre site

Prochaine étape, faire de cette page web un environnement un peu plus accueillant. Pour cela, nous lui fournissons une icône. Nous avons opté pour une fusée sur Flaticon. Attention, pensez à bien créditer le site et l'auteur si vous faites de même sur l'un de vos projets. C'est l'une des exigences de la licence gratuite du service.

Nous récupérons différentes tailles : des carrés de 16, 32, 64, 128 et 512 pixels. Avec Gimp, nous plaçons celle de 512 px centrée sur un fond noir de 1024x1024 px (Image > Taille du canevas puis Calque > Nouveau calque). Cela sera utile pour plus tard, pour en faire une icône maskable pour notre PWA.

Nous plaçons tous ces fichiers dans un répertoire nommé assets :

Winget-pkgs project assets

Nous modifions la page web en lui ajoutant des éléments décrivant notre projet : constituer une page référençant la liste des paquets du dépôt GitHub de winget via ses manifestes. On modifie donc le titre, on ajoute des descriptions, une barre de navigation, un logo, une dose de responsive, etc. Le résultat est le suivant :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta property="og:locale" content="fr_FR">
        <meta property="og:site_name" content="Packages winget">
        <meta property="og:title" content="Packages winget">
        <title>Packages winget</title>
        <meta property="og:description" content="Retrouvez le contenu du dépôt des packages winget">
        <meta name="description" content="Retrouvez le contenu du dépôt des packages winget">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/png" href="assets/icon-16.png">
        <link rel="apple-touch-icon" href="/assets/icon-maskable.png">
    </head>
    <body>
        <nav>
           <a href="/"><img id="logo" alt="Logo Paquets winget" src="assets/icon-32.png">Paquets winget</a>
        </nav>
        <main>
            <span id="pkgsList">Le contenu du dépôt winget est en cours de chargement...</span>
        </main>
    </body>
</html>

On a tout d'abord ajouté de nombreuses balises META qui servent à déclarer des propriétés. La première par exemple pour que le site s'adapte à l'écran de l'appareil (smartphone, tablette, ordinateur). Certaines sont issues du standard OpenGraph (og). Nous déclarons certaines icônes pour qu'elles soient utilisées par le navigateur ou iOS, par exemple quand un utilisateur ajoute le site à son écran d'accueil (apple-touch-icon).

Vous noterez également que nous avons référencé une feuille de style CSS (stylesheet), sobrement nommée style.css. Nous créons ce fichier à la racine du projet. On lui ajoute le code suivant :

body {
    background: #283134;
    font-family: monospace;
    font-size: 1em;
    overflow-wrap: anywhere; 
    margin:0;
}

body, a {
    color: #dae5e9;
}

a:hover {
    color: #ea7e19;
}

nav {
   width:100%;
   position: fixed;
    margin: 0;
    font-size: 20px;
    font-weight: 900;
    background: #05384a;
    padding: 10px;
}

main {
    width: 95%;
    margin: auto;
    padding-top: 70px;
}

#logo {
    vertical-align: middle;
    margin-right: 15px;
}

Il s'agit ici essentiellement de gérer des marges et des alignements, tailles de police et autres couleurs, comme pour les liens (a) ou lorsqu'on les survole (hover). Certaines sont liées à un id particulier (#).

On enregistre l'ensemble des fichiers. On fait un glisser-déposer du dossier Sites dans la section Deploys du projet Netlify. Quelques secondes plus tard, votre site est mis à jour, accessible à tous.

Déploiement Netlify Mise à jour

Ajoutons un peu de dynamisme

Un site statique au sens de la JAMStack est un site qui ne nécessite pas de traitement par le serveur. Cela tombe bien, Netlify n'en propose pas. Mais on peut tout de même ajouter du JavaScript côté client afin de charger des données, gérer une connexion, des commentaires, etc. Dans ce guide, nous allons charger un fichier JSON.

C'est celui fourni par GitHub, contenant la liste des répertoires de manifestes du dépôt winget-pkgs :

On créé un fichier app.js à la racine du projet et on y place le code suivant :

const wingetUrl = "https://api.github.com/repos/microsoft/winget-pkgs/contents/manifests"

// On récupère la liste des paquets, on affiche une erreur en cas de problème
fetch(wingetUrl)
.then(response => response.json())
.then(jsonPkgs => showPkgs(jsonPkgs))
.catch((error) => console.log("Erreur pendant la récuparation du JSON des paquets winget : ", error))

// On affiche la liste des paquets dans la zone pkgsList
let showPkgs = (data) => {
    let zone = document.getElementById("pkgsList")    
    let frag = document.createDocumentFragment();

    // Pour chaque élément du fichier JSON on créé une puce avec un lien
    // On stocke le tout dans un fragment dans un premier temps
    data.forEach(app => {
       
        let link = document.createElement("a")
        link.href = app.html_url
        link.target = "_blank"
        link.rel = "noopener"
        link.innerText = app.name
        let puce = document.createElement("li")
        
        puce.appendChild(link)
        frag.appendChild(puce)
    });

    // On affiche le nombre d'éléments
    zone.innerText = `Le dépôt de winget compte ${data.length} entrées : `

    // On affiche la liste à puce en utilisant le fragment
    let list = document.createElement("ol")
    list.appendChild(frag)
    zone.appendChild(list)    
    document.title = `Paquets winget (${data.length})`
}

Ici, l'objectif est très simple, récupérer le contenu de l'URL, puis envoyer les données à notre page sous la forme d'une liste à puces si tout s'est bien passé. Sinon, une erreur sera affichée au sein de la console du navigateur.

Les plus attentifs auront remarqué que nous utilisons ici une syntaxe JavaScript dite moderne (ECMAScript 2015), reposant sur les fonctions fléchées et les promesses permettant des actions asynchrones et enchainées (then, error). Une manière de faire simplifiant énormément les choses par rapport à l'époque des requêtes XHR.

Il faut désormais dire à notre site de lancer ce JavaScript. On le déclare donc à la fin de la section body :

<script src="./app.js"></script>

On peut une dernière fois glisser-déposer le dossier dans Netlify pour mettre à jour le site. On s'aperçoit qu'il est désormais pleinement fonctionnel et très rapide. Valide selon les règles du W3C.

Par défaut un texte est affiché, une fois les données récupérées et traitées, elles sont affichées. Ce site n'a que deux défauts : il n'est pas accessible hors-ligne et les informations sont récupérées depuis le dépôt GitHub winget-pkgs à chaque fois que l'on consulte la page. C'est là que la magie de la PWA entre en action.

Projet paquets winget statique résultat final
Le site que vous devriez obtenir si tout s'est bien passé

Dans le prochain article de notre dossier, nous convertirons donc notre page web en application progressive, dotée d'un service worker, installable sur un ordinateur ou un appareil mobile, fonctionnant en toutes circonstances. Vous retrouverez le code source de ce projet et son évolution dans ce dépôt GitHub.

44 commentaires
Avatar de Charly32 Abonné
Avatar de Charly32Charly32- 19/09/20 à 08:48:28

:love: :smack: :pciwin:

Avatar de Rebel2k Abonné
Avatar de Rebel2kRebel2k- 19/09/20 à 08:49:53

Hello ! Franchement j'adore ce genre d'article qui donne des perspectives modernes sur les technologies qui ont le vent en poupe... Je développe pour les besoins de mon boulot régulièrement mais sans être réellement développeur et j'avoue que ça me permet de garder un oeil sur les trucs rapides/faciles à mettre en place pour certains besoins ! Merci !!!

Avatar de SebGF Abonné
Avatar de SebGFSebGF- 19/09/20 à 08:58:32

Dans notre équipe nous utilisons sphinx-doc pour générer toute la documentation de nos projets. Comme tous les README, CHANGELOG, How-To, etc, sont disponibles dans les repos en markdown, la CICD récupère tout ça et en fait un joli site user friendly de la même façon.

On génère aussi les schémas d'infra basés sur les inventaires de déploiement avec les noms des composants, les éléments déployés, les versions middlewares et progiciels, de quand date le déploiement déploiement continu, etc.

Ces outils sont très pratiques lorsque l'on est pas développeur Web et qu'on souhaite facilement publier un contenu lisible à destination d'équipes diverses.

Édité par SebGF le 19/09/2020 à 08:58
Avatar de David_L Équipe
Avatar de David_LDavid_L- 19/09/20 à 09:02:00
SebGF

Tu as Pandoc qui est pas mal et assez puissant dans le genre, avec de nombreux formats acceptés en entrée/sortie. On devrait en reparler à l'occasion d'ailleurs :chinois:

Avatar de ar7awn INpactien
Avatar de ar7awnar7awn- 19/09/20 à 09:20:15

Cool, c'est compatible ie8 ?

Avatar de Marvellou Abonné
Avatar de MarvellouMarvellou- 19/09/20 à 09:36:56

Merci, j'ai appris plein de choses en 20mn. Continuez ce genre d'articles, et vivement la suite.

Avatar de _ls Abonné
Avatar de _ls_ls- 19/09/20 à 09:42:30

Il y a également document.createDocumentFragment() qui permet de gagner en performance lorsqu'on ajoute beaucoup d'éléments au DOM. Même si dans ce cas, le gain n'est pas vraiment flagrant s'il existe.

Avatar de David_L Équipe
Avatar de David_LDavid_L- 19/09/20 à 09:48:18
_ls

Oui pas bête, bon dans le cas présent ça ne changerait effectivement pas grand chose mais ça ne coûte rien d'optimiser :D

Avatar de Ctrl0 Abonné
Avatar de Ctrl0Ctrl0- 19/09/20 à 09:52:03

C'est l'article qui m'a décidé à m'abonner. Vivement la suite ! :yes:

Avatar de fofo9012 Abonné
Avatar de fofo9012fofo9012- 19/09/20 à 10:08:54

Pas mal, le script ne serait pas mieux dans la section head appelé en onload sur body ?

C'est plus propre, à ça permet d'exécuter le js uniquement quand la page html est totalement chargée est rendue (bon là ça devrait aller :) )

Il n'est plus possible de commenter cette actualité.
Page 1 / 5
  • Introduction
  • Le statique, c'est fantastique
  • Un « Hello, World ! » gratuit mais sécurisé
  • Création et mise en ligne de la première version du site
  • Ajoutons un peu de style à notre site
  • Ajoutons un peu de dynamisme
S'abonner à partir de 3,75 €