Меню
Рубрика Про Ghost

Блог на Ghost

Pavel Belyaev /

Данная статья будет длиннопостом, решил не плодить кучу статей о Ghost, а в одну скидать всё, что потребуется...

Как запустить?

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

Но сегодня речь пойдет о том, как настроить на своем сервере, ну или не совсем на своем или не совсем на сервере, у кого-то есть корпоративный сервер, работающий 24/7, а кому то можно просто старый ноутбук или неттоп повесить рядом с роутером в коридоре и всё настроить. Еще в будущем рассмотрим такой вариант, как выгрузка всего блога в формате html для размещения на github (бесплатно) или на слабом компьютере типа Raspberry Pi или умный роутер с флешкой может сгодиться, в случае со статическим блогом не надо nodejs,php,mysql, ничего не надо, только любой веб-сервер и ftp/sftp чтобы грузить блог со своего компа. Ну сегодня не об этом, опять я отвлекся.

В общем, нам нужен docker и nginx, сам nginx у меня стоит без контейнера, он проксирует все контейнеры, разные сайты на разных технологиях устроены, иногда нужны разные версии ПО для разных проектов, уже имел опыт поломки зависимостей пакетов, когда вся система рухнула, поэтому сейчас контейнеризирую. О том, как установить docker можно почитать на официальном сайте.

Установка самого блога в контейнер

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

mkdir /var/www/mysite

После этого создадим конфиг

nano /var/www/mysite/config.json

И впишем конфиг, тут всё уже предрешено, вам только url поменять надо на свой, все остальные пути это внутренние пути в контейнере

{
  "url": "http://tipa-mysite.ru",
  "server": {
    "port": 2368,
    "host": "0.0.0.0"
  },
  "database": {
    "client": "sqlite3",
    "connection": {
      "filename": "/var/lib/ghost/content/data/ghost.db"
    }
  },
  "mail": {
    "transport": "Direct"
  },
  "logging": {
    "transports": [
      "file",
      "stdout"
    ]
  },
  "process": "systemd",
  "paths": {
    "contentPath": "/var/lib/ghost/content"
  }
}

Дальше просто создадим контейнер, который будет доступен на порту 3001

docker run -d \
--restart=always \
--name tipa-mysite.ru \
-p 3001:2368 \
-v /var/www/mysite/content:/var/lib/ghost/content \
-v /var/www/mysite/config.json:/var/lib/ghost/config.production.json \
ghost

Если будет проксироваться с nginx из этого же компа, то ограничим на локалхост, чтобы извне только было по 80/443 на nginx доступно, а сам контейнер недоступен будет

docker run -d \
--restart=always \
--name tipa-mysite.ru \
-p 127.0.0.1:3001:2368 \
-v /var/www/tech-research.ru/content:/var/lib/ghost/content \
-v /var/www/mysite/config.json:/var/lib/ghost/config.production.json \
ghost

Теперь открываем URL tipa-mysite.ru/ghost там регистрируем нашего первого пользователя, пишем site title это не для пользователя, а для сайта, оно будет вот внизу писаться

При регистрации еще можно создать других редакторов этого блога.

Правильная настройка https (с костылями)

Добавить https достаточно просто, если у вас установлен nginx и certbot от letsencrypt, но вот сам движок нужно донастроить, иначе у вас все sitemap будут по-старому на http, а это плохо для СЕО.

Достаточно в конфиге config.json изменить url на https, но дальше происходит нечто невероятное - блог начинает сам по себе редиректить на https с https, ведь наш nginx по 3001 порту обращается и без шифрования, а контейнер думает что надо бы перенаправить на https и сайт вылетает с бесконечным цикличным редиректом, чтобы это исправить - надо в nginx прописать заголовок X-Forwarded-Proto равным https, чтобы движок думал что итак всё норм и мы на протоколе https.

 вот так:

 location /
        {
        access_log off;
        proxy_pass http://127.0.0.1:3001;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https; # эта строка фиксит редирект
        proxy_set_header Nginx-Https "on";
        proxy_connect_timeout 2s;
        }

