Unduh nuxt netlify cms starter template - nuxt netlify cms starter template Unduh kode sumber

nuxt netlify cms starter template

Kategori lainnya

v2.0.0

Unduh

Templat pemula CMS Nuxt.js + Netlify

Bangun situs web statis tanpa server dengan Vue.js dan Netlify CMS.

Ini adalah template awal untuk membangun situs web statis dengan Vue.js dan Netlify CMS, berdasarkan Nuxt v1.x. Cakupannya:

Pengaturan melalui Vue CLI ?
Siapkan proyek Nuxt.js yang hampir kosong dengan mudah.
Saat ini tidak dioptimalkan untuk Vue CLI v3.0 .
Pengeditan konten melalui Netlify CMS ✏️
Netlify CMS adalah CMS sisi klien yang terhubung langsung ke repositori git Anda untuk mengedit file penurunan harga.
Juga mendukung format file lain, tetapi templat ini hanya berfungsi dengan format penurunan harga frontmatter default.
Tampilkan konten di Vue.js melalui modul Nuxtent/Nuxtdown ?️
Modul Nuxtdown (garpu tetap dari Nuxtent) memungkinkan kueri konten dan ditampilkan di UI.
Pembuatan situs statis melalui Nuxt.js ✅
Nuxt.js, kerangka kerja terkenal untuk membangun aplikasi Vue.js universal, menghasilkan situs statis.

Templat pemula CMS Nuxt.js + Netlify

Konfigurasi
Perkembangan
Produksi
Penerapan manual melalui FTP
Terapkan ke Netlify
Terapkan dengan solusi CI lainnya
Prasyarat
Pengaturan
Penggunaan
Masalah yang diketahui
Kontribusi

Prasyarat

Pastikan Anda telah menginstal node 8.0+ dan npm 5.0+
Anda tahu apa itu Netlify CMS dan Nuxt.js.

Pengaturan

Instal melalui vue-cli : Jika Anda menggunakan versi Vue CLI yang lebih baru, Anda mungkin harus menginstal paket tambahan agar vue init dapat berfungsi, karena templat ini belum dioptimalkan untuk Vue CLI yang lebih baru.

 $ vue init renestalder/nuxt-netlify-cms-starter-template proyek saya
  $ cd proyek saya
                  # instal dependensi$ npm install # Atau pemasangan benang

Dorong proyek ke repositori git Anda : Untuk dapat mengedit konten, Anda perlu memasukkan proyek Anda ke repositori git. CMS selalu terhubung langsung ke repositori git dan mengedit konten pada set cabang di static/admin/config.yml .

Bagus, Anda telah melakukan langkah-langkah penting untuk memulai. Sekarang konfigurasikan semua komponen dengan benar untuk infrastruktur Anda.

Penggunaan

Konfigurasi

Otentikasi & model CMS Konfigurasikan lokasi repositori Anda dan bagaimana pengguna CMS akan login untuk mengedit konten. Tentukan juga file dan bidang untuk konten Anda.
File : static/admin/config.yml
Dokumentasi : Dokumentasi resmi Netlify CMS -> Konfigurasi
Perutean & kueri
Secara langsung, UI tidak memiliki petunjuk di mana konten Anda disimpan dan rute dinamis mana yang termasuk dalam konten mana. Nuxt.js hanya dapat memetakan halaman statis secara default. Rute dinamis seperti postingan blog dengan nama file berbeda tidak terdeteksi. Konfigurasi untuk ini terjadi oleh Nuxtdown.
File : nuxtdown.config.js
Dokumentasi : Nuxtdown Readme
Informasi situs web umum
Informasi umum seperti tag HTML <head> dan judul halaman diatur melalui Nuxt.js. Jangan repot-repot dengan konfigurasi perutean untuk Nuxt.js, ini diselesaikan oleh Nuxtdown.
File : nuxt.config.js
Dokumentasi : Dokumentasi Resmi Nuxt.js -> Konfigurasi

Perkembangan

Selama pengembangan, jalankan versi SPA sisi klien aplikasi Anda. Gunakan tugas dev atau serve , apa pun yang lebih cocok untuk Anda. Mereka melakukan hal yang sama.

 # sajikan dengan hot reload di localhost:3000$ npm run dev

Kunjungi http://localhost:3000

Produksi

Untuk produksi, buat situs statis.

 # menghasilkan proyek statis$ npm jalankan hasilkan

Penyebaran manual melalui FTP

Agar dapat berfungsi di server produksi Anda, build perlu mengetahui url/domain akhir tempat situs akan dijalankan. Untuk ini, Anda dapat mengedit tugas npm generate:manual di package.json dan mengatur URL produksi Anda. Ini berguna saat Anda menyebarkan situs web Anda secara manual:

 # menghasilkan proyek statis yang akan dihosting pada URL yang diberikan dalam package.json$ npm run generate:manual

Terapkan ke Netlify

Folder proyek yang Anda buat akan berisi file netlify-example.toml yang dapat Anda ganti namanya menjadi netlify.toml untuk memulai penerapan Netlify. Secara otomatis menetapkan BASE_URL berdasarkan konfigurasi Netlify Anda dan jenis penerapan (Penyebaran produksi, penerapan cabang, penerapan pratinjau). Jadi tidak perlu mengatur URL produksi di package.json .

Terapkan dengan solusi CI lainnya

Jika Anda menggunakan solusi CI lain, Anda harus selalu memastikan bahwa variabel lingkungan BASE_URL disetel ke URL tempat situs web akan dijalankan. Alat seperti GitLab memungkinkan Anda mengatur variabel lingkungan dalam pengaturan proyek dan memudahkan Anda menggunakan cara apa pun yang Anda inginkan untuk menerapkan proyek Anda.

Masalah yang diketahui

Tidak berfungsi dengan Nuxt v2.3.0 dan lebih tinggi : Ada beberapa perubahan di Nuxt v2.3.0 yang tidak kompatibel dengan Nuxtdown/Nuxtent. Itu sebabnya versinya saat ini diperbaiki di v2.2.x.