Данный блог создан с помощью yoeman и assemble.io. Почему я выбрал эти инструменты? Начитавшись блога andismith.com сомнения отпадут.

Теперь поговорим о плюсах и минусах разработки. Делать статические сайты с помощью assemble весьма удобно, особенно если вы хорошо знаете javascript. Статические сайты очевидно самые быстрые и их можно разместить на бесплатном хостинге вроде Github Pages. Причем размещение на бесплатном хостинге для меня особенно важно т.к. я обычно забрасываю проекты в течение 3 месяцев в связи с полученными новыми знаниями и освоенными технологиями (старое зачастую кажется даже недостойным внимания), а когда хочу прочитать давно опубликованный материал, то его уже просто нет.

Изучил довольно много про assemble и суммарно потратил два дня на создание этого сайта. Все же много возможностей assemble не добавлены еще на сайт и я подумываю попробовать еще Jekyll. Особенно мешает практически полное отсутствие информации на некоторые важные вещи и устаревание продукта безумно быстрыми темпами (за год меняется до неузнаваемости и старая информация непригодна для использования). Иногда думаю нехватка нормальной документации - это некоторая "чума" программирования, хотя уже кажется даже привык к такому ходу дел.

Ниже будут мои заметки и рекомендации касательно создания сайта на assemble. Я работаю в windows, но рекомендую использовать для работы linux.

Изучаем yeoman.io
Первое с чем следует ознакомиться - yeoman.io. Проект с прекрасными пошаговыми уроками по установке, буквально мечта новичка. Используйте генератор webapp и не забудьте поставить и настроить все необходимые для yeoman программы.

Подготовка: Устанавливаем NodeJs, Git, Python и обязательно проверяем переменные среды! Запускаем node command prompt.

Sublime: Ставим версию 3 sublimetext.com. Устанавливаем контроль плагинов packagecontrol.io/installation. Устанавливаем и настраиваем плагины (Preferences – Package Control – Install Package): Emmet, Emmet CSS Snippets, HTML-CSS-JS Prettify, ColorPicker, SideBarEnhancements. Код пишется в разы быстрее (docs.emmet.io/cheat-sheet/) и сам редактор очень удобен.

Yeoman: Устанавливаем yeoman.io/learning/index.html . Читаем yeoman.io/codelab.html. Устанавливаем генератор webapp выбирая пробелом пункты что не нужно устанавливать. Читаем Setting up Git (https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup). Устанавливаем load-grunt-tasks и подключаем в Gruntfile как «require('load-grunt-tasks')(grunt);». Устанавливаем Grunt-build-control task по инструкции с github.com/robwierzbowski/grunt-build-control и читаем yeoman.io/learning/deployment.html. Вот мой код Gruntfile (Только часть кода): pastebin.ru/R6R5hz1K. Чтобы не вводить постоянно пароль от git для windows устанавливаем gitcredentialstore.codeplex.com.

Чтобы отправить результат как сайт/репозиторий github следуем инструкции с help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/ не выполняя последний шаг (не делаем git push origin master). Убеждаемся что репозиторий полностью пустой на github. С помощью grunt-build-control выполняем «grunt buildcontrol» (или делаем registerTask и «grunt pages»). Сайт находится на «имя.github.io/репозиторий» (см. pages.github.com/).

Если понадобятся ssh делаем себе новый ключ по инструкции с help.github.com/articles/generating-ssh-keys/. Читаем статьи help.github.com/articles/working-with-ssh-key-passphrases/ и help.github.com/articles/caching-your-github-password-in-git/ .

Результат: Отличная среда для front-end разработки. При редактировании кода real-time виден результат в браузере (по инструкции с Yeoman запускаем сервер). Сайт можно командой grunt построить в папку dist. Файлы html/css/js сами склеятся, например чтобы получить vendor.js из двух файлов используется код в app/index.html:

Изображения сами сожмутся. Из кода на sass/scss получаем real-time в результате css файл. Зависимостями можно управлять из консоли с помощью bower, например, установка jquery:

bower install --save jquery
grunt wiredep

В результате jquery сам подключится. Сайт можно одной командой выложить на git («grunt buildcontrol»). С помощью webapp можно сделать шаблон будущего сайта.

Изучаем assemble
Устанавливаем asseble.io с помощью yeoman генератора github.com/assemble/generator-assemble нажмая при установке везде enter.

Создаем в папке site/src/templates/pages файл test.hbs с текстом "Hello world!". Запускаем "grunt server" и проверяем файл по адресу "localhost:9000/test.html".

Сделаем вывод называния "data.title" постов с определенным тегом и сорировкой по дате "data.postdate" добавив в код hbs файла строки:

В hbs файлах которые должны выводиться не забываем добавить теги и дату:

Теперь сделаем возможность выбора шаблона отдельно для каждой страницы.

В Gruntfile.js меняем строки (внутри assemble в options):

layout: 'default.hbs',
layoutdir: '<%= config.src %>/templates/layouts',

Теперь внутри hbs файла перед title можно указать

layout: "your-template.hbs"

Советую посмотреть github.com/helpers, содержащий много вспомогательных утилит. Нормальный поиск по сайту и pagination мне так найти не удалось. Найденные решения мне не понравились, а свое писать сейчас некогда.

TODO:
* Сделать нормальный pagination
* Прикрутить поиск по сайту (скорее всего будет простой Google поиск)
* Перейти на смесь html и markdown
* Добавить подсветку кода Prism
* Добавить комментарии disqus.com
* Добавить социальные кнопки
* Добавить RSS
* Сделать выбор категорий
* Сравнить с Jekyll