Полная инструкция о том, как создать сайт Ghost. Часть 2. Изменение и настройка шаблона сайта.

Полная инструкция о том, как создать сайт Ghost.  Часть 2. Изменение и настройка шаблона сайта.

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

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

Скачивание и смена темы

Для работы с шаблонами сайта тебе понадобится FTP клиент - нужен будет когда приступим к изменению файлов темы сайта (для виндовс рекомендую - FileZilla) , ну а терминал (PuTTY или аналог) для работы с сервером и перезагрузки сайта, ты уже установил в первой части.

Сам Ghost, при переходе во вкладку "Design" в админ панели, добродушно предлагает ознакомиться со списком официальных тем в маркетплейсе.

Не буду сейчас вдаваться в подробности каждой настройки в Ghost, будем с тобой разбираться по ходу пьесы - жми "Theme Marketplace".

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

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

Вторым местом, где можно найти шаблон на любой вкус - Github (пристанище повелителей клавиш, кода и мышки 😀).

Просто введи в поиске "ghost theme" и выбирай понравившийся репозиторий. Они тут все бесплатные, но очень вероятно, что придётся её доделывать самостоятельно. И ещё - обращай внимание на последнюю дату обновления, тут есть шаблоны, которые не обновляли с 2015 года 🤷‍♂️.

Шаблон этого сайта на котором ты сейчас находишься взят именно с Github (называется simply). Мне он понравился больше всего, но выбирать все же тебе - можешь взять и с официального маркетплейса, принцип действия будет одинаков для всех тем.

Возвращайся в админ панель Ghost во вкладку "Design" и загружай архив темы, который ты скачал с Github, следом жми "Activate".

Вот так по новому теперь выглядит твой блог

Настройки в админ панели сайта

Теперь возвращайся в админ панель сайта - сделаем первоначальную настройку сайта.

Перейди во вкладку "General":

Из фото, наверное понятно, что какое поле означает. Снизу есть графа локализации - попробуй поставить ru (по умолчанию стоит en), если локализация в выбранной тобой теме есть, то она будет переведена на русский язык.

По второму блоку настроек тоже всё понятно - логотип окна браузера, логотип на сайте и последнее (которое я убрал) обложка верхнего блока на главной странице сайта.

Следующий блок настроек отвечает за отображение твоего сайта в поиске (Meta data) и в соцсетях (Twitter card и Facebook card). При написание текстов тут, придерживайся рекомендаций - 70 символов для заголовка и 156 символов для описания.

Следующий блок отвечает за ссылки на соцсети и отключение сайта от индексации поисковыми системами (Make this site private - не рекомендую включать, даже если сайт вы только начали включать).

Из соцсетей здесь только две - FB и Twitter. Ниже в статье разберемся, как добавить остальные соцсети на сайт.

Переходим дальше по настройкам - жми на "Design".

Этот блок ты уже видел - он отвечает за меню на сайте.

Navigation - это главный блок меню твоего сайта, как, например, на фото ниже.

Secondary navigation - блок, который может располагаться где угодно, в зависимости от выбранной тобой темы. У меня от выключен.

Code injection - самое главное место сайта, где ты будешь настраивать сам код сайта, а также изменять его внешний вид. Сюда также добавим код аналитики сайта - Google Analytics и FB Pixel (можно и Яндекс Метрику, и любой другой код для отслеживания посетителей сайта). Ниже в статье, объясню и покажу как этим пользоваться.

Переходи в следующий блок настроек - Integrations.

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

Дальше по списку самый важный пункт, из-за которого Ghost обожают - настройка интеграций и оплаты, закрытых/платных публикаций только для твоих подписчиков.

Чтобы включить эту возможность сбора подписчиков - включи "Enable members".

Connect to Stripe - отвечает за приём оплат по подписке. К сожалению, в России этот сервис не работает из-за сложности интеграции биллинговой системы, но ты не расстраивайся, мы с тобой найдём способ всё настроить.

Следующий пункт "Subscription pricing" - отвечает за установку стоимости месячной и годовой подписки, а также валюты, в которой будет проходить расчёт.

Следующий пункт - "Allow free member signup". Если включен, то разрешает бесплатно регистрировать подписчиков без ежемесячных или годовых оплат. Включи его сейчас - это нам понадобиться, когда ты будешь настраивать почтовый сервер для сбора подписчиков. Подробности будут ниже в этой статье.

Следующий пункт -  "Default post access". Отвечает за то, какие настройки будут по умолчанию при написании и публикации статьи (это не принципиально, их можно поменять в момент публикации).

  • Статья для всех;
  • Статья только для подписчиков;
  • Статья только для платных подписчиков.

Следующий пункт - "Email settings" нужен для настройки почтового сервера, пока пропустим его. Настраивать почтовый сервер ты будешь чуть позже, ниже в этой статье.

