Программы, которые я использую для работы с Jekyll

07 January 2012 #mac#jekyll#soft

В начале прошлого года я сменил движок своего блога. Перешел от wordpress на jekyll. Ушел от динамической генерации страниц к их статическом размещению. И до сих пор не понимаю, зачем генерировать страницу каждый раз, когда к ней обращается пользователь, если ее содержимое меняется крайне редко? Достаточно лишь раз провести генерацию страницы и затем показывать при обращении ее результат, чем так бессмысленно нагружать сервер.

Про jekyll я уже писал и немало. А сегодня хочу описать сам процесс написания статьи. Какие именно программы я использую и каким образом я упрощаю свою работу?

Установка jekyll

Wordpress отличается от Jekyll тем, что движок работает только на сервере и при этом предоставляет целый ряд инструментов для написания статьи. Это и редактор и инструмент загрузки изображений на сервер. Вроде проще работать, но на деле это накладывает целый ряд ограничений. К примеру, в редакторе нельзя использовать язык разметки markdown, а изображения можно загружать только непосредственно на сам сервер. Для загрузки изображений на сервера амазона есть целый ряд расширений, но более тонко настроить кеширование изображений уже не получиться.

Но не будем отвлекаться от Jekyll. Про установку Jekyll в Ubuntu 10.04 я уже писал. Рассмотрим этот процесс в среде MacOS.

Так как MacOS поставляется с уже установленным ruby, необходимо только установить сам движок и необходимые гемы для работы.

$ sudo gem install jekyll kramdown

Все необходимые зависимости подтянутся автоматически. Обратите внимание, что я использую в качестве парсера markdown движок kramdown, на мой взгляд он более функциональный и удобней, чем остальные. Но можно использовать любой другой. Единственно, не стоит оставлять Maruku, который по умолчанию используется в Jekyll, так как он очень медлительный и довольно своенравный. Если в kramdown или rdiscount генерация сайта занимает порядка 10-15 секунд, то в Maruku время генерации вырастает до получаса, если не больше.

Jekyll-Bootstrap

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

Для людей, кто раньше не сталкивался с Jekyll, Bootsrap будет очень хорошим подспорьем!

Существует еще разработка Octopress. Но она использует для своей работы более новую версию ruby, в связи с чем порой возникают проблемы при работе с русским языком.

Rakefile

Для упрощения работы следует прописать ряд задач в файл Rakefile. Можно конечно и без этого обойтись, но это значительно упрощает работу. Файл, который использую я, можно найти на сервере gist.github.com.

По умолчанию команда rake без параметров вызывает задачу build, то есть сборку сайта.

Команда rake deploy вызывает операцию сборки сайта с последующей передачей файлов готового сайта на сервер. Естественно, что в данной задаче необходимо будет указать свои параметры сервера.

Самая интересная команда – rake new, для ее использования необходимо в командной строке передать еще и заголовок новой статьи. Заголовок необходимо передавать сразу в транслите. После чего автоматически открывается редактор для редактирования данного файла.

А задачи tags и tag_cloud созданы для генерации страниц тегов, которые создаются на основании параметров, указанных для каждой статьи.

Pow

При работе со своим сайтом раньше я использовал команды jekyll --server --auto, теперь же использую локальный веб-сервер pow. После генерации сайта достаточно обратиться в браузере по адресу http://site.dev, как я сразу же вижу результат своих действий. Единственно нужно помнить, что если используется обычная структура папок Jekyll, то Pow работать не будет. Так как локальный веб-сервер ожидает в рабочей папке наличие директории public, в которой размещается сам сайт.

Для того, чтобы Pow корректно стал работать с Jekyll, следует переместить все содержимое директории Jekyll в папку source, за исключением файлов Rakefile и _config.yml. Создать рядом с source папку public и затем прописать в файле _config.yml следующие строки:

root:        /
source:      source
destination: public
plugins:     plugins

