Comment utiliser TiddlyWiki comme générateur de site Web statique en 3 étapes

TiddlyWiki est un formidable outil de réflexion. C’est gratuit, open source et extrêmement modulaire. Si vous l’avez essayé rapidement et que vous voulez aller un peu plus loin, vous êtes au bon endroit. Nous allons considérer TiddlyWiki comme un générateur de site Web statique. Les sites Web statiques sont rapides, ils sont facilement indexés par les moteurs de recherche, peu coûteux à héberger et pratiquement impossibles à pirater. Et avec TiddlyWiki, votre site Web peut comporter des liens bidirectionnels et plus encore.

Dans ce didacticiel, vous apprendrez à transformer vos notes TiddlyWiki en un site Web statique. Nous installerons d’abord TiddlyWiki sur votre ordinateur portable à l’aide d’un serveur Node.js local, puis nous exporterons votre wiki vers un site Web statique, et enfin nous l’hébergerons sur GitHub Pages, qui est gratuit. Vous pouvez voir le site Web statique officiel de TiddlyWiki pour un exemple de la sortie finale.

Je vous expliquerai tout ce que vous devez installer au fur et à mesure, mais voici quelques éléments que je pense utiles et que vous voudrez peut-être installer avant de commencer :

• Hyper (un joli terminal)
• VS Code (un excellent éditeur de code, les autres options incluent Atom, Sublime et Brackets)

Encore une fois, vous pouvez les installer plus tard. Ce tutoriel s’adresse à des personnes non techniques. Cela peut sembler intimidant, mais nous allons y aller étape par étape, alors attachez votre ceinture !

1. Installez la version Node.js de TiddlyWiki

Si vous n’avez jamais entendu parler de Node.js auparavant, cela va sembler assez technique, mais suivez simplement les étapes et tout ira bien. Exécuter n’importe quel logiciel localement représente un peu d’effort supplémentaire, mais ce que vous apprendrez dans les étapes suivantes peut être réutilisé pour installer n’importe quel autre logiciel sur votre ordinateur portable. Et vous n’aurez besoin de suivre ces étapes qu’une seule fois. Faisons cela.

Si l’une des étapes suivantes génère une erreur concernant les privilèges ou les autorisations d’administrateur, ajoutez sudo au début de la commande, tapez votre mot de passe (celui que vous utilisez pour vous connecter à votre ordinateur) et réessayez. La sudo La commande vous permet d’exécuter des programmes avec les privilèges de sécurité d’un administrateur. Si vous rencontrez toujours des erreurs, le groupe de support TiddlyWiki est votre ami !

