В первой части ты уже настроил сервер и установил Ghost на него, а в этой части гайда, ты разберешься с настройками темы сайта под себя.
Budaev Digital
Скачивание и смена темы
Для работы с шаблонами сайта тебе понадобится 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
Budaev DigitalПри заходе в терминал, первоначально отображается корневая директория сервера, но тебе нужно попасть в корневую директорию 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;
}<h1> Заголовок. Бывает от h1 до h6 </h1>
<p> Текст начинающийся с новой строки. Параграф </p>
<ul class="любое название на латинице">
<li>
• Это элементы списка
</li>
</ul>
<a href="ссылка">Текст ссылки</a>
</br> - новая строкаЭтого для тебя пока будет более чем достаточно. Более подробно о том какие 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}}&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.
Вот ссылка на сайт, где ты можешь скачать интересующую тебя иконку. После того, как её скачаешь открывай её в любом браузере и жми исследовать элемент (или 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": "*пароль*"
}
}
}Когда работа с файлом проделана, сохраняй все и загружай на сервер. Следом, открывай PuTTY и перезагружай Ghost для обновления настроек.
Всё! Почтовый сервер должен работать! Пробуем ввести свою почту в подписках на сайте и...
...получаем заветное подтверждение подписки. Правда нужно будет делать локализацию письма, чтобы оно было на русском (это будет в 3-ей части), но если не критично, можешь оставить так.
P.S.
😊 Если ты дошёл до конца статьи и у тебя всё получилось - ты очень крут!
В 3 части инструкции обсудим:
- как работать с публикацией постов;
- как превратить Ghost в медиа с несколькими авторами;
- как привязать инструменты аналитики;
- как оптимизировать весь контент и улучшить скорость работы сайта;
- если есть что-то о чем бы ты хотел услышать в 3 части инструкции, пиши об этом в комментах.
Если эта инструкция тебе помогла, обязательно пиши об этом в комментариях - буду благодарен!
3 часть будет не скоро, возьму перерыв на сбор информации, да и другие проекты требует времени на их реализацию.