Создайте свою собственную CMS с открытым исходным кодом

Ghost - это платформа с открытым исходным кодом для создания и запуска современного интернет-издания. Он поддерживает блоги, журналы и журналистов от Zappos до Sky News.

В этом руководстве вы узнаете, как настроить Ghost на локальном компьютере и использовать его API для создания блога в Nuxt.js.

Почему вы должны использовать Ghost?

Остается вопрос: «Почему вам вообще следует использовать Ghost?» Вот некоторые преимущества, которые он имеет перед другими системами управления контентом.

Расширяемый редактор форматированного текста

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

Вы можете представить его как смесь редактора Medium и интеграции со Slack, которая упрощает редактирование статей и при этом предоставляет множество отличных функций. Редактор также является полностью расширяемым благодаря MobileDoc.

Бесплатный и открытый исходный код

Ghost - это приложение с полностью открытым исходным кодом, которое можно использовать практически с любым современным технологическим стеком.

Он обеспечивает локальную установку как для Windows, так и для Linux, и даже собственный образ Docker. Вы также можете заплатить за это, если хотите облачное решение Ghost Pro.

Оптимизированные каналы сбыта

Опубликовать один раз, распространить повсюду.

Этот принцип является основным строительным блоком Ghost и позволяет пользователю легко контролировать SEO (поисковую оптимизацию), определять метатеги и даже обеспечивает интеграцию с такими инструментами, как RSS-ридеры, электронная почта и Slack.

Полный JSON API

JSON API Ghost дает вам полный контроль над тем, какие данные нужно получать, устанавливать и отображать.

Это дает вам возможность создавать на его основе целые блоги или другие приложения для публикации и полностью настраивать процесс чтения. В этом руководстве вы будете использовать API, чтобы поместить данные в свой собственный блог Nuxt.js.

Настройка призрака

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

Установка разделена на две части:

  1. Установка Ghost на локальный компьютер (два разных способа).
  2. Базовая конфигурация Ghost, чтобы вы могли использовать API.

Установка

Windows

Процесс установки в Windows прост и может быть выполнен с помощью Ghost-CLI (интерфейс командной строки), который можно загрузить с помощью диспетчера пакетов Node (npm) или Yarn.

npm install ghost-cli@latest -g

После установки используйте следующую команду для проверки вашей установки:

ghost -v

После успешной установки интерфейса командной строки вы можете продолжить, установив локальную версию Ghost, используя следующую команду в пустом каталоге:

ghost install local

Ваш сайт-призрак теперь должен быть виден на http://localhost:2368. Вы также можете убедиться, что он запущен, с помощью команды ghost ls.

Это все, что касается установки Windows. Вот несколько полезных команд для управления вашими экземплярами Ghost:

  • ghost stop: Чтобы остановить Призрака.
  • ghost start: Чтобы запустить Ghost.
  • ghost log: просмотр журналов.

Докер

Другой способ установить Ghost на ваш локальный компьютер - использовать официальный образ Docker.

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

Вот команда для запуска базовой установки Ghost:

docker run -d --name ghost -p 2368:2368 ghost

Эта команда запускает контейнер Docker с официальным образом Ghost и публикует порт 2368, так что вы можете использовать контейнер в своей хост-системе без необходимости вводить IP-адрес контейнера перед портом.

Теперь ваш экземпляр должен работать на http://localhost:2368 и должен быть идентичен экземпляру при предыдущей установке.

При установке Ghost с помощью Docker нужно иметь в виду еще одну вещь. И именно так вы можете сохранить состояние вашего приложения при изменении жизненного цикла контейнера. Это делается путем определения объемов.

docker run -d --name ghost -p 2368:2368 -v local/path/data:/var/lib/ghost/content ghost

Если вам нужна дополнительная информация о том, как настроить Ghost с помощью Docker, я бы рекомендовал проверить документацию к официальному образу.

Ubuntu

Я никогда лично не устанавливал Ghost на Ubuntu, поэтому вместо этого я просто сделаю ссылку на официальную документацию.

Базовая конфигурация

Теперь, когда установка завершена и у вас есть Ghost, работающий на вашем локальном компьютере, давайте продолжим базовую настройку вашего проекта Ghost.

Первый экран, который вы увидите при посещении http://localhost:2368, должен выглядеть примерно так:

Здесь вам просто нужно нажать создать учетную запись и продолжить настройку.

