nuxt netlify cms starter template
v2.0.0
Erstellen Sie serverlose, statische Websites mit Vue.js und Netlify CMS.
Dies ist eine Startervorlage zum Erstellen statischer Websites mit Vue.js und Netlify CMS, basierend auf Nuxt v1.x. Was es umfasst:
Einrichtung über Vue CLI ?
Richten Sie ganz einfach ein nahezu leeres Nuxt.js-Projekt ein.
Derzeit nicht für Vue CLI v3.0 optimiert .
Inhaltsbearbeitung über Netlify CMS ✏️
Netlify CMS ist ein clientseitiges CMS, das eine direkte Verbindung zu Ihrem Git-Repository herstellt, um Markdown-Dateien zu bearbeiten.
Unterstützt auch andere Dateiformate, aber diese Vorlage funktioniert nur mit dem Standard-Markdown-Format „Frontmatter“.
Inhalte in Vue.js über das Nuxtent/Nuxtdown-Modul anzeigen ?️
Das Nuxtdown-Modul (Fixed Fork von Nuxtent) ermöglicht die Abfrage des Inhalts und die Anzeige in der Benutzeroberfläche.
Statische Site-Generierung über Nuxt.js ✅
Nuxt.js, das berühmte Framework zum Erstellen universeller Vue.js-Anwendungen, generiert eine statische Site.
Nuxt.js + Netlify CMS-Startervorlage
Konfiguration
Entwicklung
Produktion
Manuelle Bereitstellung über FTP
Auf Netlify bereitstellen
Bereitstellung mit anderen CI-Lösungen
Voraussetzungen
Aufstellen
Verwendung
Bekannte Probleme
Beitrag
Stellen Sie sicher, dass node 8.0+ und npm 5.0+ installiert sind
Sie wissen, was Netlify CMS und Nuxt.js sind.
Installation über vue-cli : Wenn Sie eine neuere Version von Vue CLI verwenden, müssen Sie wahrscheinlich ein zusätzliches Paket installieren, damit vue init funktioniert, da diese Vorlage noch nicht für die neuere Vue CLI optimiert ist.
$ vue init renestalder/nuxt-netlify-cms-starter-template my-project
$ cd mein-projekt
# Abhängigkeiten installieren$ npm install # Oder Garninstallation Schieben Sie das Projekt in Ihr Git-Repository : Um Inhalte überhaupt bearbeiten zu können, müssen Sie Ihr Projekt in ein Git-Repository übertragen. Das CMS stellt immer eine direkte Verbindung zum Git-Repository her und bearbeitet den Inhalt des in static/admin/config.yml festgelegten Zweigs.
Schön, dass Sie die wichtigen Schritte für den Anfang getan haben. Konfigurieren Sie nun alle Komponenten richtig für Ihre Infrastruktur.
CMS-Authentifizierung und -Modelle Konfigurieren Sie, wo Ihr Repository gehostet wird und wie sich Benutzer des CMS anmelden, um Inhalte zu bearbeiten. Definieren Sie außerdem Dateien und Felder für Ihre Inhalte.
Datei : static/admin/config.yml
Dokumentation : Offizielle Netlify CMS-Dokumentation -> Konfiguration
Routing und Abfragen
Im Auslieferungszustand hat die Benutzeroberfläche keine Ahnung, wo Ihre Inhalte gespeichert sind und welche dynamischen Routen zu welchen Inhalten gehören. Nuxt.js kann standardmäßig nur statische Seiten zuordnen. Dynamische Routen wie Blogbeiträge mit unterschiedlichen Dateinamen werden nicht erkannt. Die Konfiguration hierfür erfolgt durch Nuxtdown.
Datei : nuxtdown.config.js
Dokumentation : Nuxtdown Readme
Allgemeine Website-Informationen
Allgemeine Informationen wie HTML- <head> -Tags und Seitentitel werden über Nuxt.js festgelegt. Kümmern Sie sich nicht um die Routing-Konfiguration für Nuxt.js, das wird durch Nuxtdown gelöst.
Datei : nuxt.config.js
Dokumentation : Offizielle Nuxt.js-Dokumentation -> Konfiguration
Führen Sie während der Entwicklung die clientseitige SPA-Version Ihrer Anwendung aus. Verwenden Sie die dev oder serve -Aufgabe, je nachdem, was Ihnen besser passt. Sie tun dasselbe.
# Mit Hot-Reloading bei localhost:3000$ npm servieren, dev ausführen
Gehen Sie zu http://localhost:3000
Generieren Sie für die Produktion die statische Site.
# ein statisches Projekt generieren$ npm run generic
Damit es auf Ihrem Produktionsserver funktioniert, muss der Build die endgültige URL/Domäne kennen, unter der die Site ausgeführt wird. Dazu können Sie die npm generate:manual Aufgabe in package.json bearbeiten und Ihre Produktions-URL festlegen. Dies ist nützlich, wenn Sie Ihre Website manuell bereitstellen:
# Erzeugen Sie ein statisches Projekt, das unter der in package.json$ npm angegebenen URL gehostet wird, führen Sie „generate:manual“ aus
Der Ordner Ihres generierten Projekts enthält eine Datei netlify-example.toml die Sie in netlify.toml umbenennen können, um mit der Netlify-Bereitstellung zu beginnen. Die BASE_URL wird automatisch basierend auf Ihrer Netlify-Konfiguration und der Art der Bereitstellung (Produktionsbereitstellung, Zweigstellenbereitstellung, Vorschaubereitstellung) festgelegt. Daher ist es nicht erforderlich, die Produktions-URL in package.json festzulegen .
Wenn Sie andere CI-Lösungen verwenden, müssen Sie immer darauf achten, dass die Umgebungsvariable BASE_URL auf die URL gesetzt ist, unter der die Website ausgeführt wird. Mit Tools wie GitLab können Sie Umgebungsvariablen in den Einstellungen des Projekts festlegen und die Bereitstellung Ihres Projekts ganz einfach nutzen, ganz wie Sie möchten.
Funktioniert nicht mit Nuxt v2.3.0 und höher : Es gibt einige Änderungen in Nuxt v2.3.0, die nicht mit Nuxtdown/Nuxtent kompatibel sind. Aus diesem Grund ist die Version derzeit auf v2.2.x festgelegt.
Wenn Sie daran interessiert sind, zum Projekt beizutragen, besuchen Sie CONTRIBUTING.md
