Знаете ли вы, что пеликаны могут есть чертовых черепах?

Неудивительно, что они ходят как задиры ОГ.

Ага, пеликан, птичка действительно классная.

Но так же и Пеликан, генератор статических сайтов. Специально для создания блога бережливых разработчиков.

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

Я также сделаю это лучше, добавив на сайт статические комментарии и функцию поиска.

Примечание. Это не первое мое родео со статическими сайтами. Я показал нашим читателям, как добавить электронную коммерцию в Jekyll, Hugo, Gatsby и многие другие SSG. Но сегодня ни электронной коммерции, ни Snipcart. Я просто расскажу о простом, простом руководстве для блога разработчиков! :)

Этот пост будет охватывать:

  • Как создать блог Пеликана и изменить его тему
  • Как добавить плагин Tipue Search
  • Как включить статические комментарии в Staticman
  • Как разместить сайт Pelican на страницах GitHub

Готовы к взлету?

Пеликан, статический генератор на Python

Проще говоря, Pelican - это отличный генератор статических сайтов, написанный на Python.

Как и все SSG, он обеспечивает сверхбыстрое создание веб-сайтов. Никакой тяжелой документации, простой установки и мощных функций (плагины и расширяемость). Кроме того, вы получаете все преимущества статического сайта: дешевый, портативный, безопасный, легкий, простой в размещении. Как платформа для ведения блогов, Pelican также позволяет вам владеть всем вашим контентом, даже комментариями (благодаря Staticman). Нет необходимости полагаться на доверенные третьи стороны, такие как Medium.

С помощью хорошо продуманного интерфейса командной строки Pelican вы можете создавать свой сайт, переключать темы и отправлять контент, не покидая консоли. Идеально подходит для блога разработчиков!

Существует также огромная коллекция тем с открытым исходным кодом на выбор.

Примечание: если вы поклонник Python, ознакомьтесь с нашей электронной коммерцией Django с Wagtail!

Pelican Tutorial: блог разработчиков с комментариями и поиском

Хорошо, амиго, давайте перейдем к сути дела.

Обязательное условие

1. Создание статического блога

Первое, что нужно сделать, - это просто создать веб-сайт с помощью интерфейса командной строки. Это даст нам файловую структуру, необходимую для немедленной настройки нашей установки.

  • создайте новую папку для вашего проекта
  • откройте в нем консоль
  • установите пакет Python Pelican с pip install pelican

Как только это будет сделано, сразу используйте интерфейс командной строки, чтобы создать строительные леса с помощью pelican-quickstart

Вот как должна выглядеть ваша конфигурация:

Для демонстрации я хотел немного поиграть с некоторыми темами, поэтому я решил клонировать репозиторий allpelican-themes. Вы можете сделать это с помощью git clone [email protected]:getpelican/pelican-themes.git в папке по вашему выбору.

2. Создание контента блога в Markdown

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

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

Запустите ваш любимый текстовый редактор и откройте папку с содержимым. Создайте файл nameare-you-just-inside-your-skin-or-is-your-smartphone-part-of-you.md. Как видите, расширение файла - .md, поэтому мы будем использовать формат Markdown для определения нашего содержимого. Файл Markdown объявляется с метаданными (в начале файла), за которыми следует фактическое содержимое. Файлы Пеликана поддерживают множество полей метаданных. Об этом стоит прочитать их документацию здесь.

Теперь вернемся к только что созданному файлу. Откройте и заполните его актуальным контентом (наш источник Aeon):

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

3. Изменение темы «Пеликан»

Перейдите в папку, которую мы клонировали ранее, и скопируйте выбранную тему в корневую папку вашего проекта. Затем в той же папке запустите pelican-themes -i {your_theme_name}.

Вы готовы дать своему сайту первый шанс. Чтобы сгенерировать его, снова в той же папке запустите pelican -t {your_theme_name}. Это сгенерирует ваш веб-сайт с указанной темой и поместит его в выходную папку.

Просто обслуживайте сайт тем, что вам подходит. Я выбрал Node's http-server. Вот мой результат с использованием моноширинной темы:

Примечание: если вы хотите настраивать и создавать темы Pelican, ознакомьтесь с его языком шаблонов Python Jinja2

4. Добавление поискового плагина Tipue.

Теперь я знаю, что есть множество способов выполнить поиск на статическом сайте. Третьи лица - Algolia и другие. Серверный поиск. Клиентские поиски. По правде говоря, большинство из них - излишек для моей скромной демонстрации. 😏

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

