Давно подмывало опробовать новый движок блоговой платформы с любопытным названием ghost (привидение). Постараюсь коротко рассказать о его возможностях и о том, как с ним подружиться. В обзор войдёт установка и первоначальная настройка блога на локальной машине, изменение темы (и — о ужас! — файлов самого движка), а также полезные ссылки, где по́лно описывается процесс обновления и деплоя.

Сразу надо отметить: если читатель не желает тратить драгоценные минуты своей жизни на подбор хостинга, самостоятельные бэкапы и обновления, пусть знает, что всё уже готово «из коробки». Достаточно лишь зарегистрироваться на ghost.org и выбрать соответствующий тарифный план (иначе говоря, вместо бесплатного ghost использовать платный GhostPro).

Установка Ghost

Начнём с того, что ghost вполне современен по сегодняшним меркам: он работает на nodejs. Немного неожиданно, не правда ли? Конечно, наш герой не является полноценной заменой тому же wordpress’у, зато хорошо справляется со своей основной задачей: быть пригодным для ведения личного блога.

Перво-наперво заходим на ghost.org, скачиваем и распаковываем в какую-нибудь директорию архив. Устанавливаем nodejs любым способом: либо из репозитория/официального сайта, либо при помощи nvm.

В директории с распакованным архивом даём две команды:

$ npm install --production
$ npm start

Когда установятся все зависимости, ghost будет запущен по адресу http://localhost:2368/ghost. Проще некуда. Теперь посмотрим на веб-интерфейс и небольшой, но в принципе достаточный функционал.

Веб-интерфейс и доступные настройки

Скажем честно: ребята хорошо постарались и сумели произвести приятное впечатление. На первый взгляд всё идеально. Красивый, не перегруженный интерфейс и использование ajax создают видимость полноценного настольного приложения.

Очень радует тот факт, что для написания статей используется так полюбившийся автору markdown. Окно браузера делится на две части: в левой вы пишете пост, а в правой можете наблюдать мгновенный результат того, что у вас получилось (с подсчётом количесва слов, если для кого-то это важно). О заполнении мета-тегов можете не беспокоиться: title и description настраиваются для каждой записи отдельно. Также посту можно назначить теги и slug.

Ах, да, в теме casper при заданной в статье картинке-preview, эта картинка будет выводится в качестве шапки статьи. Иначе говоря: у каждой записи своя шапка. Интересная идея.

ghost post

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

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

ghost role

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

Есть и маленькая лаборатория, где вы можете импортировать/экспортировать свои старые записи и настройки.

Как внести изменения в роутинг

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

Да, пытливый ум читателя уже заподозрил что-то неладное. Если так, вы правы, путь у нас один: вмешаться в код самого ghost. Разумеется, ghost не должен быть запущен во время этой процедуры. Даже если он уже крутится на сервере.

Post

Для того, чтобы записи открывались по нужному url (в примере blog/posts/:post/ вместо blog/:post/), понадобится внести изменения в три файла.

  • core/server/config/url.js
  • core/server/routes/frontend.js
  • core/server/controllers/frontend.js

Открываем их поочерёдно, находим и заменяем строки в каждом из указанных между многострочным комментарием файлов:

