Spiiin's blog

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

Во-первых, hexo запускается легче, и темы работают сходу. И, что удобно для блога программисту, подсветка синтаксиса кода интегрирована в движок лучше, из чего следует, что темы скорее всего будут совместимы с ней (у jekyll подобрать работающую пару “тема+плагин подсветки синтаксиса” оказалось очень непросто, то съезжала нумерация длинных строк, то весь блок с кодом выглядел коряво, то были проблемы с корректным отображения цвета строк или фона)

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

Темы#

Далее, выбор тем. Достаточно много качественных и приятных глазу, из тёмных и минималистичных интересными показались:

• clean-dark
  • Пример
  • Оригинальная тема для jekyll, которая была взята в качестве основы для этой темы
• black-blue
  • Пример
• solar
  • Пример.
  • Тема на основе cactus
• pandollo
  • Пример

Настройка темы#

Минимальная настройка темы включает правку файла config.yml, какие именно настройки поддерживаются, обычно написано на сайте темы.

Дополнительно, на примере темы pandolo - можно донастроить стиль, разобравшись с правкой файлов в папке themes/pandollo/source/scss.

Дальше нужно выполнить команду:

sass --style=compressed ./main.scss ../css/main.css

Для того, чтобы сгенерировать упакованную версию файла стилей, которую будет использовать блог.

После небольших правок получилась примерно такая “лисья” тема:

Настройка плагинов#

Для выбранной темы пригодятся следующие плагины:

"dependencies": {
  ...
  "hexo-asset-link": "^2.0.1",
  "hexo-generator-fragments": "^1.0.0",
  "hexo-renderer-kramed": "^0.1.4",
  "hexo-renderer-jade": "^0.5.0",
  "hexo-abbrlink": "^2.2.1",
  ...
}

hexo-asset-link - позволяет использовать в постах ссылку на ассет в виде относительного пути: POST_NAME/asset_name.png (также нужно включить в config.yml опцию: post_asset_folder: true, чтобы hexo создавал отдельную папку для ассетов к каждому посту).

hexo-generator-fragments - необходим для темы - генерирует preview для постов для главной страницы, позволяет использоватьв в постах тег <!-- more --> чтобы отмечать краткую короткую preview-версию поста.

hexo-renderer-kramed - плагины, содержащие в названии renderer, позволяют hexo генерировать посты из разных форматов файла. Данный плагин используется для рендера из файлов *.md в формате github flavored markdown, который используется на серверах github.
В комплекте с hexo уже идёт плагин, который рендерит markdown-файлы, поэтому чтобы использовать альтернативный, предварительно нужно его удалить:

$ npm uninstall hexo-renderer-marked --save

hexo-renderer-jade - необходимый для темы плагин, позволяющий рендерить pug-файлы (собственно, сама тема описана в этом формате).

hexo-abbrlink - генерирует для каждого поста идентификатор. Для генерации имён постов необходимо в config.yml добавить строку:

permalink: posts/:abbrlink/

{% post_link filename [title] [escape] %}

Написание постов#

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

hexo new post hello-hexo.md

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

hexo serve

Сгенерировать статический сайт можно так:

hexo clean
hexo generate

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

Итог#

В кажущейся простой задаче “отрендерить markdown-статью в html”, cкрыт выбор целого стека способов решения (генераторы сайтов со своими языками, рендеры разных форматов и диалектов разметки, языки описания стилей и шаблонов сайта, темы, плагины, подсветка кода, системы развёртывания сайта).

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