Guide de démarrage rapide

Pour démarrer avec Zonelets, suis ce guide textuel ou cette playlist de vidéos (en anglais) !

Contenu:

  1. Télécharger les fichiers Zonelets
  2. Uploader les fichiers sur Neocities
  3. Écrire ton premier article
  4. Mettre à jour le script
  5. Contempler ton oeuvre
  6. Ensuite ?

Télécharger les fichiers Zonelets

Clique ici pour télécharger les fichiers !

Uploader les fichiers sur Neocities

Légende : La page d'accueil de Neocities

  1. Crées un compte sur Neocities. Mets l'étiquette (tag) "zonelets" entre autre chose, si tu veux ! (tu pourras les modifier plus tard sur ton profil).
  2. Une fois ton compte actif et opérationnel, efface les fichiers de démarrage de ton site Neocities (en dehors du index.html, qui ne peut être supprimé. "index.html" est la page d'accueil par défaut des sites en général).

    3. Légende : le navigateur de fichiers de Neocities avec tous les fichiers supprimés exceptés index.html

  3. Dézippes les fichiers Zonelets que tu viens de télécharger et mets les dans ton site Neocities (drag and drop ou utilise le bouton Upload) NOTE: le système de mise en ligne de Neocities a du mal à tout mettre dans différents dossiers en même temps. Épargne toi cette prise de tête en mettant en ligne tes documents dossier par dossier. Par contre, aucun problème à mettre en ligne plusieurs fichiers en même temps.

    NOTE: si tu mets en ligne un fichier sur Neocities et qu'il a le même nom qu'un autre fichier déjà existant dans ce dossier, l'ancien fichier sera écrasé ! Donc le index.html par défaut de Neocities va automatiquement être écrasé par le index.html de Zonelets, ce que nous voulons !

Légende : après la mise en ligne des fichiers, le navigateur devrait ressembler à ça (about.html étant a_propos.html dans nos fichiers traduits)

Écrire ton premier article

Les articles Zonelets sont en HTML. Si tu n'as pas fait de code avant Zonelets, ça peut sembler un peu intimidant à première vue. Mais pour l'instant, tu peux ignorer tout ce qui a une drôle de tête. Cela dit, à un moment, il faudra que tu lises un guide pour débutant sur HTML- Neocities en a d'ailleurs un très chouette en bande dessinée avec un chat trop choupi ! (en anglais)

  1. Retour au navigateur, va dans le dossier "posts".
  2. Créer un nouveau fichier en suivant la convention d'appelation des exemples d'articles. Par exemple : 2020-11-12-Plover-Appreciation.html

    3. Légende : créer et nommer un nouvel article

  3. Copie le contenu du fichier 2020-11-10-Template-Article.html dans ton nouveau fichier

  4. Ouvre ton article et écris des trucs dans les balises <p> à la ligne 17. Par exemple:

    <p>Les pluviers sont adorables, petits oiseaux tout ronds avec leurs petites pattes. Certains pluviers sont guignards. Je pense qu'on peut toustes apprendre de l'umble pluvier, comme par exemple : être tout mignon.</p>

  5. Sauvegarde ton fichier en cliquant sur le bouton rouge "Save" en haut à gauche, ou bien en utilisant le raccourci clavier Ctrl+S ou Cmd+S.

Légende : c'est ce à quoi ton premier article devrait ressembler (avec le texte d'exemple en anglais

Mettre à jour le script

  1. Copies le nom du fichier franchement édité, en incluant la partie posts/. Ça devrait ressembler à un truc du genre posts/2020-11-12-Plover-Appreciation.html. Tu peux copier le nom depuis l'éditeur HTML en haut à gauche, ou bien en allant dans le navigateur de fichiers et en cliquant du "rename" (annule ensuite après avoir copié le chemin, tu ne veux pas renommer le fichier là maintenant !).
  2. Maintenant, va ouvrir ton fichier script script.js.
  3. Colles le nom du fichier que tu as copé dans le Tableau des articles, en suivant le format des exemples d'artistes. Maintenant ton article devrait apparaître dans tes archives et dans la listes des articles récents !
  4. Avant de quitter le fichier, mets à jour les valeurs blogName, authorName, et authorLink dans la Section 1: Informations Essentielles.
  5. Sauvegarde et retourne à ton navigateur de fichiers. Bravo, tu l'as fait !

Légende : Voilà à quoi ton document script.js devrait ressembler après que tu aies rajouté le lien de ton premier article dans le tableau des articles et que tu aies modifié les informations essentielles (image en anglais)

Contempler ton oeuvre

  1. Clique sur le lien en rouge sur ton navigateur pour prévisualiser ton site ! Ou bien copies colles le lien dans ton navigateur pour le voir !
  2. Tu devrais voir une page d'accueil avec une list d'artistes récents tout en bas. Ton nouvel article devrait y apparaître !
  3. Tout en bas de la page, tu devrais trouver un pied de page disant que [ton nom de blog] est écrit par [ton nom d'auteurice], construit avec Zonelets, et hébergé par Neocities! Et si tu cliques sur ton nom, ça doit aller vers le lien que tu as indiqué dans ton fichier script.
  4. Si tu cliques sur le lien de ton article dans la section Recent Posts, tu devrais arriver sur la page de ton essai d'article que tu viens d'écrire !

Légende : C'est à ça que devrait ressembler ton article quand tu le vois en ligne ! (texte de l'image en anglais)

NOTE IMPORTANT: En développement web, certains changements peuvent prendre du temps. Essaye de rafraichir la page, d'essayer un "hard refresh"(lien en anglais), ou simplement de revenir sur la page dans quelques minutes. Regarder avec un autre appareil peut aussi aider. Si les choses en changent pas, ça ne veut pas dire que tu as fait quelque chose qui ne fallait pas !

Bravo ! Tu as un blog !

Ensuite ?

Retour en haut