Обзор Netlify CMS на React и Git

Обзор Netlify CMS, системы управления контентом на основе React & Git

Alt-ecommerce

Ах, сайты.

Мы не делаем их, как мы привыкли, да?

По крайней мере, не с JAMstack !

Jamstack

  • Нам не нужна монолитная CMS; у нас есть современные статические генераторы сайтов и веб-приложения.
  • Нам не всегда нужна реляционная база данных; у нас есть Git для хранения контента.
  • Нам не нужно поддерживать серверы; у нас есть CDN, выделенные API и бэкэнд-как-сервис.

«Но подождите, если я закрою мой WordPress для установки и хранения моего контента, и буду хранить его скажем, в GitHub, то как с этим работать не имея навыков разработчика»

На это много ответов . В этой статье я расскажу об одном: Netlify CMS .

Мы уже давно знаем основную команду Netlify. Они много лет занимаются разработкой движения JAMstack. Еще до того, как их запуск SF начался, их главный приоритет всегда заключался в расширении возможностей разработчиков с помощью современных инструментов веб-разработки.

Набор ресурсов, которые они выпустили, довольно велик, но сегодня я буду изучать только свои CMS с открытым исходным кодом на основе Git.

Я коснусь подхода к веб-разработке, который он поддерживает, и покажет вам, как привязать его на сайте JAMstack.

Основанный на Git подход к управлению контентом

Alt-GitHub

Во-первых, важно понять, что вы здесь делаете.

Предпосылка JAMstack заключается в том, что вы можете использовать современные интерфейсные инструменты для создания более легких, быстрых и безопасных сайтов. И FYI, это не крайняя экстравагантная разработчик. Целые организации, такие как Smashing Magazine , Sequoi Capital & Mailchimp, мигрировали в JAMstack.

Одним из первых последствий здесь является развязка здания и хостинга вашего сайта. Вы можете «предварительно испечь» и предварительно создать статические активы, а затем обслуживать их на CDN . Это эффективно освобождает ваш контент от требований к базе данных / шаблонам традиционной CMS.

Однако сам контент по-прежнему должен где-то жить. Вот где Git - мы сосредоточимся на GitHub в этом посте.

Чтобы создать свой сайт, вы можете использовать статический генератор сайтов, такой как Jekyll или Hugo. Или JS-фреймворк, такой как Angular, React или Vue. Это не имеет значения. Дело в том, что вы храните содержимое сайта в репозитории GitHub, где большинство ваших страниц могут быть простыми файлами Markdown / YAML. Затем вы развертываете и размещаете статический контент на CDN.

Наличие вашего контента в Git привносит власть управления версиями в управление контентом.

Эффективные смазочные механизмы GitHub - ветви, вилки, тяговые запросы, слияния - позволяют легко отслеживать и откатывать модификации сайта (мы увидим, как Netlify CMS справляется с этим с элегантностью).

Все это звучит потрясающе … для разработчиков. Но спрашивать нетехнические взгляды на создание, редактирование, просмотр и утверждение контента в GitHub? Это рецепт катастрофы.

Но не бойтесь, дорогие друзья, потому что есть много способов, чтобы побочный шаг сказал катастрофу. От безголовых CMS, таких как Directus & Contentful, к CMS, подобным генератору , например CloudCannon , растет предложение инструментов.

Общие сведения о Netitify, основанной на Git, React CMS

Alt-ecommerce

Netlify по своей сути является платформой автоматизации для развертывания современных статических веб-сайтов. Кроме того, они создают интересные проекты с открытым исходным кодом . Netlify CMS является одним из них.

Вкратце, Netlify CMS является основанной на Git, CMS с открытым исходным кодом.

По сравнению с другими отлаженными, но проприетарными продуктами CMS, это попытка предложить стандарт с открытым исходным кодом для управления содержанием Git-centric. Другими словами, он нацелен на то, чтобы начинающее сообщество стало WordPress из JAMstack и статических рабочих процессов.

Интеграция «SPA как CMS»