Следующий блок настроек - "Migration options". Нужен для импорта, экспорта или удаления всего контента. Когда у тебя уже будет довольно много статей, то рекомендую делать экспорт контента, при изменении чего-либо на сайте.

Следующий пункт - это бета функции Ghost. Смена темной/светлой темы в админ панели сайта, настройка редиректов (подробнее читай здесь) и настройка расположения по URL. Тебе это сейчас совсем не нужно, поэтому пропустим.

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

С основными настройками разобрались. Теперь давай рассмотрим пункты при работе с публикациями.

Posts - место, где пишутся статьи и делятся на Drafts - черновики, Scheduled - отложенная публикация и Published - опубликованные.

Pages - страницы сайта. Это, например, страница "обо мне" или страница "подкасты", в общем, то, что можно вынести в главный пункт меню.

Tags - теги или метки статьи. Рекомендую ставить 1-2 штуки на статью. Рекомендую  заполнять сразу (и не менять в дальнейшем), особенно Slug - это URL адрес метки.

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

Следующий пункт - "Members". Показывает твоих подписчиков.

В самом начале, у тебя будет вот такой вид:

Но после настройки почтового сервера и первоначального теста - будет что-то вроде этого:

Следующий пункт - "Staff". Тут отображаются авторы статей и сотрудники.

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

Работа с кодом сайта

Если ты настроил всё то, что было сверху, то должно получиться что-то типа этого:

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

Для начала, давай посмотрим, что это за элемент такой (для этого жми правой кнопкой мыши - Исследовать элемент. Либо жми клавишу F12 - откроется консоль разработчика, вот там и будем искать нужный элемент):

Видим, что элемент имеет класс (class="button button--primary button--xs") и называется .button--primary, а также имеет цвет #102b7b, а так же узнаём, где расположена таблица стилей - main.css.

Для замены этого файла, нам понадобится FileZilla (о котором речь была в самом начале этой статьи. Ссылка на скачивание - там же).

FileZilla настраивается очень просто.

Жми Файл-Менеджер сайтов. Откроется небольшое окошко настройки подключения.

В протоколе выбирай SFTP-SSH. Тип входа - запросить пароль. Пользователь - root.

Жми "Соединиться". Если всё сделано правильно, справа появятся корневая директория сервера.

Файл который тебе надо будет изменить, расположен вот по этому пути:

/var/www/ghost/content/themes/*название твоей темы*/assets/styles/main.css

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

Не спеши паниковать, всё проще, чем ты думаешь.

Воспользуемся поиском, чтобы найти нужный элемент в этом хаосе. Для этого жми Ctrl+F и в появившимся окне набирай нужный элемент - это может быть название .button--primary или его цвет #102b7b.

Меняем его на нужный тебе и если необходимо, изменяем другие элементы. Сохраняем. Загружаем файл на сервер и через командный терминал SHH перезапускаем сервер с Ghost.

Да, можно пойти простым путём и изменять все нужные элементы в разделе Code injection в самой CMS, но в таком случае будут лишние строчки кода и местами двойная отрисовка - оно тебе надо?!

Как перезагрузить сервер Ghost

Если не перезагрузить сервер, изменения не будут видны. Чтобы это сделать, нам понадобится терминал PuTTY

👉 Полная инструкция по созданию сайта на CMS Ghost. Часть 1
Это статья из трех частей - полная инструкция, которая поможет тебе сделать блог на CMS Ghost.
Если что-то пропустил, то вот ссылка на первую часть статьи

При заходе в терминал, первоначально отображается корневая директория сервера, но тебе нужно попасть в корневую директорию Ghost.

Чтобы это сделать введи:

cd /var/www/ghost

затем:

ghost restart

Если ты всё сделал правильно, на экране отобразится вот это и через секунд 5 сервер перезагрузится.

Теперь заходи на сайт и смотри, что получилось после всех твоих манипуляций:

Ну лучше же, правда? 🙂

Настраиваем блок комментариев

В моей теме изначально встроена система комментариев Disqus и я хочу это исправить!

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

Мы ведь с тобой знаем, что это такое, правда?! 😁 (Ответ - !оволабеаН).

Я уже нашёл замену Disqus - это Graphcomment (перейти на их сайт).

Пример того, как выглядят комментарии на Графкоммент - мне нравится!

У Графкоммент много достоинств:

  • присутствует элемент геймификации - пользователи получают бейджики и звания;
  • поддержка адаптивной верстки;
  • позволяет логинится с профилей соцсетей;
  • он бесплатен и без рекламы (для 1млн. обращений в месяц - этого точно хватит);
  • есть система антиспама;
  • а так же куча других преимуществ.

