Автор: Ян Седо - 22 мая 2019 г.

Когда в прошлом мне приходилось сталкиваться с задачей быстрого создания страницы, я выбирал WordPress. У меня уже был сервер с поддержкой PHP и база данных, установленная на моем компьютере, поэтому мне просто нужно было создать нового пользователя базы данных, выполнить некоторую работу по настройке, а затем все заработало. Через несколько часов или несколько дней у меня был готовый к развертыванию рабочий веб-сайт.

Этот процесс меня устроил, поскольку у меня есть опыт разработчика и в прошлом я много работал с MySQL. Для некоторых моих коллег по фронтенду это было не так. Ввод их в phpMyAdmin (веб-интерфейс администрирования MySQL) означал, что все данные в этой базе данных были в опасности, поэтому мне пришлось установить инструменты разработки и настроить их установки WordPress для них. И еще одна задача, требующая моего внимания, заключалась в развертывании этих сайтов на удаленном сервере.

Как бы то ни было, 2010 год уже не год. Фронтенд-разработка становится все более популярной, и теперь почти каждый может писать на JavaScript. Вместе с этим появился новый способ создания и использования веб-шаблонов.

Лучший способ с Headless CMS

Вы когда-нибудь слышали о системе управления контентом (CMS)? В настоящее время нам нравится размещать все в облаке, поскольку это проще, доступнее и доступно везде (при наличии подключения к Интернету). Использование безголовой CMS - это именно то, что вам нужно. Вы получаете современный интерфейс администрирования для управления контентом без необходимости устанавливать, поддерживать или обновлять.

Это привносит в уравнение свежую новую концепцию, потому что вам больше не нужно заботиться об этой базе данных. Ваши данные хранятся за безголовой CMS, и вы можете перетащить их на свой сайт с помощью API, что значительно расширяет ваши возможности. Если ваш контент не привязан к вашему приложению, реализация веб-сайта будет представлена ​​только самой внешней реализацией, что дает вам полную свободу в выборе технологии, которую вы хотите использовать.

Веб-шаблоны 2.0

Я обещал более быстрый способ создать простой веб-сайт, так что хватит беготни. Вот шаблон в одном небольшом ZIP-файле:

Kc-template-multiverse-master.zip (ZIP, 4,6 МБ)

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

  1. Импортируйте контентную часть в безголовый проект CMS
  2. Сообщите своему сайту, где его найти

Готово!

В облако Kentico

Выше я упоминал безголовую CMS, и Kentico Cloud - та самая. Благодаря возможности моделировать и ограничивать контент, определять разрешения на редактирование контента и оптимизированный пользовательский интерфейс, именно здесь вы и ваши редакторы контента получите удовольствие.

Так же, как мы привыкли к другим облачным сервисам, вы можете использовать безголовую CMS бесплатно. Kentico Cloud предлагает вечно бесплатный план под названием Начальный, который идеально подходит для небольших веб-сайтов. Некоторые расширенные функции открываются с планами более высокого уровня, и их определенно стоит изучить, но это уже другая история. Если вы новичок в Kentico Cloud, вы можете создать бесплатную учетную запись на kenticocloud.com.

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

Так как же его импортировать? У Kentico Cloud есть API, который позволяет вам программно управлять контентом и моделями, который мы будем использовать на следующем этапе. Но не волнуйтесь. Не нужно пачкать руки - тяжелую работу уже сделал кто-то другой, поэтому мы можем импортировать все через приятный интерфейс.

Просто не забудьте отметить свой идентификатор проекта и ключ API управления контентом. Вы найдете оба в настройках проекта под ключами API в приложении.

Импорт содержимого

Обратите внимание на время. Если импорт займет у вас больше нескольких минут, я куплю вам пива. Чтобы импортировать данные, воспользуйтесь этим инструментом: https://kentico.github.io/cloud-template-manager/

Здесь родилась контентная часть шаблона. Сам инструмент уже использует API управления контентом Kentico Cloud, поэтому вам не нужно разбираться в этом скрипте импорта / экспорта.

Так что именно он может для нас сделать?

  • Он может создавать пакет экспорта данных, который вы можете импортировать позже.
  • Он может переносить элементы между существующими проектами
  • Он может импортировать данные из проекта или ZIP-пакета в ваш новый проект.

Последний вариант - это то, что нам нужно. Пакет экспорта - это просто большой JSON данных, который понимает менеджер проекта, и содержащий все модели контента и элементы контента из вашего проекта. Вы можете думать об этом как о своего рода импорте SQL.

Итак, как сделать импорт?

  1. Разархивируйте архив и найдите пакет для импорта данных.
  2. Перейдите на вкладку Импорт инструмента менеджера проектов KC.
  3. Загрузите инструмент с ключами API из предыдущего абзаца
  4. Перетащите пакет импорта и подтвердите импорт.

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

Заполнение веб-сайта

Когда вы откроете Kentico Cloud, вы должны увидеть все импортированные данные. Последний шаг и единственная настройка, которую вам нужно сделать, - это сообщить вашему сайту идентификатор проекта в Kentico Cloud. Итак, откройте свой любимый редактор кода или просто Блокнот и откройте файл конфигурации. Какой это файл, зависит от шаблона, в данном случае это /assets/js/kenticocloud.js. Замените выделенную часть своим идентификатором проекта.

Вот и все! Теперь вы можете открыть index.html в своем любимом браузере и перейти на новый сайт. Когда вам захочется обновить какой-то контент, откройте Kentico Cloud и измените его. На вашем веб-сайте будут отражены изменения.

Чтобы настроить реализацию сайта, вы можете редактировать файлы кода сайта. Он разделен на отдельные компоненты, поэтому его легко настроить, не обладая при этом предварительными знаниями. Если вы немного знаете JavaScript, это будет для вас проще простого. После нажатия кнопки «Обновить» вы сразу увидите изменения в своем коде.

Вывод вашего сайта в Интернет

Теперь у вас есть веб-сайт, который работает локально с динамическим контентом, который легко обновлять и поддерживать. В списке дел осталось только показать миру свои достижения и опубликовать их в Интернете.

Самый простой способ развернуть такой сайт - скопировать и вставить файлы на удаленный сервер. Это просто набор статических файлов, которые не требуют дополнительной настройки. Если у вас нет или нет доступа к серверу, на котором будет размещен ваш новый сайт, существуют также более автоматизированные способы развертывания и различные хостинг-провайдеры, такие как GitHub Pages, Surge и другие, которые могут творить для вас чудеса. Если вы настоящий технарь и хотите узнать больше, прочтите эту статью.

Резюме

Вот и все! Готовый к внедрению веб-сайт и отличная платформа «Контент как услуга» со всеми необходимыми функциями управления контентом, и все это бесплатно всего за несколько кликов и редактирования текстовых файлов. Единственное, что вам нужно сделать, это изменить содержимое образца на свои собственные данные. Не стесняйтесь проверить список всех наших шаблонов здесь:

Галерея веб-шаблонов Kentico Cloud

Мы добавляем новые шаблоны каждую неделю вместе с нашими замечательными участниками сообщества, поэтому обязательно проверяйте их каждые несколько дней, если вы не нашли шаблон, который сразу соответствует вашим потребностям. И если да, дайте нам знать, как вы его нашли!

Первоначально опубликовано на https://kenticocloud.com.