В отличие от некоторых своих коллег SaaS, Netlify CMS - это полномасштабное приложение React, которое вы добавляете на свой сайт. Он может быть подключен к любому статическому генератору сайта . Вы включаете его в свой проект с двумя простыми файлами ( cms.js & config.yml ) вместе со своим CSS. Вы можете получить CMS из CDN или связать его прямо в своем приложении.

Затем он связывается с вашим /admin/ route, чтобы обслуживать его интерфейс.

Таким образом, cms.js предоставит вам доступ к слою интерфейса React CMS.

И config.yml - это то, где вы будете определять типы и поля контента.

Netlify CMS группирует контент, который он управляет в коллекциях. Я покажу вам практический пример позже, но вот его полная архитектура .

Рабочий процесс управления контентом GitHub

Наверное, вы уже догадались, но с Netlify CMS ваш контент живет в … GitHub! Правильно, CMS сама использует API GitHub для непосредственного взаимодействия с вашим репо-контентом. В этом смысле это «агрегированный инструмент сборки».

Чтобы использовать его, вам нужно предоставить CMS доступ к вашей учетной записи GitHub. Вы можете приглашать пользователей на сайт проекта, добавляя их в качестве соавторов или членов вашей организации. После этого нетехнические люди больше не будут взаимодействовать с GitHub.

Это подход, основанный на разработке, который заставляет нетехнических пользователей работать в эффективном рабочем процессе. Мы можем определенно отстать от этого в Snipcart. :)

Управление контентом и редакторский рабочий процесс

Alt-NetlifyCMS

После того, как вы включили CMS на свой сайт, выпуск контента - легкий ветерок. Добавьте /admin в конце URL вашего сайта, и вы получите доступ к интерфейсу CMS.

Оттуда плавно плавают:

Новые страницы добавляют новые файлы в репозиторий GitHub.

Изменения и изменения генерируют фиксации существующих файлов.

Alt-github content

В зависимости от типов контента, которые вы указали, существует множество типичных материалов CMS: создание страниц, изменение названий, категорий, дат, авторов, текста, изображений и т. Д. Netlify CMS предлагает даже богатый текстовый редактор для упрощения форматирование уценки.

Теперь, на статическом сайте, отредактированный контент не может быть построен и «предварительно просмотрен» динамически, как с помощью традиционной CMS. Весь сайт должен обновиться, чтобы новый контент был доступен. Поэтому, чтобы помочь нетехническим редакторам отслеживать их изменения, приложение React включает в себя рендеринг предварительного просмотра.

Еще одна опрятная функция Netlify CMS - это « рабочий процесс редактора » на основе Git. Хотя он прост, он удовлетворяет потребности нетехнических людей и более серьезных веб-издателей. Это позволяет писателям представлять проекты и редакторы для их утверждения и публикации. Но вот крутая часть - что происходит в GitHub под капотом:

Alt-workflow

Умный способ использовать ветвление Git!

Расширение CMS с реакцией

В наши дни React стал фаворитом разработчиков, и Netlify хорошо использует свою систему повторного использования и Redux. Например, бок о бок просмотр React CMS-шаблон можно легко улучшить с помощью компонентов React. То же самое касается редактора содержимого: вы можете добавлять к нему модули с поддержкой React, такие как подборщики цветов и изображений. В некотором роде это открывает двери для разработчиков, которые хотят улучшить опыт управления содержанием нетехнических людей.

Вы можете увидеть существующие виджеты CMS здесь или, что еще лучше, внести свой вклад!

Что касается SEO, то в основном это будет связано с тем, как вы структурируете контент своего сайта или приложения. Однако ваша CMS может включать любые мета-поля, которые вам нужны.

Примечание. Мы писали о предварительном рендеринге Vue.js для SEO в последнее время, должны ли это вдохновлять или помогать вам.

Если вы сначала почувствуете себя как тест-драйв Netlify CMS с Hugo в качестве статического генератора сайта, используйте бесплатный шаблон стартера Kaldi-Hugo, который они предоставляют.