Теперь исходники сайта будет размещаться в source, а результат генерации в public. И локальный веб-сервер Pow будет прекрасно работать с содержимым нашего сайта.

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

Замечу лишь, что настройки jammit располагаются рядом с конфигом Jekyll в файле _assets.yml. И в файле Rakefile, который рассматривали выше, прописана отдельная задача rake minify, которая создана как раз для вызова jammit с параметрами. И эта же команда вызывается каждый раз при генерации сайта.

Byword

Раньше для написания статьей я использовал редактор vim. Однако с течением времени перешел на использование программы Byword. Перешел просто потому, что программа очень простая, но в то же время прекрасно поддерживает разметку markdown, есть и горячие клавиши для вставки ссылок и изображений. В то же время позволяет фокусироваться на написании текста, и при этом еще прекрасно выглядит. А результат работы можно экспортировать в html, pdf, rtf, word и latex. При этом есть возможность не просто экспортировать в файл, а результат в виде готового html занести в буфер обмена. Что эффективно использовать при работе, к примеру, с тем же wordpress.

byword

Я пробовал использовать и другие редакторы, но пока ничего лучше еще не нашел.

Marked

Для просмотра результата при написании статьи, проще не генерировать сайт каждый раз с самого начала, а использовать отдельные программы для просмотра результата обработки markdown. Лучшей программой считается Marked.

marked

Есть возможность работать не только с markdown, но и с любыми другими движками. Достаточно только указать в настройках пусть к этому движку. Так же, при отображении результата используются отдельные шаблоны, которые можно менять или создавать самому. Marked так же позволяет исключить из результата заголовки файлов Jekyll. Что очень удобно!

3Hub

Все статические файлы моего сайта, за исключением html-файлов, у меня хранятся на сервере Amazon s3, а раздаются с помощью сервиса Amazon Cloudfront.

Но перед тем, как загрузить изображения, их необходимо подготовить – создать превью, минимизировать их размер и задать названия.

Так как я пишу в основном про программное обеспечение, то и изображения использую в виде снимков экранов. Сделать снимок просто и обычно для этого используются средства самой системы. В MacOS результат обычно размещается в png-файле.

Сразу после того, как я подготовлю снимки экранов, я их переименовываю и затем создаю копии этих файлов с суффиксом -th. Затем копии файлов открываю в pixelmator и изменяю их размер до 400 пикселей по ширине.

Остается провести минимизацию размеров файлов. Для этого я использую программу PNG Compressor. Быстро и очень эффективно файлы уменьшаются до приемлемых размеров, после чего остается только загрузить их на сервер амазона.

Ранее я использовал для этих целей консольную программу s3cmd. Но с переходом на Mac для меня оказалось проще работать с нативными приложениями. И перепробовав несколько различных клиентов, я остановился на 3Hub.

3hub

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

Описание процесса работы

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

$ rake new name new article

Тут же автоматом открывается Byword, остается только прописать название статьи на русском языке, указать теги и ключевые слова.

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

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

После чего все полученные файлы переношу в PNG Compressor. Так как я обычно работаю с перезаписью файлов, мне остается только чуть-чуть подождать, пока закончиться обработка файлов. И затем загружаю полученные изображения на сервер амазона с помощью 3Hub.

Во время написания статьи я использую снипет для вставки изображений, который храниться у меня в программе CodeBox. Достаточно только прописать mimg, нажать клавишу Tab как необходимый код размещается в тексте. Единственно, остается только поправить имена файлов и пути до них, я еще не автоматизировал этот процесс в CodeBox.

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

Когда же работа над статьей закончена, текст повторно проверен на ошибки, закрываю редакторы и все программы, которые помогали мне в работе. И затем в терминале даю команду:

$ rake build

По окончании генерации сайта открываю в браузере свой локальный сайт juev.dev и смотрю, все ли в порядке со статьей в окружении оформления моего сайта. Если все нормально, то остается только дать команду:

$ rake deploy

После чего статья оказывается опубликованной.

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

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