Далее вам нужно создать пользователя. Просто заполните форму и продолжайте.

Следующим шагом будет добавление других писателей, которые мы пока пропустим. После нажатия продолжить вы должны увидеть окно, похожее на это:

Следующим шагом будет включение API, чтобы вы могли начать разработку интерфейса на Nuxt.js. Вы можете сделать это, перейдя к интеграции и нажав Добавить индивидуальную интеграцию.

Теперь вам просто нужно дать ему имя, в моем случае API.

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

Ghost API

Отлично, теперь, когда настройка завершена, давайте взглянем на Ghost Content API и все доступные возможности и конечные точки.

Ghost RESTful API доставляет публикуемый контент пользователям и может быть доступен в режиме только для чтения любому клиенту для визуализации веб-сайта. Контроль доступа осуществляется с помощью ключа API и предоставляет SDK, который позволяет легко фильтровать и запрашивать ваши данные.

Конечные точки

Все конечные точки Content API используют ключевое слово GET и возвращают данные JSON. Вот список наиболее важных конечных точек:

  • /posts - Получать сообщения.
  • /authors — Найдите авторов.
  • /tags - Получить теги.
  • /pages - Получить страницы.
  • /settings - Получить настройки.

Ответы этих конечных точек представляют собой списки, содержащие объекты. Вот пример ответа конечной точки /posts:

SDK также позволяет вам определять конкретные поля, которые вы хотите запросить, и другие параметры фильтрации.

Если вам нужна дополнительная информация о Ghost Content API, я бы порекомендовал официальную документацию.

Создание проекта Nuxt

Теперь, когда у вас есть настроенное свойство Ghost и вы знаете основы API, давайте приступим к изучению внешнего интерфейса Nuxt.js.

Настраивать

Во-первых, вам нужно создать новый проект Nuxt.js и установить необходимые зависимости, используя следующие команды:

npx create-nuxt-app nuxt-ghost 
cd nuxt-ghost && npm install @tryghost/content-api --save

Эти команды создадут базовый проект Nuxt и установят необходимую зависимость. Теперь вам нужно только создать необходимые файлы и папки, прежде чем вы сможете начать кодирование.

Вот скриншот моей структуры папок:

Реализация Ghost API

Теперь, когда вы завершили процесс настройки, вы можете приступить к реализации фактических функций. Начнем с копирования вашего ключа API в constant.js файл, который вы создали выше.

export const API_KEY = "YOUR-KEY"

Следующим шагом является реализация некоторых утилит, которые значительно упростят использование библиотеки Ghost Content API. Для этого вам нужно добавить простой код в ваш ghost.js файл.

Хорошо, давайте пройдемся по нему для лучшего понимания:

  • Мы импортируем GhostContentAPI и ключ API из нашего файла конфигурации.
  • Затем мы создаем базовый экземпляр Ghost API, используя URL-адрес, на котором работает ваш экземпляр Ghost, и ключ API вашего API.
  • Переменная postIndexFields определяет поля, которые мы хотим получить от API и будем использовать позже.
  • Наконец, мы экспортируем три переменные, чтобы мы могли использовать их в других файлах.

Теперь откройте файл pages/index.vue и импортируйте утилиты, которые вы только что создали в своей конфигурации.

Здесь вы получаете все сообщения, которые вы опубликовали в Ghost, и сохраняете их в переменной, определяя конечную точку, на которую вы хотите отправить запрос (в данном случае сообщения), и определяете поля, которые вы хотите получить (если вы этого не сделаете). определите поля, вы получите все по стандарту).

Затем вы возвращаете первую статью массива, которая будет отображаться в вашем макете.

Все, что вам нужно сделать, это отрендерить разметку и добавить стиль.

Вот и все. Вы успешно загрузили сообщение в блоге из Ghost API.

Если вы откроете приложение, оно будет выглядеть примерно так:

Вуаля! У вас есть современный блог с рендерингом на стороне сервера, созданный с помощью Ghost.

Мы едва коснулись того, что возможно с Ghost API, но получили отличный обзор того, как его использовать. Остальные запросы работают аналогично и могут быть добавлены с очень небольшими затратами времени.

Весь код этого руководства также доступен на моем GitHub.

Заключение

Вы прошли до конца! Я надеюсь, что эта статья помогла вам понять основы Ghost и то, как вы можете использовать API для создания собственных приложений.