• Installez Node.js sur votre ordinateur portable. Node.js vous permet d’exécuter du code JavaScript en dehors d’un navigateur Web. Et TiddlyWiki est basé sur JavaScript. Obtenez le programme d’installation Windows ou MacOS ici. Assurez-vous que votre compte utilisateur dispose de privilèges d’administrateur sur votre ordinateur portable (cela peut ne pas être le cas si vous utilisez un ordinateur portable professionnel). Avec l’un ou l’autre de ces installateurs, il vous suffit de continuer à cliquer sur « suivant » jusqu’à ce que ce soit fait. Si vous voulez des instructions plus détaillées (il suffit de télécharger et de cliquer sur suivant, mais juste au cas où), consultez les instructions pour MacOS et les instructions pour Windows.
• Installez TiddlyWiki. Node.js est livré avec une chose astucieuse appelée npm qui vous permet d’installer très facilement de nouveaux logiciels sur votre ordinateur portable en tapant simplement quelques mots-clés. Pour cela, nous allons utiliser quelque chose qui s’appelle la « ligne de commande » – c’est ce que vous voyez dans les films avec des pirates, avec un tas de texte sur un écran noir. Il existe différentes façons d’ouvrir la ligne de commande sur différents types de systèmes d’exploitation, donc mon conseil est de simplement télécharger Hyper, qui est le super terminal gratuit que j’utilise moi-même. Pour installer TiddlyWiki sur votre ordinateur portable, ouvrez Hyper, collez ce qui suit et appuyez sur Entrée : npm install -g tiddlywiki
• Vérifiez que cela a fonctionné. L’étape précédente devrait déclencher un tas de texte dans le terminal montrant les packages en cours d’installation. Assurons-nous que tout a fonctionné. Taper ou coller tiddlywiki --version dans Hyper et appuyez sur Entrée. S’il signale la version actuelle de TiddlyWiki, vous êtes en or ! Ça a marché. Si ce n’est pas le cas, posez votre question ici et soyez aussi détaillé que possible en termes de configuration actuelle.
• Créez votre premier wiki. Taper ou coller tiddlywiki myfirstwiki --init server et appuyez sur entrée. Cela initialisera le serveur (« init server ») et créera un nouveau dossier avec tout ce dont vous avez besoin pour exécuter votre premier wiki (appelé « myfirstwiki » dans la commande ci-dessus).
• Démarrez votre wiki. Taper ou coller tiddlywiki myfirstwiki --listen pour démarrer votre wiki. À l’étape précédente, vous avez démarré le serveur, maintenant vous l’écoutez réellement, ce qui rend votre wiki en direct. Si jamais vous fermez Hyper par erreur, rouvrez-le simplement et tapez le tiddlywiki myfirstwiki --listen commander à nouveau.
• Utilisez votre wiki. Vous pouvez maintenant aller sur http://127.0.0.1:8080/ dans votre navigateur et vous devriez voir un tout nouveau wiki. Bon travail! Vous avez installé TiddlyWiki sur votre ordinateur et vous accédez maintenant à votre propre wiki, exécuté localement sur votre ordinateur portable. Je vous recommande d’ajouter http://127.0.0.1:8080/ à la barre de favoris de votre navigateur pour un accès facile à l’avenir.
• Créez quelques pages. Tout d’abord, créez une page d’index. Ce n’est pas nécessaire pour utiliser TiddlyWiki lui-même, mais nous avons besoin d’un index.html dans notre site Web final. Créez une nouvelle page, appelez-la « Index », écrivez quelque chose comme « Ceci est mon premier site Web statique avec TiddlyWiki ! » et enregistrez-le. Ensuite, créez 2-3 pages supplémentaires. Encore mieux si vous les reliez en utilisant [[Name of the linked page]].

Si tout a bien fonctionné, jouez un peu et créez d’autres notes (appelées « tiddlers » dans TiddlyWiki). Vous pouvez également jouer avec le format du contenu, avec des listes à puces, gras, italique, guillemets, etc. Si vous regardez l’icône d’enregistrement dans le menu de droite, vous verrez qu’elle passe automatiquement du rouge (modifications non enregistrées) à gris clair (toutes les modifications enregistrées) sans aucune action manuelle de votre part. C’est la beauté d’installer correctement TiddlyWiki.

Avant d’exporter votre TiddlyWiki en tant que site Web statique, nous allons faire un petit ajustement qui rendra le résultat final plus beau. Cliquez sur Plus > Ombres dans le menu de droite, puis CMD+F ou CTRL+F pour trouver celui-ci dans la liste : $:/core/templates/static.tiddler.html. Cliquez dessus pour l’ouvrir, puis cliquez sur l’icône d’édition et collez ce qui suit juste sous le body class="tc-body" étiquette:

<div class="tc-sidebar-scrollable" style="overflow: auto;">
<div class="tc-sidebar-header"><h1 class="tc-site-title">Title of my website</h1></div>

<div class="tc-site-subtitle">This is my very first website created with TiddlyWiki</div>
</div>

Enregistrez ce tiddler et vous avez terminé avec cette section ! Vous ne verrez aucun changement pour le moment, mais ce petit bout de code exportera un titre et une description bien formatés dans votre site Web final.

2. Exportez votre TiddlyWiki en tant que site Web statique

Voici les instructions officielles pour exporter vos notes TiddlyWiki en tant que site Web statique. Je vais vous guider à travers eux. Vous vous souvenez de la ligne de commande ? Ouvrons à nouveau Hyper. Assurez-vous que vous êtes dans le monpremierwiki annuaire. Pour ce faire dans Hyper, vous pouvez utiliser la commande cd, qui signifie « changer de répertoire », en collant ceci et en appuyant sur entrée : cd myfirstwiki.

Tout d’abord, collez ceci et appuyez sur Entrée :

tiddlywiki --rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain

Ensuite, collez ceci et appuyez à nouveau sur Entrée :

tiddlywiki --rendertiddler $:/core/templates/static.template.html static.html text/plain

Enfin, collez ceci et appuyez une dernière fois sur Entrée :

tiddlywiki --rendertiddler $:/core/templates/static.template.css static/static.css text/plain