Для его установки, можно просто воспользоваться тем кодом, который даётся на их сайте, для встраивания на твоём сайте, но в моём случае, у темы Simply была подготовлена площадка для Disqus - вот её то, я и буду сейчас менять.

Сейчас это выглядит следующим образом:

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

Заходим в консоль разработчика и видим элемент под названием post-comments.

Воспользуемся FileZilla и найдём этот файл.

Post-comments расположен (в моём случае) в файле article-comments.hbs (*название темы*\partials\article).

Меняем всё это на тот код, который дал нам Графкомментс:

Мне ещё не понравилось, что комментарии расположены не так близко к концу статьи, а чуть ли не в самом подвале. Поэтому, я поменял местами блоки "article-related" и "article-comments" в файле post.hbs, который расположен в корневой папке темы Ghost.

Конкретно эти обозначения ("article-related" и "article-comments") принадлежат к файлам темы и их у тебя может не быть.

Давай посмотрим, что получилось:

Ну круто же?! Если тебе нравится другой сервис комментариев, можешь встроить его, проблем возникнуть не должно.

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

Создание и верстка страницы

А теперь займёмся версткой странички о себе любимом.

Для начала создай новую страничку (в админ панели Ghost на вкладке "Pages") и пропиши все блоки, которые хочешь видеть там - это будет выглядеть примерно вот так:

Внутри же, будут div блоки, к которым ты и будешь применять стили. Сами div блоки выглядят таким вот образом:

Но, если перейдешь на созданную страничку, то увидишь что-то типа этого:

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

<div class="любое название на латинице"></div>
/* в див блоки ты будешь заносить то, 
на что хочешь применить определенные стили. */

В html нужно всегда обозначать закрывающий элемент - </название>

В CSS (помнишь тот файлик main.css?) такие блоки будут вызываться следующим образом, например:

.button {
text-align: center;
}
text-align - выравнивает текст внутри блока по центру
<h1> Заголовок. Бывает от h1 до h6 </h1>
<p> Текст начинающийся с новой строки. Параграф </p>
<ul class="любое название на латинице">
    <li>
        • Это элементы списка
    </li>
</ul>
<a href="ссылка">Текст ссылки</a>
</br> - новая строка
Базовые элементы html

Этого для тебя пока будет более чем достаточно. Более подробно о том какие CSS стили можно применить к блокам читай тут.

Я написал стили к блокам на странице "Обо мне" и выложил их в Code Injection (переносить в main.css буду только тогда когда все стили будут готовы). Пример того как это выглядит, на фото:

 @media (max-width: 450px) { 
     Это строка применяет настройки только тогда,
     когда размер окна соответсвует задонному - 450px
     Делай адаптивную верстку именно так
}

Я надеюсь, что на верстке страницы ты не "застрянешь" надолго, поэтому переходим дальше к настройке сайта.

Настройка кнопок "Поделиться"

Изначально кнопки поделиться статьей всего три (да к тому же к ним не применилась локализация) - твитер, фейсбук, линкедин (он в РФ заблокирован, поэтому точно можно выбросить).

Через консоль разработчика (F12) находим главный блок в котором расположен этот элемент:

Это "post-header". В моём случаем он находится в файле article-header в папке *тема сайта*\partials\article.

Заодно сразу замечаем тот текст который нам нужно перевести: {{t "Share"}} и переименовываем его в {{t "Поделиться"}}. В коде кнопок, arial-label="{{t "Share on"}} Twitter", также можно переименовать arial-label="{{t "Поделиться в"}} Твитер."

<a href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
target="_blank"
rel="noopener noreferrer"
aria-label="{{t "Share on"}} Twitter"
class="share-link button button--circle godo-tracking js-share">
<svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
</a>

Вот главный блок который нужно добавить, чтобы появилась новая иконка на "Поделиться". Но откуда взять ссылку? Ниже приведу список ссылок на соцсети, которую нужно вставить в блок <a href="ссылка">.

Параметры в квадратных скобках, нужно заменить на свои из темы.

Вконтакте - http://vk.com/share.php?url=[URL]&title=[TITLE]&description=[DESC]&image=[IMAGE]&noparse=true

Одноклассники - http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[URL]&st.comments=[TITLE]

Майл ру - http://connect.mail.ru/share?url=[URL]&title=[TITLE]&description=[DESC]&imageurl=[IMAGE]

Фейсбук - https://www.facebook.com/sharer/sharer.php?u=[URL]

Твитер - https://twitter.com/share?url=[URL]&text=[TITLE]

Гугл+ - https://plus.google.com/share?url=[URL]

Ватсапп - whatsapp://send?text=[URL]    

Где брать иконки

Следующая проблема, которая возникает - откуда взять иконки для соцсетей и как их встроить в svg class.

Flaticon, the largest database of free vector icons
Download all icons in SVG, PSD, PNG, EPS format or as webfonts
Скачивай нужную иконку отсюда

