nuxt netlify cms starter template
v2.0.0
Cree sitios web estáticos sin servidor con Vue.js y Netlify CMS.
Esta es una plantilla inicial para crear sitios web estáticos con Vue.js y Netlify CMS, basada en Nuxt v1.x. Qué cubre:
¿Configuración a través de Vue CLI ?
Configure fácilmente un proyecto Nuxt.js casi en blanco.
Actualmente no está optimizado para Vue CLI v3.0 .
Edición de contenido a través de Netlify CMS ✏️
Netlify CMS es un CMS del lado del cliente que se conecta directamente a su repositorio git para editar archivos de rebajas.
También admite otros formatos de archivo, pero esta plantilla solo funciona con el formato de rebajas frontal predeterminado.
¿Mostrar contenido en Vue.js a través del módulo Nuxtent/Nuxtdown ?️
El módulo Nuxtdown (bifurcación fija de Nuxtent) permite consultar el contenido y mostrarlo en la interfaz de usuario.
Generación de sitios estáticos a través de Nuxt.js ✅
Nuxt.js, el famoso marco para crear aplicaciones universales Vue.js, genera un sitio estático.
Plantilla de inicio de Nuxt.js + Netlify CMS
Configuración
Desarrollo
Producción
Implementación manual a través de FTP
Implementar en Netlify
Implementar con otras soluciones de CI
Requisitos previos
Configuración
Uso
Problemas conocidos
Contribución
Asegúrese de tener instalado node 8.0+ y npm 5.0+
Ya sabes qué es Netlify CMS y Nuxt.js.
Instalar a través de vue-cli : si utiliza una versión más reciente de Vue CLI, probablemente tendrá que instalar un paquete adicional para que vue init funcione, ya que esta plantilla aún no está optimizada para la nueva Vue CLI.
$ vue init renestalder/nuxt-netlify-cms-starter-template mi-proyecto
$ cd mi-proyecto
# instalar dependencias$ npm install # O instalación de hilo Envíe el proyecto a su repositorio de git : para poder editar contenido, debe enviar su proyecto a un repositorio de git. El CMS siempre se conecta directamente al repositorio de git y edita el contenido en la rama configurada en static/admin/config.yml .
Bien, hiciste los pasos importantes para comenzar. Ahora configure todos los componentes correctamente para su infraestructura.
Autenticación y modelos de CMS Configure dónde está alojado su repositorio y cómo los usuarios del CMS iniciarán sesión para editar contenido. También defina archivos y campos para su contenido.
Archivo : static/admin/config.yml
Documentación : Documentación oficial de Netlify CMS -> Configuración
Enrutamiento y consulta
De fábrica, la interfaz de usuario no tiene idea de dónde está almacenado su contenido y qué rutas dinámicas pertenecen a qué contenido. Nuxt.js solo puede mapear páginas estáticas de forma predeterminada. No se detectan rutas dinámicas como publicaciones de blog con diferentes nombres de archivos. La configuración para esto pasa por Nuxtdown.
Archivo : nuxtdown.config.js
Documentación : Léame de Nuxtdown
Información general del sitio web
La información general como las etiquetas HTML <head> y los títulos de las páginas se configuran a través de Nuxt.js. No se moleste con la configuración de enrutamiento para Nuxt.js, esto lo resuelve Nuxtdown.
Archivo : nuxt.config.js
Documentación : Documentación oficial de Nuxt.js -> Configuración
Durante el desarrollo, ejecute la versión SPA del lado cliente de su aplicación. Utilice la tarea dev o serve , lo que más le convenga. Ellos hacen lo mismo.
# servir con recarga en caliente en localhost:3000$ npm run dev
Vaya a http://localhost:3000
Para producción, genere el sitio estático.
# generar un proyecto estático$ npm ejecutar generar
Para que funcione en su servidor de producción, la compilación necesita conocer la URL/dominio final donde se ejecutará el sitio. Para esto, puede editar la tarea npm generate:manual en package.json y configurar su URL de producción. Esto es útil cuando implementas manualmente tu sitio web:
# generar un proyecto estático que se alojará en la URL proporcionada en package.json$ npm run generate:manual
La carpeta de su proyecto generado contendrá un archivo netlify-example.toml cuyo nombre puede cambiar a netlify.toml para comenzar con la implementación de Netlify. Establece automáticamente BASE_URL según su configuración de Netlify y el tipo de implementación (implementación de producción, implementación de sucursal, implementación de vista previa). Por lo tanto, no es necesario configurar la URL de producción en package.json .
Si utiliza otras soluciones de CI, siempre debe asegurarse de que la variable de entorno BASE_URL esté configurada en la URL donde se ejecutará el sitio web. Herramientas como GitLab le permiten establecer variables de entorno en la configuración del proyecto y facilitar su uso en cualquier forma en que desee implementar su proyecto.
No funciona con Nuxt v2.3.0 y superiores : hay algunos cambios en Nuxt v2.3.0 que no son compatibles con Nuxtdown/Nuxtent. Es por eso que la versión actualmente está fijada en v2.2.x.
Si está interesado en contribuir al proyecto, consulte CONTRIBUTING.md