Ceux-ci transforment essentiellement votre TiddlyWiki dynamique en un site Web HTML + CSS statique. Parce que ce serait vraiment ennuyeux de devoir le faire à chaque fois que vous voulez mettre à jour votre site Web, facilitons les choses.

Ouvrez votre éditeur de texte (j’utilise VS Code) et collez ce qui suit, qui est une concaténation des trois commandes précédentes (crédits) :

tiddlywiki --rendertiddlers [!is[system]] $:/core/templates/static.tiddler.html static text/plain --rendertiddler $:/core/templates/static.template.css static/static.css text/plain

Enregistrez ensuite le fichier sous build.sh dans le dossier racine de votre wiki. Si vous suivez ce tutoriel depuis le début, cela devrait être monpremierwiki. À partir de maintenant, vous pourrez simplement taper ./build.sh dans Hyper (assurez-vous d’inclure le point au début) pour convertir votre TiddlyWiki dynamique en un site Web statique.

Veuillez noter: vous ne disposez peut-être pas des privilèges d’administrateur appropriés pour créer le fichier build.sh. Essayez la commande sudo que j’ai mentionnée plus tôt. Et si cela ne fonctionne toujours pas, la bonne nouvelle est que vous n’avez pas besoin de ce fichier pour utiliser le générateur de site Web statique de TiddlyWiki. Copiez et collez simplement la commande concaténée commençant par tiddlywiki --rendertiddlers dans la ligne de commande, c’est pareil mais un peu plus manuel.

Maintenant, allez à monpremierwiki/sortie/statique/ et double-cliquez sur n’importe quel fichier HTML pour l’ouvrir dans votre navigateur. Oui, c’est un site Web à part entière pour vous avec seulement quelques commandes. Maintenant, mettons ce bébé au monde.

3. Hébergez votre TiddlyWiki sur GitHub

Vous avez un site web statique, maintenant vous voulez le faire vivre. Il existe de nombreuses options pour héberger gratuitement un site Web statique, telles que Netlify, Vercel et même Neocities (probablement la plus simple si vous n’êtes pas habitué à l’hébergement Web), mais pour les besoins de ce didacticiel, nous utiliserons GitHub Pages, qui est gratuit pour toujours et vous permet également d’utiliser votre propre domaine gratuitement. Si vous avez déjà un autre hôte, n’hésitez pas à sauter cette étape.

• Créez un compte sur Github. Cliquez sur « s’inscrire » sur cette page et remplissez le formulaire. Notez votre nom d’utilisateur GitHub quelque part, vous en aurez besoin pour la prochaine étape.
• Créez un nouveau référentiel. Cliquez sur le signe « + » juste à côté de votre photo de profil dans le coin supérieur droit de la page, puis sur « nouveau référentiel ». Il devrait être nommé nom d’utilisateur.github.iooù Nom d’utilisateur est votre nom d’utilisateur GitHub. (c’est très important, ça ne marchera pas si vous utilisez autre chose)
• Cliquez sur « télécharger ». Téléchargez tous les fichiers que vous avez dans le dossier « statique ».

Si tout cela était déroutant, jetez un œil à l’assistant des pages GitHub ici. Il expliquera en détail comment télécharger votre contenu sur les pages GitHub.

Vous pouvez maintenant aller à nom d’utilisateur.github.io dans votre navigateur. Voici! Et il y a plus – vous pouvez en fait utiliser votre propre domaine pour votre site Web TiddlyWiki, gratuitement. Consultez ce didacticiel de GitHub pour obtenir des instructions étape par étape très simples.

Si vous souhaitez passer au niveau supérieur, vous pouvez utiliser la ligne de commande pour automatiser les mises à jour de votre site Web ou déployer votre site Web sur Netlify. Pour jouer avec la structure HTML ou le CSS, les fichiers que vous voulez regarder sont $:/core/templates/static.tiddler.html et $:/core/templates/static.template.css (auquel vous pouvez accéder dans votre TiddlyWiki en cliquant sur Plus > Ombres dans le menu de droite). Vous pouvez également commencer à ajouter des fonctionnalités à votre TiddlyWiki, telles que des liens bidirectionnels, qui apparaîtront dans le site Web statique exporté.

Le ciel est la limite, mais j’espère que ce court tutoriel vous a donné une bonne idée de ce que vous pouvez réaliser avec le générateur de site Web statique de TiddlyWiki. Voir mon propre site Web statique créé avec TiddlyWiki pour vous inspirer. S’amuser!