Учебник Netlify CMS: установка его на реальном репо GitHub

В этом разделе я покажу вам, как привязать Netlify CMS поверх репо GitHub, содержащего существующий статический сайт. Я буду использовать один из наших самых популярных проектов JAMstack с открытым исходным кодом: snipcart-jekyll-integration.

Здесь вы можете найти подробную информацию об этой интеграции.

Мы увидим, как продукты, которые мы включили в наш сайт Jekyll, могут легко стать управляемыми в Netlify CMS.

Предварительные условия

  • Бесплатная учетная запись Snipcart (если вы хотите включить ее в проект)
  • Счет GitHub

Закладка проекта статического сайта

Запустите новую папку, в которой вы хотите, чтобы ваш проект был и инициализировал его для npm и git.

Для нашей демонстрации мы будем использовать пакет npm, но вы также можете использовать CDN. Идите вперед и запустите npm install –save netlify-cms чтобы добавить его.

Поскольку мы собираем все вместе с webpack , нам также понадобится несколько загрузчиков, чтобы сделать эту работу.

 npm install --save-dev file-loader
 npm install --save-dev style-loader
 npm install --save-dev css-loader
 npm install --save-dev babel-loader babel-core babel-preset-env webpack`

Теперь запустите свой любимый редактор: время, чтобы руки были грязными.

Сначала мы создадим новую папку /admin в корне проекта.

Там мы index.js 3 новых файла: index.html , index.js , config.yml .

Наш index.html будет просто использоваться для загрузки нашей SPA CMS.

Вот его содержание:

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Content Manager</title>
 </head>
<body>
 <script src="./bundle.js"></script>
</body>
</html>

В нашем файле index.js мы собираем пакет CMS во время нашего процесса сборки. Теперь, в этом примере, мы фактически не будем расширять CMS. Тем не менее, я подумал, что было бы неплохо показать вам, как загрузить его через webpack:

import CMS from 'netlify-cms'
import CSS from 'netlify-cms/dist/cms.css'

export default {
    CMS,
    CSS
}

Последний файл является самым важным. Здесь мы указываем наше репо GitHub, действуя как бэкэнд, и где мы объявляем нашу структуру коллекций. Мы также могли бы определить настраиваемые страницы администрирования, такие как настройки здесь.

backend:
 name: github
 repo: snipcart/netlify-cms-snipcart
 branch: master

media_folder: "img/uploads"

collections:
 - name: "products"
   label: "Products"
   folder: "_products"
   slug: "{{slug}}"
   create: true
   fields:
       - {label: "SKU", name: "sku", widget: "string" }
       - {label: "Price", name: "price", widget: "number"}
       - {label: "Image", name: "image", widget: "string"}
       - {label: "Body", name: "body", widget: "string"}  
       - {label: "Slug", name: "slug", widget: "string" }
       - {label: "Layout", name: "layout", widget: "hidden", default: "productdetails"}

Добавление контента в наш новый проект

Давайте возьмем наш существующий статический магазин и перенесем его на CMS в процессе сборки. Это покажет вам, насколько гранулированный и «платформенно-агностический» подход Netlify.

Для этого мы будем использовать нашу интеграцию Jekyll. Здесь вы можете найти полное репо.

Просто скопируйте файлы и опустите их в корневую папку.

Единственное, что вам нужно изменить, это _products папки _products в .md вместо .html .

Создание процесса сборки

У нас уже есть все необходимое для нашего сайта. На данный момент нам нужен только веб-пакет, чтобы обернуть все.

Создайте файл webpack.config.js в корневом каталоге:

module.exports = {
   entry: "./admin/index.js",
   output: {
       path: `${__dirname}/admin`,
       filename: "bundle.js"
   },
   module: {
       loaders: [
           { test: /\.css$/, loader: "style-loader!css-loader" },
           {
               test: /\.(eot|svg|ttf|woff|woff2)$/,
               loader: 'file-loader?name=public/fonts/[name].[ext]'
           }
       ]
   }
};

Это загрузит и /admin/index.js файл /admin/index.js внутри bundle.js и bundle.js его непосредственно в папку администратора. Последняя необходимая настройка находится на стороне Джекила. Добавьте следующий раздел в свой _config.yml :

exclude:
- admin/index.js
- webpack.config.js
- package.json
- README.md

Откройте файл packages.json и добавьте эти два в раздел scripts :

"dev": "webpack && jekyll serve",
"build": "webpack && jekyll build"

Это выведет все в аккуратной папке _site . И когда вы нажмете маршрут /admin , загрузится React CMS. Если вы что-то измените, он обновит Git repo и вернет вашу сборку, предположив, что вы ее настроили

Попробуем это на платформе Netlify.

Загрузка в прямом эфире: GitHub в спину, Jekyll спереди и Netlify CMS посередине!

Время развертывания этой демонстрации Netlify CMS!

Направьте все на GitHub и перейдите на сайт http://netlify.com. Не волнуйся; если ваш проект открыт с открытым исходным кодом, все бесплатно. :)

Нажмите «Новый сайт из Git», затем выберите GitHub и ваше репо.

Вам нужно будет использовать npm run build качестве вашей команды сборки, а _site качестве каталога публикации.

После сборки вы можете получить доступ к своему сайту и TA-DAH!

Alt-sitestore

У вас должно быть что-то похожее на нашу оригинальную демонстрацию Jekyll .

См. Репо, включая Netlify CMS, поверх нашей интеграции Snipcart-Jekyll

Вы можете перейти на маршрут /admin , и появится CMS.

Войдите в систему через GitHub, и вы увидите редактор с поддержкой React:

Alt-нетлифи джекил

Если вы добавите новый продукт, он будет перенаправлен на репозиторий GitHub, и сборка будет запущена.

Вот и все!

Это оставляет нам довольно классный JAM:

  • Легкий и быстрый статический сайт электронной коммерции с Jekyll & Snipcart
  • Защищенный и контролируемый версиями репозиторий контента в GitHub
  • Легкое и расширяемое управление контентом в Netlify CMS
  • Автоматическая сборка и развертывание с платформой Netlify

И разработчики, и нетехнические люди должны быть довольны этой настройкой. Работа выполнена !

Вывод

Игра с Netlify CMS была отличной. Даже если он еще очень молод, документация краткая и простая в использовании. Он действительно действует как классный статический генератор сайтов CMS. У меня была небольшая проблема с тем, что фронт-вопрос не загружается правильно в статических файлах, созданных под Windows. Но я опубликовал вопрос, и он разобрался через 15 минут. Не мог просить лучшего обслуживания! В общем, я должен был потратить час или около того, чтобы сделать эту демонстрационную работу.

Если бы у меня было больше времени, я мог бы портировать все настройки сайта Jekyll непосредственно в Netlify CMS. Это облегчило бы для нетехнических подглядываний редактировать весь сайт, а не только продукты. Это потребует ввода этих настроек в сборку Jekyll.

В целом, я считаю, что Netlify CMS - это небольшой, но существенный шаг к унифицированному управлению контентом с открытым исходным кодом на современных сайтах JAMstack. Я очень рад видеть, как разработчики начинают распространять CMS нового поколения и как он растет с течением времени и с сообществом. Git имеет большой смысл для социального кодирования, и я думаю, что он может сделать что-то подобное для управления контентом, если правильно использовать.

Для всех наших мыслей JAMstack и так, возглавьте этот путь .

Если вам понравился этот пост, зайдите на него, чтобы поделиться им в Twitter _. Есть комментарии, вопросы относительно этого рабочего процесса? Нажмите на раздел ниже!_

Maxime Laboissonniere

Полный разработчик стека

(с) Перевод оригинальной статьи https://snipcart.com/blog/netlify-cms-react-git-workflow

Поделиться Комментарии

Поделиться новостью

comments powered by Disqus