Вот ссылка на сайт, где ты можешь скачать интересующую тебя иконку. После того, как её скачаешь открывай её в любом браузере и жми исследовать элемент (или F12).

Тебе нужно будет скопировать весь код начиная с <svg ... и заканчивая </svg> в Code injection сайта и встроить его в тот код, который ниже (то, что написано на русском, заменяй кодом из своей иконки).

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
         <!-- vk -->
        <symbol id="icon-vk" viewBox="взять цифры из твоей иконки">
        <title>VK</title>
        <path d="код в твоей иконке">></path>>
        </symbol>        
    </defs>
</svg>

Если ты всё сделал правильно, у тебя получится примерно вот такой код в файле article-header:

А в итоге сам блок на сайте будет выглядеть следующим образом:

Можешь проделывать подобное с любыми иконками на сайте.

Настройка почтового сервера

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

В стандартных настройках, Ghost работает на встроенном  Nodemailer (нужен для организации закрытого клуба - контент только для подписчиков, а также, чтобы собирать этих подписчиков по email и для рассылки почтовых сообщений), но по заверениям самих разработчиков, для более стабильной работы лучше использовать сторонний сервис - MailGun (сами разработчики советуют именно его).

Для начала потребуется зарегистрироваться в MailGun. У нас будет начальный тариф, позволяющий принимать/отсылать 5 тыс. сообщений бесплатно в течение 3 месяцев, потом тариф будет платный по 0,8$ за 1 тыс. писем - дешевле чашечки кофе. Мне подходит 😁.

Этот сервис стоит выбирать ещё и потому, что он позволит делать массовую рассылку писем. Только представь - вышла новая статья и сразу всем твоим подписчикам на рассылку приходит уведомление.

Постинг в соц.сети настраивать будем в 3 части этой инструкции, ну а пока вернемся к MailGun...

После регистрации, MailGun предлагает нам воспользоваться стандартным доменом sandbox, но нам нужен свой. Поэтому регистрируем новый домен в MailGun (Sending - Domains - (кнопка справа) Add New Domain).

В процессе регистрации, MailGun покажет настройки, которые нужно записать в DNS своего домена. Настройки будут примерно такие, как ниже на фото.

Вот что у меня получилось в DNS,  на моём beget регистраторе домена.

После всех настроек DNS, нужно будет подождать от 1 минуты до 24 часов, пока пройдет верификация почтовым сервисом с вашим доменом. Если все сделано правильно, но верификация не появилась сразу - попробуй подождать сутки.

Уведомление о том, что верификация домена успешно пройдена в письме на почте.

Когда домен привязан - осталось сделать настройку самого Ghost.

Для этого создай пользователя в MailGun. Переходи на вкладку "Sending" - "Domain Settings" - "SMTP credentials" и жми на кнопку "New SMTP User". Тут нужно будет задать логин пользователя и скопировать пароль.

Когда пользователь в MailGun создан, открывай FileZilla и переходи в корневую папку Ghost - тебе нужен файл "config.production.json". Он расположен в корневой папке ghost "/var/www/ghost".

Добавь код в файл тот, что ниже, но измени места * такие * на свои.

Пояснение:

  • От кого письмо - например, Budaev Digital;
  • <тут почта> - например, noreply@budaev.digital;
  • User - логин, который задавал в SMTP credentials;
  • Pass - пароль, который появлялся сверху слева и который надо было скопировать.
},
  "mail": {
    "transport": "SMTP",
    "from": "'*От кого письмо*' <*тут почта, которая будет отображаться в письме>",
    "options": {
      "service": "Mailgun",
      "host": "smtp.eu.mailgun.org",
      "port": 465,
      "secureConnection": true,
      "auth": {
            "user": "*пользователь*",
            "pass": "*пароль*"
        }
    }
}
Вот это нужно записать в файл config.production.json. Слова со *-*(звёздочками) заменить на свои из MailGun

Когда работа с файлом проделана, сохраняй все и загружай на сервер. Следом, открывай PuTTY и перезагружай Ghost для обновления настроек.

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

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

P.S.

😊 Если ты дошёл до конца статьи и у тебя всё получилось - ты очень крут!

В 3 части инструкции обсудим:

  • как работать с публикацией постов;
  • как превратить Ghost в медиа с несколькими авторами;
  • как привязать инструменты аналитики;
  • как оптимизировать весь контент и улучшить скорость работы сайта;
  • если есть что-то о чем бы ты хотел услышать в 3 части инструкции, пиши об этом в комментах.

Если эта инструкция тебе помогла, обязательно пиши об этом в комментариях - буду благодарен!

3 часть будет не скоро, возьму перерыв на сбор информации, да и другие проекты требует времени на их реализацию.