Créer un site Web avec Netlify et Publii – La nouvelle pile

Pour beaucoup d’entre nous, la fortune de diverses technologies frontales semble aussi fébrile que les palmarès pop. Beaucoup d’énergie et d’excitation éclatent à propos de nouvelles choses qui ressemblent vraiment à des choses anciennes. Pendant ce temps, il existe de nombreuses tendances sous-jacentes qui évoluent tranquillement. Cet article parle de l’un d’entre eux et vous encourage à l’essayer.

Internet n’a jamais eu de « design cible » ; ce n’est qu’une série de tuyaux. Mais au fil du temps, nous avons accepté que les sites Web sont agréables et que si tout le monde suit les règles des requêtes HTTP et sert des pages HTML, c’est le meilleur moyen de satisfaire la plupart des demandes des utilisateurs occasionnels.

Une écologie de serveurs Web, de fournisseurs et de développeurs a évolué. Fondamentalement, un utilisateur tape une URL dans le navigateur, la demande est ensuite acheminée vers un serveur Web, le serveur vérifie les informations d’identification de l’utilisateur et crée la page appropriée et l’envoie dans le canal. Attendre un peu pour une page est toujours acceptable si cette page correspond exactement à ce dont vous avez besoin.

Et pourtant, de nombreux sites ne personnalisent pas du tout les informations. Si le site Web affiche toujours les mêmes informations pour tout le monde, pourquoi devons-nous nous rendre sur un serveur Web pour les générer ?

Ceci introduit l’idée de la statique site Internet. Comme tous les termes de l’industrie, cela peut signifier des choses légèrement différentes selon le contexte, mais sur le Web d’origine, tout était un site statique. L’innovation était alors le “lien hypertexte”, ou la possibilité de passer de manière transparente à différentes pages sur différents serveurs.

Techniquement, un site avait trois bonnes raisons de communiquer avec son serveur d’origine :

Les informations d’identification d’un utilisateur devaient être vérifiées,
le site affiche des informations régulièrement renouvelées,
ou la page collectait des informations auprès de l’utilisateur pour être consommées par le serveur.

Avec des outils comme javascript et les navigateurs modernes, la page elle-même peut assez facilement communiquer directement avec un service via son API. Ainsi, une définition plus précise d’une page statique est celle où la structure des pages et du site est fixe, et toute information dynamique injectée ne la modifie pas. La façon dont un site apparaît sur l’affichage d’un appareil spécifique est également décidée par la page elle-même, probablement avec des requêtes de médias javascript.

La plupart d’entre nous sont conscients que certains sites sont étrangement plus rapides que d’autres au chargement. Aujourd’hui, Internet est encore une série de canaux, mais il existe de nombreuses stations de transmission qui collectent, stockent (c’est-à-dire mettent en cache) et même accélèrent certains contenus pour un accès local plus facile. Ce n’est pas surprenant – si je veux voir le dernier mème de chat populaire et largement propagé, il devrait sûrement être plus facile à trouver ou à rappeler qu’un article universitaire sur la rareté des pavés en Patagonie.

En effet, Internet repose sur Réseaux de diffusion de contenu (CDNs) pour aider à accélérer la plupart des demandes. Le CDN soutient l’idée que “la périphérie” est un endroit valide pour mettre en cache les documents, afin de ne pas avoir à retrouver la source d’origine.

Nous avons donc tout ce qu’il faut pour comprendre Jamstack (ou de plus en plus juste Jamstack). Le Jamstack consiste à créer des pages statiques prédéfinies à servir directement à partir d’un CDN.

Si vous vous posiez la question, l’acronyme est Javascript (pour les scripts), UNPI (si nécessaire), Markup (comme en HTML et CSS). Si un site n’a plus de serveur Web derrière lui, il y a des points d’entrée moins évidents pour les attaques malveillantes – en bref, le Jamstack est considéré comme plus sécurisé.

D’accord, mais si nous n’utilisons pas de serveur Web pour générer et servir des pages de manière dynamique, comment construisons-nous des sites ? C’est ici que générateurs de sites statiques Bien qu’il s’agisse souvent d’outils axés sur les développeurs qui nécessitent une connaissance des modèles et des cadres, il existe quelques générateurs qui sont en fait des applications de bureau. Une fois que vous avez défié votre site, le générateur le construira prêt à être déployé sur un CDN.

Donc, en résumé, tout ce dont vous avez besoin pour atteindre le bord est :

Inscription auprès d’un service d’hébergement CDN.
Un générateur de site statique.
Un nom de domaine que vous contrôlez.

Par exemple, j’utilise Netlifier et le générateur de site Publii avec mon domaine, surveillance.productionsacheté à Flotter. J’ai construit et je mets toujours à jour le site avec Publii, le pousse dans Netlify, qui le publie ensuite sur leur CDN.

Publii est une application facile à utiliser qui vous permet de créer un site Web un peu comme un CMS classique. Définissez des thèmes et des mises en page, puis ajoutez votre contenu. Vous n’avez pas un contrôle précis, mais c’est un excellent moyen de créer rapidement des sites. Mais quel que soit le générateur que vous essayez, assurez-vous qu’il peut créer le type de site que vous souhaitez avec les compétences que vous possédez.

Vous devrez établir une relation de confiance entre votre fournisseur de domaine et votre service CDN. Cela devrait être un processus documenté, même s’il est un peu compliqué techniquement.

J’ai modifié le panneau de configuration Hover pour rediriger le trafic DNS vers Netlify :

Et j’ai ajouté mon domaine personnalisé à Netlify afin qu’il soit enregistré en tant que fournisseur externe. Vous pouvez ensuite ajouter toutes les modifications aux enregistrements DNS dont vous pourriez avoir besoin.

Avec Netlify, vous recevez un nom et un domaine générés localement (j’ai bien peur que ce ne soit que du “bon rêveur”), ce qui facilite les tests ; vous ajoutez ensuite votre nom personnalisé à côté :

Sur l’application Publii, vous pouvez configurer explicitement la création pour Netlify. Notez la nécessité d’un ID de site et d’un jeton :

De retour sur le site Netlify, vous pouvez récupérer cet ID de site :

Et sur un autre écran, vous pourrez créer un nouveau jeton d’accès.

Ne vous inquiétez pas trop entre les éléments spécifiques – une fois que vous aurez établi une relation de confiance entre les outils, vous pourrez créer un site, puis le déployer à la périphérie.

Bien que cela requière une certaine acuité technique, il n’y avait pas besoin d’écrire de code, et pour un projet personnel, le seul coût était pour le nom de domaine. Jouer dans ce domaine vous donne également une réelle idée de la signification de “sans serveur”.

Alors lancez-vous et savourez la saveur de JAM que vous préférez.

— to thenewstack.io