Установите требуемый пакет Python с pip install beautifulsoup4. Затем клонируйте папку проекта и зарегистрируйте ее в своем pelicanconf.py файле. Вы сможете сделать это, просто добавив следующую строку: PLUGINS = ['tipue_search.tipue_search']. Если вы повторно сгенерируете свой веб-сайт, вы увидите новый файл с именем tipuesearch_content.json. Это статический контент, который будет использовать поиск. Теперь вам нужно только изменить шаблоны вашей темы, чтобы добавить поиск.

Перейти в monospace/base.html - шаблон, используемый для каждой страницы. Там добавьте jQuery и tipue-search со следующим HTML.

Теперь добавьте этот код в раздел <div id ="sidebar">:

И следующий код JavaScript, снова в том же base.html файле:

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

5. Добавление статических комментариев с помощью Staticman

Большинство людей по умолчанию использует Disqus для обработки комментариев на своих сайтах. Также существует плагин статических комментариев Disqus для Pelican. Теперь у меня нет личных претензий к Disqus. Но мне было бы трудно игнорировать проблему номер один, связанную с доверием этой третьей стороне, даже в ее статической форме.

→ Комментарии размещаются на серверах Disqus - контент не принадлежит.

Статикмен решает все вышеперечисленное. Это и, конечно же, простая проблема, от которой страдают большинство статических сайтов: добавление форм для пользовательского контента без серверной части. Staticman идеально подходит для комментариев читателей, а также для систем голосования или отзывов пользователей. Чтобы узнать больше о его сверхспособностях, прочтите этот полный пост моего коллеги Жана-Себа, также известного как Мамблдор.

Заявление об ограничении ответственности: Snipcart спонсирует проект с открытым исходным кодом Staticman.

Итак, для наглядности вот список альтернативных статических комментариев, которые вы могли бы рассмотреть.

Теперь о технической части.

Я пропущу стандартную конфигурацию Staticman, поскольку она действительно проста и хорошо объяснена здесь.

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

Теперь перейдите в monospace/templates/article.html и добавьте следующее сразу после строки {{ article.content }}:

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

Чтобы сначала отобразить их, давайте преобразуем эти комментарии в JSON в наших шаблонах, поскольку на данный момент они находятся в YML. Сначала загрузите пакет pyyml python с pip install pyyaml.

Как только это будет сделано, перейдите к pelicanconf.py. Здесь вы будете включать свои комментарии.

Добавьте следующие строки, где хотите:

Это загрузит каждый файл комментариев .yml, проанализирует его в JSON и представит их как массив. Любая переменная с заглавными буквами в этом файле будет отображаться внутри шаблонов Jinja2, что означает, что у вас будет доступ к комментариям в любом шаблоне.

Что вы хотите сделать сейчас, так это отобразить комментарии к совпадающим статьям. В article.html добавьте этот раздел между строкой {{ article.content }} и только что добавленной формой:

Вот краткий обзор наших статических комментариев.

А теперь давайте разместим этот статический блог!

6. Размещение вашего блога Pelican на Netlify

Я бы хотел разместить все на страницах GitHub, так как это хорошо сочетается с Pelican. Но поскольку мне нужно было перестроить проект после того, как был добавлен комментарий, чтобы поддерживать веб-сайт в актуальном состоянии, я решил использовать Netlify. Как только новый комментарий будет отправлен, Netlify получит уведомление, перестроит веб-сайт и разместит его с новым комментарием. Для этого добавьте requirements.txt в папку вашего проекта и добавьте в него следующие строки:

pelican 
pyyaml 
markdown 
beautifulsoup4

Это файл, который будет использоваться Netlify для загрузки зависимостей проекта. Теперь поместите свой код в репо и нажмите netlify.com. После входа в систему нажмите new site from GIT и выберите репозиторий проекта со следующими настройками:

Развертывание начнется сразу, и ваш сайт должен заработать через минуту! Обратите внимание, что сайт необходимо перестроить, чтобы появились новые комментарии.

Живая демонстрация и репозиторий на GitHub

См. живую демонстрацию здесь.

См. репозиторий GitHub здесь.

Заключительные мысли

Эта демонстрация заняла у меня 1-2 часа благодаря документации Pelican и простоте Staticman.

Мне очень понравилось играть с Пеликаном! Я какое-то время не работал со статическим генератором и скучал по ним. Документы были отличными и краткими. Проблема была в основном с Python. Я действительно не писал много об этом, но я никогда раньше не работал с Python, так что было интересно попробовать.

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

Удачного кодирования!

Если вам понравился этот пост, поделитесь им в Твиттере. Есть комментарии, вопросы? Добавьте их ниже!

Изначально я опубликовал это в блоге Snipcart и поделился им в нашем информационном бюллетене.