wodle
1.0.0
Wodle est un générateur de sites statiques utilisant de nouveaux frameworks et outils pour le développement Web moderne. Il est construit sur Next.js et Tachyons. Et vous pouvez facilement transformer le site statique généré en un site Web entièrement dynamique.
Parce que NextJS et CSS fonctionnel facilitent grandement la prise en main d'un blog ou d'une page statique, c'est donc un bon point de départ pour les blogueurs et les développeurs qui souhaitent apprendre ces technologies.
Vous pouvez installer Wodle via npm :
npm install -g wodle
Une fois Wodle installé, vous pouvez utiliser la commande wodle . Pour créer un nouveau site, vous pouvez exécuter :
wodle myBlog
Cela générera un nouveau site appelé myBlog sur le même répertoire où vous avez exécuté la commande
Pour démarrer avec votre nouveau site, il vous suffit de vous y connecter puis d'installer les dépendances :
cd myBlog
yarn
Cela récupérera toutes les dépendances, une fois que c'est prêt, vous pourrez démarrer un serveur en cours d'exécution :
yarn dev
Et allez sur localhost:3000/ , vous devriez voir un site comme celui-ci :
Ce serveur écoutera les modifications apportées à votre application et rechargera le navigateur.
Si vous souhaitez exécuter votre site sans rechargement à chaud, vous pouvez exécuter :
yarn start
Pour créer votre site, vous pouvez exécuter :
yarn build
qui générera un dossier out/ avec votre site statique prêt à être publié.
Votre site aura différents dossiers :
Ce dossier contient vos fichiers de pages et leurs noms correspondent à leurs itinéraires, donc si vous souhaitez ajouter une nouvelle page sur /new-page vous devrez ajouter un nouveau composant sur ce dossier appelé new-page.js . Pour un routage avancé, vérifiez ici.
L'échafaudage est livré avec certains composants de page prédéfinis dans le dossier components .
Dans ce dossier, vous trouverez tous les composants prédéfinis sur le site, les composants principaux de cette application d'échafaudage sont :
Un composant de barre latérale qui récupère les éléments et restitue un Nav avec leurs NavItems, le contenu de ce composant se trouve sur content/sideBarOptions.js
Ce composant enveloppe simplement tout ce que vous souhaitez afficher dans la section principale (le centre du site).
Ce composant restitue l'article principal, comme vous le voyez sur l'index et sur chaque article particulier. Une démo du contenu qui peut être traité par ce composant se trouve sur content/mainArticle .
Ce composant affiche une liste d'articles comme vous le verrez sur chaque page individuelle dans le menu de la barre latérale, vous pouvez voir les listes sur content/ sur les fichiers <something>Articles.js
entre autres
Votre dossier de styles contient tous vos CSS (actuellement presque vide grâce aux CSS et Tachyons fonctionnels)
Vous pouvez continuer à supprimer des pages (en supprimant des fichiers du dossier pages ) en ajoutant plus de pages, d'articles, d'options en suivant les modèles sur l'échafaudage ou simplement tout changer comme vous le souhaitez ! Vous pouvez lire d’excellents guides sur le site Next.js et Tachyons pour créer votre superbe site Web ou blog !
basé sur l'art précédent chibicode.com et jspg
