htmldéesse
Un cadre minimaliste pour créer un site Web comme en 1999.
Exigences
- Un ordinateur avec Internet, un éditeur de texte et un navigateur Web
- npm
Commencer
- Terminal ouvert
-
npm install -g @htmlgoddess/cli
Cela installera l'utilitaire de ligne de commande. -
htmlgoddess create path/to/your/new/site - suivez les instructions et vous devriez être opérationnel en un rien de temps.
Faire
- refactoriser : isoler les tests.
- ajouter : commande "host".
- add : commande de choix de style pour permettre à l'utilisateur de changer de thème après la création.
- exploit : Correcteur orthographique.
- exploit : crochet de validation automatique à déclencher lors de la validation.
- exploit : relire les commandes.
- exploit : commande "domaine".
- exploit : exécutable téléchargeable.
- refactor : échangez CNAME contre la configuration yaml pour l'hébergement.
- tâche : couverture
- convertir des "docs" en variables configurables
- tâche : assurez-vous que l'observateur ne perd pas de mémoire.
- bug : cli.action sort toujours sur la console pendant les tests.
- exploit : interface graphique
Je ne connais pas le HTML
C'est OK. Regardez cette vidéo pour commencer.
Menu de ligne de commande
Lorsque vous exécutez npm start , il vous proposera les options suivantes.
Comment ça marche
- Les fichiers du dossier « src » sont compilés (imprimés) en fichiers HTML statiques dans le dossier « docs ».
- Le dossier
src/templates contient les modèles. Ceux-ci sont compilés avec le dossier content pour générer vos pages HTML statiques. - Le dossier
src/content contient le contenu de votre site, qui est conservé dans des fichiers HTML qui sont des morceaux de code HTML. - Lorsque vous exécutez
npm run print (ou sélectionnez imprimer dans le menu du terminal), il compilera votre contenu et vos modèles dans des fichiers HTML statiques et recréera le dossier docs. (REMARQUE : tout ce qui se trouve dans la documentation est écrasé, enregistrez donc uniquement le contenu dans votre répertoire src !) - Vous pouvez tester votre site localement en exécutant la commande « servir » depuis le menu.
- Lorsque vous êtes prêt à déployer votre site, faites simplement
npm run save && npm run publish - Vous pouvez ensuite pointer votre serveur Web vers "docs", qu'il s'agisse d'Apache, de pages git, de nginx ou autre.
- Vous pouvez ajouter n'importe quelle feuille de style qui cible les éléments HTML simples et cela devrait fonctionner :)
Modèles
- Les balises du modèle qui se ferment automatiquement comme
<head /> ou <main /> rechercheront les fichiers de modèle correspondant à ce même nom ; soit un répertoire avec un index html comme main/index.html ou simplement un fichier main.html- Les balises ne doivent pas nécessairement être du HTML standard. Si vous créez un modèle foo.html dans le dossier des modèles, vous pouvez inclure une balise
<foo /> et elle remplacera le contenu de foo. - La compilation des modèles est récursive, vous pouvez donc utiliser des modèles dans les modèles. Cependant, les modèles imbriqués doivent être des fichiers contenus dans ou à proximité du modèle parent. Sinon, il sera simplement ignoré.
- La balise
<content/> est spéciale et extraira soit un modèle portant le même nom de fichier (avec dir), soit le modèle principal ('templates/index.html). - Lorsque vous créez les pages souhaitées dans le répertoire de contenu. Les répertoires relatifs à là apparaîtront sur votre site avec le même chemin. Cette structure permet d’auto-organiser les dossiers et les URL.
Contraintes
- Pas de JS
- Aucun attribut sauf href de base, etc.
- Pas de cours. C'est ce qui vous permet d'ajouter n'importe quelle feuille de style qui cible le CSS Vanilla
- Pas de SASS/SCSS/LESS. Cela ne devrait pas être nécessaire avec de simples éléments HTML
- Pas de React, Angular ou autre.
- Ou pas, vous pouvez pirater tout ce que vous voulez.
Philosophie
Le HTML a été conçu pour être simple et permettre aux gens ordinaires de créer et de consommer des éléments sur Internet. Le Web est plutôt génial aujourd'hui, mais il est également devenu assez complexe et laisse beaucoup de gens derrière lui. Ce CMS revient à l'essentiel pour donner aux gens un moyen de s'exprimer librement et facilement.
- Le cadre tente de tirer parti autant que possible de la technologie et des normes existantes.
- Le HTML est utilisé pour tout (comme la déesse HTML l'a commandé) au lieu des balises de modèle propriétaires et d'autres syntaxes spéciales. Le système de modèles recherche les balises HTML à fermeture automatique et les remplace par des modèles ou du contenu associés.
- Le système de fichiers est exploité à la fois pour les modèles de recherche/de dénomination et pour le routage des URL.
- Git sert de base de données réelle pour le CMS avec les fichiers HTML dans le contenu et les modèles.
- Le site "imprime" dans le dossier "docs", puis vous "publiez" sur git, où vous pouvez configurer les pages github. Il est indépendant du serveur Web, vous pouvez donc réellement prendre les fichiers dans le dossier Docs, les placer où vous le souhaitez et pointer un serveur Web vers eux.
- Les balises ne sont pas censées nécessiter de classes ou d'attributs. Cela permet d'insérer de nouveaux thèmes de manière transparente. Vous pouvez considérer le HTML Vanilla comme l'interface pour appliquer le style.
- L'utilisation de JavaScript est déconseillée car elle ne devrait pas être inutile, bien que rien dans le framework ne vous empêche de l'utiliser.
- Vous pouvez ignorer tout ce que je viens d'écrire et faire ce que vous voulez. C'est Internet !
Problèmes fréquents
- Dépendances agissant bizarrement :
Lerna fait certaines choses sous le capot pour relier les dépendances. Si vous installez un nouveau module et que tout ne fonctionne plus, essayez lerna bootstrap à partir de la racine. - Le répertoire de test ne nettoie pas. Si un test échoue, cela peut empêcher le nettoyage du répertoire de test. Dans ce cas, exécutez
npm run clean-test-dir qui le supprimera manuellement.
Contribuer
- exécutez des tests dans packages/cli pour vous assurer que tout est parfait
npm run test - Validez les modifications apportées au dépôt mono
npm run commit et suivez les invites - lerna submit --force-publish Ceci publiera sur NPM et poussera une balise vers git
