Наиболее популярными движками для блогов являются WordPress и Blogger. Они подойдут почти для каждого в виду интуитивности интерфейсов и наличию настраиваемых элементов. Однако, растёт число людей, использующих простые генераторы статичных сайтов (например, Jekyll).

Здесь не будет рассуждений не тему того, кто всё же прав. Речь пойдёт о сервисе, который представляет собой нечто среднее между описанными выше движками.

Что такое Scriptogram?

На самом деле, scriptogr.am блогодвижком не является. Это скорее сервис, производящий онлайн-рендеринг Markdown файлов, хранящихся в отдельном Dropbox-каталоге. По сравнению с ближайшими конкурентами (calepin.co), Scriptogram имеет широкие возможности для кастомизации, что превращает его в лидера среди проектов данного назначения.

Регистрация

Как таковая регистрация в сервисе не требуется. Нужно всего лишь открыть главную страницу проекта и нажать «Connect». Далее произойдёт аутентификация в дропбоксе. Потом заполняется личные данные — всё, блогом можно пользоваться.

Публикация постов

Посты хранятся в Вашем Dropbox-аккаунте по адресу Apps/scriptogram/posts. Есть два основных способа для добавления материалов в блог.

Способ первый: вручную создавать .md-файлы в дропбоксе, а затем выполнять синхронизацию кнопкой «Synchronize» на странице scriptogr.am/dashboard/.

Способ второй: производить публикацию со страницы scriptogr.am/dashboard/#add — оформляете статью, жмёте «Publish», и в блоге на одну заметку станет больше. В данном варианте .md-файл создастся автоматически, что значительно упрощает жизнь и ускоряет процесс постинга.

Оформление файлов

Мало просто создать файл с именем, заканчивающимся на .md, его ещё нужно правильно оформить. Базовое оформление выглядит следующим образом:

В первой строке должно быть имя будущей публикации, написанное после «Title: «.

Во второй строке должна быть дата публикации, написанная после «Date: «. Формат следующий: «год-месяц-число часы:минуты».

В последующих строках содержится сам текст поста, оформленный в Markdown.

Однако, есть и более продвинутые атрибуты. Все они пишутся в строках между датой и тестом поста. Вот некоторые из них:
«Slug: » задаёт будущий url публикации
«Tags: » задаёт метки статьи
«Type: » задаёт тип публикации

Пример исходного файла (firstpost.md):

Title: Мой первый пост
Date: 2012-12-23 02:47

Привет, мир! Это мой первый пост!

——

* мой _основной_ блог:  [Записки линуксоида Vlsu](http://vlsu.blogspot.com)

* мой _дополнительный_ блог: [Vlsu’s extended blog](http://scriptogr.am/vlsu)

Полученный результат:

Изменяем кнопку «вверх»

Кнопка «вверх» по умолчанию какая-то серая и незаметная. Лучше заменить её на текст.
В HTML-шаблоне ищем  и меняем конструкцию ниже на эту:

↑

В CSS-стилях ищем #return-button и приводим к следующему виду:

#return-button {
position: fixed;
bottom: 30px;
right: 10px;
border: none;
padding: 0px;
display: none;
text-decoration:none;
font-size: 20px;
}

Убираем плавность выделения элементов

Я всегда был противником плавной анимации при подведении курсора на сайтах. Нет, технология смотрится хорошо, но лишь с некоторыми цветами. Дефолтный переход из чёрного в светло-серый режет глаз и отнимает некоторое время. А если будет опубликован список из ссылок, и читатель поводит там мышкой, то мелькание в глазах будет 100%.
На вкус и цвет товарищей нет, но если Вам этот эффект тоже не нравится, то отключить его можно удалением из CSS всех строк, содержащих transition.

Исправляем баг социальных кнопок

Кнопки социальных сетей расположены после текста поста. Их внешний вид не впечатляет — три кнопки «расползлись» на две строки (по крайней мере в шаблоне Citizen). Всему виной принудительное значение ширины блока. Исправить это можно, найдя в CSS описание раздела #wrapper section article div.content #meta #social и удалив оттуда параметр width, либо увеличив его значение.

Добавляем ссылку на свою почту

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

Drop me a line!