nuxt netlify cms starter template
v2.0.0
Créez des sites Web statiques sans serveur avec Vue.js et Netlify CMS.
Il s'agit d'un modèle de démarrage pour créer des sites Web statiques avec Vue.js et Netlify CMS, basé sur Nuxt v1.x. Ce qu'il couvre :
Configuration via Vue CLI ?
Configurez facilement un projet Nuxt.js presque vide.
Actuellement non optimisé pour Vue CLI v3.0 .
Édition de contenu via Netlify CMS ✏️
Netlify CMS est un CMS côté client qui se connecte directement à votre référentiel git pour modifier les fichiers markdown.
Prend également en charge d'autres formats de fichiers, mais ce modèle ne fonctionne qu'avec le format de démarque par défaut.
Afficher le contenu dans Vue.js via le module Nuxtent/Nuxtdown ?️
Le module Nuxtdown (fork fixe de Nuxtent) permet d'interroger le contenu et de l'afficher dans l'interface utilisateur.
Génération de sites statiques via Nuxt.js ✅
Nuxt.js, le célèbre framework pour créer des applications Vue.js universelles, génère un site statique.
Modèle de démarrage Nuxt.js + Netlify CMS
Configuration
Développement
Production
Déploiement manuel via FTP
Déployer sur Netlify
Déployer avec d'autres solutions CI
Conditions préalables
Installation
Usage
Problèmes connus
Contribution
Assurez-vous que node 8.0+ et npm 5.0+ sont installés
Vous savez ce qu'est Netlify CMS et Nuxt.js.
Installer via vue-cli : Si vous utilisez une version plus récente de Vue CLI, vous devrez probablement installer un package supplémentaire pour que vue init fonctionne, car ce modèle n'est pas encore optimisé pour la nouvelle Vue CLI.
$ vue init renestalder/nuxt-netlify-cms-starter-template mon-projet
$ cd mon-projet
# installer les dépendances$ npm install # Ou Yarn Install Poussez le projet vers votre référentiel git : Pour pouvoir modifier le contenu, vous devez pousser votre projet vers un référentiel git. Le CMS se connecte toujours directement au référentiel git et modifie le contenu de la branche définie dans static/admin/config.yml .
Bien, vous avez suivi les étapes importantes pour commencer. Configurez maintenant correctement tous les composants pour votre infrastructure.
Authentification et modèles CMS Configurez l'emplacement d'hébergement de votre référentiel et la manière dont les utilisateurs du CMS se connecteront pour modifier le contenu. Définissez également des fichiers et des champs pour votre contenu.
Fichier : static/admin/config.yml
Documentation : Documentation officielle du CMS Netlify -> Configuration
Routage et requêtes
Dès le départ, l'interface utilisateur n'a aucune idée de l'endroit où votre contenu est stocké ni des itinéraires dynamiques qui appartiennent à quel contenu. Nuxt.js ne peut mapper que des pages statiques par défaut. Les itinéraires dynamiques tels que les articles de blog portant des noms de fichiers différents ne sont pas détectés. La configuration pour cela se fait par Nuxtdown.
Fichier : nuxtdown.config.js
Documentation : Lisezmoi Nuxtdown
Informations générales sur le site
Les informations générales telles que les balises HTML <head> et les titres de page sont définies via Nuxt.js. Ne vous embêtez pas avec la configuration du routage pour Nuxt.js, ceci est résolu par Nuxtdown.
Fichier : nuxt.config.js
Documentation : Documentation officielle Nuxt.js -> Configuration
Pendant le développement, exécutez la version SPA côté client de votre application. Utilisez la tâche dev ou serve , selon ce qui vous convient le mieux. Ils font la même chose.
# servir avec rechargement à chaud sur localhost : 3000 $ npm run dev
Allez sur http://localhost:3000
Pour la production, générez le site statique.
# générer un projet statique$ npm run generate
Pour que cela fonctionne sur votre serveur de production, la version doit connaître l'URL/le domaine final sur lequel le site sera exécuté. Pour cela, vous pouvez modifier la tâche npm generate:manual dans le package.json et définir votre URL de production. Ceci est utile lorsque vous déployez manuellement votre site Web :
# générer un projet statique qui sera hébergé sur l'URL donnée dans package.json$ npm run generate:manual
Le dossier de votre projet généré contiendra un fichier netlify-example.toml que vous pourrez renommer en netlify.toml pour démarrer le déploiement de Netlify. Il définit automatiquement la BASE_URL en fonction de votre configuration Netlify et du type de déploiement (déploiement en production, déploiement en succursale, déploiement en préversion). Pas besoin donc de définir l’URL de production dans le package.json .
Si vous utilisez d'autres solutions CI, vous devez toujours vous assurer que la variable d'environnement BASE_URL est définie sur l'URL sur laquelle le site Web sera exécuté. Des outils comme GitLab vous permettent de définir des variables d'environnement dans les paramètres du projet et facilitent son utilisation, quelle que soit la manière dont vous souhaitez déployer votre projet.
Ne fonctionne pas avec Nuxt v2.3.0 et versions ultérieures : Certaines modifications dans Nuxt v2.3.0 ne sont pas compatibles avec Nuxtdown/Nuxtent. C'est pourquoi la version est actuellement corrigée à la v2.2.x.
Si vous souhaitez contribuer au projet, voir CONTRIBUTING.md