/* core/server/config/url.js */
function urlPathForPost(post, permalinks) {
    // var output = '',
    var output = '/posts'


/* core/server/routes/frontend.js */
// Default
router.get('/', frontend.homepage);
// server.get('/*', frontend.single);
router.get('/posts/*', frontend.single);

return router;

/* core/server/controllers/frontend.js */
single: function (req, res, next) {
  // var path = req.path,
  var path = req.path.replace("/posts", ""),

Со статьями закончили. Но имейте ввиду, что страницы, помеченные как статические, тоже относятся к объекту post и это грустно: значит страница about начнёт открываться по пути /posts/about.

Tags

Но вдруг кому-то захочется изменить путь к тегам? Хорошо, тогда придётся заняться ещё несколькими файлами. Логика та же.

  • core/server/config/url.js
  • core/server/routes/frontend.js
  • core/server/controllers/frontend.js

Поехали. Заменим теги на категории, например.

/* core/server/config/url.js */
if (_.isObject(context) && context.relativeUrl) {
  // ... где-то в теле условия ...
  // urlPath = '/tag/' + data.tag.slug + '/';
  urlPath = '/category/' + data.tag.slug + '/';

/* core/server/routes/frontend.js */
// заменить все tag на category
// как видно, изменения коснутся и rss

server.get('/tag/:slug/rss/', frontend.rss);
server.get('/tag/:slug/rss/:page/', frontend.rss);
server.get('/tag/:slug/page/:page/', frontend.tag);
server.get('/tag/:slug/', frontend.tag);

/* core/server/controllers/frontend.js */
// Get url for tag page
// заменить все tag на category
function tagUrl(tag, page) {
  var url = config.paths.subdir + '/tag/' + tag + '/';

rss: function (req, res, next) {
  // ...где-то вниутри функции...
  function isTag() {
    return req.route.path.indexOf('/tag/') !== -1;
  }
  if (isTag()) {
    baseUrl += '/tag/' + slugParam + '/rss/';

feedUrl = siteUrl + 'tag/' + page.meta.filters.tags[0].slug + '/rss/';

Готово. Настоятельно рекомендуется не увлекаться и помнить, что при обновлении все изменения в core будут перезаписаны. Править пути снова придётся вручную.

В целом, есть два варианта выхода из положения:

  • писать в книгу жалоб и предложений на github и ждать реакции
  • писать свои плагины

Темы для ghost

Ghost — молодая платформа. Однако, не стоит недооценивать его. Он развивается очень быстро, имеет широкое (пока не русскоязычное) сообщество и уже может похвастаться довольно внушительным списком готовых тем. Многие темы писались энтузиастами для энтузиастов, но ещё больше можно купить на том же themeforest. Ну, или написать самостоятельно, благо сделать это с ghost не составляет большого труда.

Коллекция тем может быть найдена, например, на marketplace.ghost.org. Надо отметить, что большинство бесплатных шаблонов повторяют стандартную тему casper (символичное имечко). А выглядит она совсем неплохо. Не знаю как разного рода аналитики отнесутся к главной её отличительной особенности — большим шапкам, но лично мне они нравятся.

Отдельно стоит поговорить о подсветке синтаксиса. По-умолчанию её нет и, если вас это не устраивает, самый простой способ: раскрашивать код при помощи javascript как это делают на frontender magazine.

Бежим за prismjs. Выбираем то, что нужно, и заливаем в директорию со своей темой content/themes/mythemename/assets. Открываем в текстовом редакторе файл темы default.hbs и «цепляем» скачанное.

<link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
<script src="{{asset "js/prism.js"}}"></script>

Раскрашиваем.

syntax higlights

Создание разного оформления для разных (например, статических) страниц также реализуется очень просто. Нужно иметь под рукой саму страницу и файл шаблона для неё. С первой всё ясно. Вторая создаётся с определённым названием, дабы ghost мог «подхватить» её.

  • page-about.hbs для страницы about
  • page-contact.hbs для contact

Основой для наполнения страницы служит уже имеющийся шаблон page. Логично и просто.

Миграция на Ghost

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

Перебираемся с jekyll. Клонируем репозиторий и перемещаем jekylltoghost.rb в директорию _plugins. Запускаем генерацию контента при помощи jekyll build.

В каталоге с контентом видим файл ghost_export.json, который можно загрузить через инструменты импорта/экспорта в административной панели ghost.

Для wordpress, tumblr и blogger уже существует инструкция.

Итоги

Если хочется завести ghost самостоятельно, сразу смотрим в сторону зарубежных товарищей, среди которых: Digital Ocean(VPS), OpenShift, Heroku, etc. Хорошие мануалы по деплою находятся на howtoinstallghost.com.

Ответы на вопросы, которые сознательно не были освещены здесь, можно найти на странице поддержки.

Что можно сказать о ghost в целом? Конечно, он свежий. Конечно, он любопытный. Для ведения блога годится, однако, не лишён недостатков, которые, надо надеяться, со временем будут устранены. Из оных можно отметить отсутствие нативной настройки своих url-адресов, отсутствие локализации, отсутствие возможности осуществить обратную свзять с посетителем (впрочем, для формы контактов подойдёт formspree.io, а комментарии предлагается держать в каком-нибудь disqus)… в общем, выглядит сладкой конфетой, но на вкус пока пресноват.

Что ожидается в будущем? Надо полагать, по прошествии времени популярность маленького привидения будет только расти. И чтобы быть во всеоружии обратить внимание на ghost нужно уже сейчас. Особенно, если вам доводится работать с зарубежными заказчиками. ⤧  Следующая запись Пользовательские типы записей в wordpress