Решение костыльное, но пойдет, позже разберемся и в этой теме

Подсветка кода

Для того, чтобы списать код, нужно три косых кавычки вбить (```) и пробел или enter

Но чтобы подсвечивался код, вам нужно или изначально выбрать тему типа как у меня, где всё это есть, либо использовать casper, тогда нужно зайти в админку, там Code injection

В шапку кидаем

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>

А в футер

<script>hljs.initHighlightingOnLoad();</script>

Вроде получилось...

Вместо monokai-sublime.min.css можно вписать другой стиль, подробнее можете посмотреть тут демку https://highlightjs.org/, главное писать ссылки на файлы min.css, меняя monokai-sublime на понравившийся стиль

Стиль solarized-light
Стиль railscasts

Добавление комментариев в блог Ghost

Сегодня поговорим о том, как вставить комментарии на блог Ghost, будем использовать сервис комментариев Disqus. Вообще, статья может пригодиться для таких сайтов, как wix, blogger, wordpress, joomla и других, пусть эта статья будет о том, как добавить комментарии Discus на популярные движки сайтов, но на примере блога на Ghost.

  1. Заходим на сайт https://disqus.com/
  2. Если не авторизованы, то авторизуемся, скорей всего у вас уже есть учетная запись, через которую вы комментировали другие сайты.

заходим через твиттер, фейсбук или гугл

3. Дальше в самом низу жмем Install disqus

4. Тут выбираем I want to install Disqus on my site (я хочу установить Discus на мой сайт).

5. Заполняем форму, вписываем название сайта, выбираем категорию, язык, жмем кнопочку Create site

6. На следующем этапе у нас выбор тарифа, ну выбираем пока Basic, т.к. он бесплатный, а мы еще даже 9 долларов в месяц не зарабатываем на своем новом блоге. Тут еще есть Free, но в нем написано что для сайтов где нет рекламы и вообще полностью некоммерческие. Позже еще подумаем, может быть хватит средств на оплату Plus...

7. На следующем этапе выбираем движок, у нас это Ghost

8. Теперь у нас есть инструкция и код для вставки, тут написано что в папке шаблона надо найти файл post.hbs (yourghostdir/content/themes/casper/) и в нем вписать перед закрывающимся {{/post}} код (где-то внутри), я вставил код перед </article>

Нужно перезагрузить блог или же просто выбрать другую тему, а потом снова основную.

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

Облако тегов в Ghost блоге

Итак, открываем файл шаблона default.hbs, в нем перед открывающимся тегом <footer> вставим для начала такой код

{{#get "tags" limit="all"}}
  {{#foreach tags}}
    <a href="{{url}}">{{name}}</a>
  {{/foreach}}
{{/get}}

В результате получим вот такой выхлоп перед футером

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

  1. Обернем это всё в div class="tag_list"
  2. Добавим заголовок, чтобы было понятно что это такое, но т.к. это у нас не столь заголовок статьи/содержимого, сколько просто поясняющий элемент, мы не будм его оборачивать тегами <h1> - <h6>, а закинем в тег <span class="header_bl"> и стилизуем
  3. Сами теги закинем в список <ul>/<li> и тоже стилизуем, поехали...

Сам код у нас будет выглядеть вот так

<div class="tag_list">
   <div class="inner">
       <span class="header_bl">Список тегов</span>
		<ul>

{{#get "tags" limit="all"}}

  {{#foreach tags}}
    <li><a href="{{url}}">{{name}}</a></li>
  {{/foreach}}
{{/get}}

		</ul>

	</div>
</div>

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

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

Допишем в default.hbs в раздел head, сразу после screen.css свой custom.css 

    {{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/custom.css"}}" />

Дальше создадим /assets/css/custom.css и впишем в него следущие строчки для стилизации

.tag_list {
border-top: 1px solid #d9d9d9;
padding: 10px;
background:#fff;
}

.header_bl {
font-size:15px;
font-weight:bold;
text-transform:uppercase; 
}


.tag_list ul {
padding:5px 0; 
}

.tag_list ul li {
display:inline-block;
margin: 4px;
padding:0;
}

.tag_list ul li a {
display: inline-block;
background: #fbfbfb;
box-shadow: 0 0 3px #d0d0d0;
border: 1px solid #d0d0d0;
padding: 3px 5px;
font-size: 13px;
border-radius:4px;
color:#777;
}

.tag_list ul li a:hover
{
text-decoration:none;
box-shadow: none;
color:#666;
}

В результате вот такое получается

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

Дополнительные теги в статье в блоге Ghost, тема Casper

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

Вот так показывает
а хочется вот так

В документации на Ghost есть описание этих моментов.

В общем так, заходим в папку нашего шаблона, открываем файл post.hbs

и перед строчкой

<h1 class="post-full-title">{{title}}</h1>

прописываем

{{tags from="2" separator=" | " prefix="Дополнительные теги: "}}

from="2" - означает что нужно вывести тег, начиная со второго,

separator=" | " - означает что между тегами нужно поставить такой символ и плюс от него пробелы слева и справа,

а prefix - дает указание в начале всего этого перечисления указать такой текст.

В итоге, у нас получится вот такой код

...

<header class="post-full-header">
                <section class="post-full-meta">
                    <time class="post-full-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMMM Y$

                    {{#primary_tag}}
                        <span class="date-divider">/</span> <a href="{{url}}">{{name}}</a>
                    {{/primary_tag}}

                </section>

                {{tags from="2" separator=" | " prefix="Дополнительные теги: "}}





                <h1 class="post-full-title">{{title}}</h1>
            </header>
    
...

Турбо-страницы Яндекс на блоге Ghost

Либо турбо страницы, либо свой кастомный RSS

В общем, алгоритм такой

  1. Открываем файл settings/routes.yaml
  2. Приводим его примерно к такому виду (после routes: добавить три своих строчки)
routes:
  /turbo-rss/:
    template: turbo-rss
    content_type: text/xml

collections:
  /:
    permalink: /{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

3. В корне шаблона создаем файл turbo-rss.hbs

<?xml version = "1.0" encoding = "UTF-8"?>
<rss
  xmlns:yandex="http://news.yandex.ru"
  xmlns:media="http://search.yahoo.com/mrss/"
  xmlns:turbo="http://turbo.yandex.ru"
  version="2.0">
<channel>
<title><![CDATA[ {{@blog.title}} ]]></title>
<description><![CDATA[ {{@blog.description}} ]]></description>
<link>{{@blog.url}}</link>
<language>ru</language>
<image>
    <url>{{@blog.url}}/favicon.png</url>
    <title>{{@blog.title}}</title>
    <link>{{@blog.url}}</link>
</image>
<lastBuildDate>{{date format="YYYY-MM-DDTHH:mm:ss ZZ"}}</lastBuildDate>

{{#get "posts" filter="tags:-[en]" limit="all"}}
    {{#foreach posts}}
    <item turbo="true">
        <title><![CDATA[ {{title}} ]]></title>
        <link>{{url absolute="true"}}</link>
        <turbo:topic><![CDATA[ {{title}} ]]></turbo:topic>
        <turbo:source>{{url absolute="true"}}</turbo:source>
        <author><![CDATA[ {{author.name}} ]]></author>
        <pubDate>{{date format="YYYY-MM-DDTHH:mm:ss ZZ"}}</pubDate>
        <media:content url="{{feature_image}}" medium="image"/>
        <turbo:content><![CDATA[ {{content}} ]]></turbo:content>
    </item>
    {{/foreach}}
{{/get}}

</channel>
</rss>

4. Рестарт Ghost, чтобы изменения вступили в силу.

Пример для турбо RSS взят вот у этого хорошего человека на GitHub, но его формат даты имеет привязку к локали, я поменял на более интернациональный формат даты...

Тут пример разметки RSS для турбо от Яндекса

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

(c) картинка взята с сайта Yandex.ru

Продолжение следует...

Показать комментарии