nuxt netlify cms starter template
v2.0.0
Создавайте статические веб-сайты без сервера с помощью Vue.js и Netlify CMS.
Это стартовый шаблон для создания статических веб-сайтов с помощью Vue.js и Netlify CMS на основе Nuxt v1.x. Что он охватывает:
Настройка через Vue CLI ?
Легко настроить практически пустой проект Nuxt.js.
В настоящее время не оптимизирован для Vue CLI v3.0 .
Редактирование контента через Netlify CMS ✏️
Netlify CMS — это клиентская CMS, подключающаяся напрямую к вашему репозиторию git для редактирования файлов уценки.
Также поддерживает другие форматы файлов, но этот шаблон работает только со стандартным форматом уценки.
Показать контент в Vue.js через модуль Nuxtent/Nuxtdown ?️
Модуль Nuxtdown (исправленная версия Nuxtent) позволяет запрашивать контент и отображать его в пользовательском интерфейсе.
Генерация статического сайта через Nuxt.js ✅
Nuxt.js, известная платформа для создания универсальных приложений Vue.js, генерирует статический сайт.
Nuxt.js + стартовый шаблон Netlify CMS
Конфигурация
Разработка
Производство
Развертывание вручную через FTP
Развертывание в Netlify
Развертывание с другими решениями CI
Предварительные условия
Настраивать
Использование
Известные проблемы
Вклад
Убедитесь, что установлены node 8.0+ и npm 5.0+
Вы знаете, что такое Netlify CMS и Nuxt.js.
Установка через vue-cli : если вы используете более новую версию Vue CLI, вам, вероятно, придется установить дополнительный пакет для работы vue init , поскольку этот шаблон еще не оптимизирован для более новой версии Vue CLI.
$ vue init renestalder/nuxt-netlify-cms-starter-template мой проект
$ cd мой проект
# установка зависимостей$ npm install # Или установка пряжи Отправьте проект в свой репозиторий git . Чтобы вообще иметь возможность редактировать контент, вам необходимо отправить проект в репозиторий git. CMS всегда подключается напрямую к репозиторию git и редактирует содержимое ветки, установленной в static/admin/config.yml .
Отлично, вы выполнили важные шаги для начала работы. Теперь правильно настройте все компоненты для вашей инфраструктуры.
Аутентификация и модели CMS. Настройте, где будет размещен ваш репозиторий, и как пользователи CMS будут входить в систему для редактирования контента. Также определите файлы и поля для вашего контента.
Файл : static/admin/config.yml
Документация : Официальная документация Netlify CMS -> Конфигурация.
Маршрутизация и запросы
Изначально пользовательский интерфейс не имеет ни малейшего представления о том, где хранится ваш контент и какие динамические маршруты к какому контенту принадлежат. Nuxt.js по умолчанию может отображать только статические страницы. Динамические маршруты, такие как сообщения в блогах с разными именами файлов, не обнаруживаются. Конфигурация для этого выполняется Nuxtdown.
Файл : nuxtdown.config.js
Документация : Nuxtdown Readme.
Общая информация о сайте
Общая информация, такая как HTML-теги <head> и заголовки страниц, задается через Nuxt.js. Не беспокойтесь о настройке маршрутизации для Nuxt.js, это решается Nuxtdown.
Файл : nuxt.config.js
Документация : Официальная документация Nuxt.js -> Конфигурация.
Во время разработки запустите клиентскую SPA-версию вашего приложения. Используйте задачу dev или serve , что вам больше подходит. Они делают то же самое.
# обслуживаем с горячей перезагрузкой на localhost:3000$ npm run dev
Перейдите по адресу http://localhost:3000.
Для производства создайте статический-сайт.
# создаем статический проект $ npm rungenerate
Чтобы он работал на вашем рабочем сервере, сборке необходимо знать конечный URL-адрес/домен, на котором будет работать сайт. Для этого вы можете отредактировать задачу npm generate:manual в package.json и указать рабочий URL-адрес. Это полезно, когда вы вручную развертываете свой веб-сайт:
# создаем статический проект, который будет размещен по URL-адресу, указанному в package.json$ npm rungenerate:manual
Папка сгенерированного проекта будет содержать файл netlify-example.toml который вы можете переименовать в netlify.toml чтобы начать развертывание Netlify. Он автоматически устанавливает BASE_URL на основе вашей конфигурации Netlify и типа развертывания (производственное развертывание, развертывание филиала, предварительное развертывание). Поэтому нет необходимости устанавливать рабочий URL-адрес в package.json .
Если вы используете другие решения CI, вам всегда необходимо убедиться, что для переменной среды BASE_URL задан URL-адрес, по которому будет работать веб-сайт. Такие инструменты, как GitLab, позволяют вам устанавливать переменные среды в настройках проекта и упрощают использование любого способа развертывания вашего проекта.
Не работает с Nuxt v2.3.0 и выше : в Nuxt v2.3.0 есть некоторые изменения, которые несовместимы с Nuxtdown/Nuxtent. Вот почему в настоящее время версия исправлена до v2.2.x.
Если вы заинтересованы в участии в проекте, посетите CONTRIBUTING.md.
