Конвертация статичного сайта в Jekyll


Содержание

Есть ли смысл использования Jekyll, а не WordPress?

Для разработки сайтов всегда использовал WordPress и мне до сих пор нравится. Но в последнее время много слышу про генератор статических сайтов Jekyll, с помощью которого можно создавать легкие и простые сайты.

Сейчас я планирую начать работу над сайтом-портфолио и в принципе могу обойтись без админки. Начал изучать Jekyll и мне более менее понятно как пользоваться, но с другой стороны у меня возникло ощущение, что по сути он не отличается от обычной верстки. Ведь можно также собирать обычную верстку с помощью Gulp, Sass и шаблонизатора Nunjucks.

Может кто объяснит в чем кардинальная разница, просто я пока не понимаю до конца? Или может вообще остаться на WordPress?

Для меня важно:

  1. чтобы в URL не было окончаний .html или в этом роде
  2. чтобы если я в корне сайта создам папку «portfolio», а в ней папку с названием проекта «project-name» в итоге получилось так «site.ru/portfolio/project-name»
  • Вопрос задан более года назад
  • 1459 просмотров

Для меня важно: 1. чтобы в URL не было окончаний .html или в этом роде; 2. чтобы если я в корне сайта создам папку «portfolio», а в ней папку с названием проекта «project-name» в итоге получилось так «site.ru/portfolio/project-name»

С этим проблем не будет.

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

Да, но. Раскидывание постов по тегам и категориям, rss и sitemap, постраничная навигация, поиск, еще что-то. лениво все это делать самому. Jekyll выступает в качестве готовой конфигурации, которую можно взять и использовать для таких задач, не запариваяь о том, что там есть и как оно работает. В этом его предназначение. Понятно, что jekyll не заменит gulp или webpack в задачах вроде сборки современного фронтенда (ну знаете, это когда 100500 модулей, babel или даже typescript, препроцессоры, постпроцессоры и.т.д.), но вопросы именно файловой структуры сайта и всего, что с ней может быть связано, он решает хорошо и без лишних вопросов.

могу обойтись без админки. или может остаться на WordPress?

Создание контентного сайта на Jekyll от А до Я

Дизайн. Вёрстка. Посадка на движок. Размещение. Монетизация.

О курсе

Мечтаете создать крутой ресурс, такой, как Лайфхакер, Ferra.ru, Хакер, ixbt.com или свой неповторимый проект? Добро пожаловать в первый комплексный курс по созданию контентного сайта на Jekyll и его монетизации.

Данный курс является наиболее полным и подробным руководством по правильному и грамотному проектированию вашего контентного сайта от автора с опытом разработки и монетизации оптимизированных проектов различной сложности и тематик.

В этом курсе вы найдёте ответы на все свои вопросы и даже больше!

Блок 1. Создание дизайна

Время обучения: 2 часа 55 минут.

Курс делится на 5 больших блоков, в первом из которых мы создадим потрясающий современный дизайн всех страниц новостного сайта. Примером у нас будет выступать новостной сайт о современных технологиях GeekTOP, разработанный специально для этого курса.

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

Блок 2. Адаптивная вёрстка

Время обучения: 8 часов 5 минут.

В процессе вёрстки используем самые современные технологии и инструменты: Bootstrap 4, Gulp, Sass, Browsersync, стартер OptimizedHTML и многое другое.


В результате обучения вы сможете самостоятельно верстать адаптивные, SEO-оптимизированные макеты, используя различные профессиональные инструменты в работе и поднять ваши скиллы вёрстки на новый уровень.

8 часов. Это действительно мощно!

Блок 3. jekyll

Время обучения: 5 часов 30 минут.

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

Что такое Jekyll?

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

В процессе создания сайта на Jekyll, мы разберём массу полезных и интересных приемов, сниппетов и возможностей, таких, как автоматическая генерация внешних ссылок с rel=»nofollow», создание постраничной пагинации с областью видимости соседних страниц, вывод нестандартных секций в списке статей с оффсетами и лимитами, использование фильтров для вывода контента, форматирование дат, rss, sitemap, репостинг и массу других полезных вещей, которые пригодятся вам при создании собственного проекта.

Скорость загрузки сайта:

Все контентные проекты автора на данный момент работают на Jekyll. Старые были перенесены с других CMS, а все новые изначально создавались на этом движке. Почему?

Статика, созданная Jekyll загружается в десятки раз быстрее любой CMS, использующей генерацию на стороне сервера и реляционную базу данных MySQL.
А поисковики любят быстрые сайты!

Средняя скорость загрузки сайтов:

Не нужно переплачивать:

Статические сайты не имеют бэкенда, не генирируются на стороне сервера и не имеют баз данных, а значит создают минимальную нагрузку на сервер. Это позволяет экономить. Много экономить!

Стоимость 10 000 уникальных посетителей/сутки за год:

Блок 4. Хостинг и деплой

Регистрация, настройка хостинга и деплой проекта.

В четвёртом блоке курса мы зарегистрируем реальный хостинг, научимся работать с файловой системой хостинга, настроим SSH-ключ для молниеносного деплоя — размещения всего проекта или его части на рабочем сервере.

Дополнительно в данном блоке мы подробно разберём, как работает SSH, как обеспечить быстрый доступ к сайту, настроить деплой вашего проекта в Gulp и работать с терминалом хостинга.

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

Блок 5. Монетизация

Регистрация Google AdSense, настройка, размещение рекламы на сайте.

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

Особое внимание уделяется именно правильному размещению рекламных блоков, наиболее удачным и эффективным позициям, настройке объявлений различного типа, в том числе и адаптивных рекламных блоков для responsive сайтов.

Кроме того, мы интегрируем в наш сайт поиск от Google AdSense, что позволит пользователям эффективно искать на сайте нужную информацию, а авторам зарабатывать дополнительные деньги на выдаче результатов с рекламными объявлениями.

Управление ссылками Jekyll

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


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

Мы расскажем, как Jekyll создает URL-адреса по умолчанию и как изменить шаблон для отдельного файла или всего сайта. Затем вы научитесь связывать страницы с контентом и проверять работу ссылок.

Требования

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

Файловая структура статического сайта

Во втором мануале вы научились пользоваться командой jekyll new и создавать скелет сайта, который можно просмотреть в веб-браузере. Теперь давайте посмотрим на файловую структуру, которая была создана вместе с этим статическим сайтом.

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

Статический сайт представлен каталогом _site и всем его содержимым:

.
├── 404.html
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2020-09-04-welcome-to-jekyll.markdown
└── _site
. ├── 404.html
. ├── about
. │ └── index.html
. ├── assets
. │ ├── main.css
. │ └── postcard.jpg
. ├── contact.html
. ├── feed.xml
. ├── index.html
. └── jekyll
. └── update
. └── 2020
. └── 09
. └── 04
. └── welcome-to-jekyll.html

В отличие от веб-сайтов, основанных на БД, URL-адреса для статических сайтов являются буквальными представлениями структуры каталогов на диске. Jekyll преобразовал категории записей в каталоги и расширил дату в файловой структуре, (этот шаблон является общим для многих блогов), так что окончательный шаблон URL для этой записи будет /category1/category2/YYYY/MM/DD/words-in-title.html; соответственно, сам URL-адрес будет выглядеть так: http://203.0.113.0:4000/jekyll/update/2020/09/04/welcome-to-jekyll.html.

Скаффолд не предоставляет динамические индексные страницы для этих каталогов, поэтому если пользователь удалит часть URL-адреса, чтобы найти все записи из определенной категории, года, месяца или дня, возможны два варианта. Если веб-сервер поддерживает автоматическое индексирование каталогов, пользователь увидит информацию о файлах и каталогах:

Index of /jekyll/update/2020/09/04
[…]

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

Forbidden
You don’t have permission to access /jekyll/update/2020/09/04 on this server.

Структуры, основанные на категориях и датах, являются распространенной схемой для URL-адресов блогов, но то, как вы решили структурировать свои URL-адреса, будет зависеть от потребностей вашего конкретного сайта.

Если вы хотите изменить адреса по умолчанию, Jekyll может упростить создание URL-адресов. Об этом полезно подумать, прежде чем публиковать сайт в первый раз, поскольку изменения в шаблонах URL влияют на то, насколько эффективно люди могут находить контент в поисковых системах, и на работу внешних ссылок.

Управление URL-адресами

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

Страницы по умолчанию

Когда мы создаем страницу в корне сайта (как, например, было со страницей контактов), имя файла, contact.md, преобразуется в contact.html, и в результате URL-адрес тоже исходит из корневого каталога:

Илон Маск рекомендует:  Собираем очень мощный компьютер за 50000-55000 рублей

Если поместить файл в один или несколько подкаталогов, они тоже станут частью URL-адреса. Например, если вы поместите страницу contact.md в каталог main, URL-адрес будет таким:

Стандарты записей

Записи работают иначе, чем страницы. Во-первых, у них есть категории, и статическом сайте эти категории становятся каталогами и, конечно, отображаются в URL. По умолчанию шаблон записи состоит из ее титульных элементов:

title: «Welcome to Jekyll!»
date: 2020-09-04 03:36:31 +0000
categories: jekyll update

Итак, в каталоге _site есть подкаталог jekyll/update/2020/09/04/welcome-to-jekyll.html, названный по шаблону /:categories/:year/:month/:day/:title. В результате будет такой URL:

Если удалить категорию из титульных элементов, при следующем создании сайта структура каталогов изменится, и категория больше не будет частью URL-адреса.

Параметры страниц и записей по умолчанию могут быть переопределены двумя способами.


Определение постоянной ссылки в титульных элементах отдельной страницы переопределяет значение по умолчанию как для страниц, так и для записей, что позволяет вам точно указать, что ссылки нужно создавать на основе файлов. Такая ссылка была установлена в контенте по умолчанию на странице About, где значение ссылки /about/ создало URL-адрес http://203.0.113.0:4000/about/, который, в свою очередь, существует на диске как about/index.html.

Постоянные шаблоны

Jekyll позволяет вам переопределить весь шаблон по умолчанию в файле _config.yml. Это повлияет как на страницы, так и на записи, но есть одно важное отличие: записи имеют доступ к категориям и элементам даты и времени из титульных элементов, а страницы — нет. URL-адреса страниц будут следовать шаблону, опуская все элементы, которые присущи записям.

Чтобы увидеть переопределение шаблона в действии, создайте шаблон, который сохраняет категории записей, опускает элементы даты и заканчивается заголовком записи или страницы:

В конец файла добавьте значение:

Чтобы увидеть, как изменения конфигурации повлияли на сайт, нужно остановить веб-сервер с помощью CTRL-C, а затем перезапустить его:

jekyll serve —host=203.0.113.0

Файловая структура на диске изменится:

── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│ └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│ ├── 2020-09-04-welcome-to-jekyll.markdown
│ └── 2020-09-04-link-test.md
└── _site
. ├── about
. │ └── index.html
. ├── assets
. │ └── postcard.jpg
. ├── contact # originally `contact.html`
. │ └── index.html
. ├── css
. │ └── main.css
. ├── feed.xml
. ├── Gemfile
. ├── Gemfile.lock
. └── index.html
. └── jekyll
. └── update
. └── welcome-to-jekyll
. └── index.html

Эти изменения в файловой структуре отразятся на URL-адресах. Страница About все еще находится по адресу /about/, поскольку ее постоянная ссылка была установлена в отдельном файле с самого начала. Страница Contact изменила адрес с /contact.html на /contact/, а запись Link Test теперь находится по адресу /jekyll/update/welcome-to-jekyll/, потому что изменился шаблон всего сайта. Узнать больше о переопределении URL-адресов можно в документации Jekyll Permalinks.

Надежные ссылки на записи

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

В теле страницы полностью статического сайта URL-адреса страниц используются в одном из форматов:

  • Абсолютная ссылка, [Link Text]([http://203.0.113.0:4000/post-name): это правильный формат для внешней ссылки, но он не подходит для нашего сайта: наличие номера порта в базовом URL-адресе приведет к тому, что ссылки станут неисправными в процессе производства; но если пропустить номер порта, ссылки не будут работать на этапе разработки.
  • Корневая относительная ссылка, [Link Text(/[post-name): этот формат подходит только для локальных ссылок, он повторяет структуру каталогов на сервере, начиная с корневого каталога после первого слеша.
  • Относительная ссылка, [Link Text](post-name): этот формат также относится к локальным ссылкам; путь начинается из каталога, в котором находится страница, содержащая ссылку.

Оба типа относительных ссылок имеют одну и ту же проблему. Если вы измените формат ссылок, вам нужно будет найти в контенте все ссылки в старом формате и обновить их. Шаблонизатор Liquid предлагает более гибкий способ создавать ссылки на записи. Вы можете использовать переменную post_url с именем файла. Вместо такой ссылки:

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

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

Создание новой записи

Создайте новую запись, чтобы проверить свои знания. Откройте новый файл в редакторе, укажите дату в имени файла:

Укажите титульные элементы. Дата в них должна совпадать с датой в имени файла. Укажите в файле свой IP или домен.

layout: post
date: 2020-09-04 07:00
title: Link Test

Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http:// 203.0.113.0:4000/about/ )
* [A root relative link]( /jekyll/update/welcome-to-jekyll/ )
* [A Jekyll post_url link](<% post_url 2020-09-04-link-test %>)

Сохраните и закройте файл. При повторном посещении главной страницы должна автоматически появиться новая запись Link Test.

Следуйте по ссылке на главной странице и проверьте работу всех появившихся ссылок. Все три ссылки должны работать.

Абсолютная ссылка будет работать на сайте разработки, но она перестанет работать при развертывании сайта с другим URL-адресом или без номера порта. Корневая относительная ссылка будет работать до тех пор, пока постоянная ссылка остается прежней. Однако если постоянная ссылка изменится, эта ссылка перестанет работать как в режиме разработки, так и в производстве. Ссылка post_url создаст корневую относительную ссылку при обработке сайта. Она не только будет работать в любом режиме, но и заставит Jekyll проверить запись при обработке сайта. Если записи не существует, Jekyll выдаст по этой ссылке сообщение «Liquid Exception» и укажет, какой файл содержит битую ссылку. Например, если вы ошибочно введете неверное имя файла:

Liquid Exception: Could not find post
» broken-name-welcome-to-jekyll » in tag ‘post_url’.
Make sure the post exists and the name is correct.
in /home/8host/www/_posts/2020-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
————————————


Тестирование ссылок на промежуточном сайте

На странице методов развертывания Jekyll описаны различные способы перемещения контента в производство в зависимости от ваших потребностей. Здесь вы найдете много всего, от FTP до сложных автоматизированных методов. На данный момент нужно создать промежуточный сайт на той же машине, чтобы посмотреть, как ведут себя ссылки.

Создание тестового сайта

Установите Nginx, чтобы проверить, как работают ссылки, прежде чем начать развертывание:

sudo apt-get install nginx

Когда установка будет завершена, разблокируйте HTTP-трафик.

sudo ufw allow http

Откройте адрес машины разработки. Вы увидите:

Welcome to Nginx!
[…]

Поскольку вы находитесь в одной файловой системе, переместите сайт с помощью базовой команды rsync.

Чтобы поместить содержимое _site в корневом каталоге Nginx, /var/www/html, нужно использовать следующую команду с флагом -a для рекурсивной синхронизации и сохранения данных. Опционально можно добавить флаг -v для подробного вывода.

Когда команда rsync закончит работу, можете посетить сайт, не указывая номер порта:

Убедитесь, что перед тестированием вы остановили веб-сервер разработки.

Тестирование сайта

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

Новая запись в блоге появляется на главной странице (вверху) автоматически,.

Когда вы откроете запись Link Test, вы увидите, что и абсолютная ссылка, и корневая относительная ссылка больше не работают, потому что новая среда, в которой развернут сайт, не использует порт 4000, а ссылка Jekyll post_url работает по-прежнему.

Тестирование завершено. Теперь можно остановить nginx и закрыть порт 80, чтобы не обслуживать его трафик.

sudo systemctl stop nginx
sudo ufw delete allow http

Чтобы остановить сервер разработки, нажмите CTRL+C.

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

Заключение

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

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

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

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

Установка jekyll


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

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

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

Все необходимые зависимости подтянутся автоматически. Обратите внимание, что я использую в качестве парсера 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 , для ее использования необходимо в командной строке передать еще и заголовок новой статьи. Заголовок необходимо передавать сразу в транслите. После чего автоматически открывается редактор для редактирования данного файла.

Илон Маск рекомендует:  Функции bios int 19h начальный загрузчик (bootstrap loader)

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

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

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

Теперь исходники сайта будет размещаться в 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.

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

Marked

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Быстрый перенос блога с WordPress на Jekyll

jekyll-import — gems-пакет для переноса вашего блога с системы управления контентом WordPress (и не только) на Jekyll — систему генерации статических сайтов, ориентированную на блоги.

Зависимости

Чтобы использовать этот скрипт для импорта, необходимо установить дополнительные gems-пакеты:

Для запуска импорта ваших постов из WordPress в Jekyll, выполните на сервере с установленным блогом:

Необязательно заполнять абсолютно все поля. По умолчанию они предустановлены как показано выше.

Этот пакет импортирует только данные ваших постов и страниц.

Он конвертит все посты и создаёт YAML , не беря в расчёт разметку, стили, скрипты, фото и другие внешние ресурсы.

Jekyll Exporter


Существует также WordPress плагин Бена Балтера Jekyll Exporter, который в один клик конвертирует все записи, страницы, таксономии, метаданные и параметры в Markdown и YAML . Полученные таким образом данные могут быть легко перенесены в Jekyll.

Что умеет Jekyll Exporter

  • Конвертирует все записи, страницы и параметры в WordPress под Jekyll;
  • Экспортирует то, что видят ваши пользователи (а не то, что хранит ваша база данных; контент записей пропускается через фильтр the_content перед экспортом, позволяя сторонним плагинам модифицировать вывод);
  • Конвертирует весь post_content в Markdown Extra (при помощи Markdownify);
  • Конвертирует все post_meta и поля таблицы wp_posts в формат YAML, подходящий для парсинга Jekyll
  • Генерирует _config.yml со всеми параметрами таблицы wp_options
  • Создает отдельный zip-архив с _config.yml, страницами, а также папкой _posts, содержащей .md-файлы для каждой записи в соответствующем формате имен Jekyll.

Генерация YAML запускается по кнопке из админки, либо из терминала через WP-CLI:

Как завести блог на Jekyll

Jekyll — генератор статичных сайтов, позволяющий сделать гибкий и легковесный блог или сайт.

Содержание

Jekyll — генератор статичных сайтов. Грубо говоря, он просто помогает собрать из шаблонов и текстов набор HTML-файлов, которые можно разместить на любом веб-сервере. Этот сайт — Hexlet Guides — работает на Jekyll.

В отличие от движков для блогов или CMS вроде WordPress или Ghost, конечный результат работы Jekyll — это не исполняемые программы на языке программирования, а статичные HTML-файлы. Поэтому для размещения сайта не нужен PHP, Node, базы данных и мощный хостинг. Раздача статических файлов создает минимальную нагрузку на сервер, поэтому чаще всего достаточно самого дешевого хостинга.

Jekyll-сайт можно разместить бесплатно на Github Pages, чем мы и займемся в этом руководстве.

Обзор

Рассмотрим схему работы Jekyll и схему публикации сайта вкратце:

  1. Вы создаёте шаблоны для вашего сайта: как выглядит главная страница, как выглядят страницы постов, категорий, шапки, подвалы и другие блоки сайта.
  2. Вы пишете посты в формате Markdown (доступны и другие форматы).
  3. Jekyll генерирует конечные HTML-страницы на основе шаблонов и Markdown-файлов.
  4. Вы публикуете HTML на веб-сервере и сайт становится доступным в интернете.

GitHub Pages позволяет размещать любые HTML-страницы, но он также поддерживает Jekyll на своей стороне. Это означает, что вы можете не отправлять сгенерированный HTML в Github, а отправлять только папку с вашим Jekyll-проектом и Markdown-файлами, а Github сам запустит генерацию HTML и разместит их у себя.

Установка Jekyll на локальную машину

Есть два способа работы с Jekyll на локальной машине: напрямую или через Docker. Второй способ намного проще и быстрее, но может быть непривычен, если вы никогда раньше не работали с Докером.

Прямая установка и запуск Jekyll

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

В зависимости от операционной системы, у вас может быть уже установлен Ruby.


В Windows можно использовать RubyInstaller. Работать с Jekyll нужно через командную строку. Для подготовки необходимого окружения в Windows используйте наш гайд Как начать разрабатывать в Windows.

В macOS Ruby есть в комплекте. Проверьте его версию:

Нужна версия 2.0 и выше. Если у вас по какой-то причине более ранняя версия, то обновите Ruby командой sudo gem install ruby .

Теперь установите Bundler. Это менеджер пакетов, именно через него мы в итоге установим Jekyll и другие необходимые для него пакеты:

Создать пару сайтов на Jekyll или других системах

Ситуация такая, у меня много знакомых, которые ведут небольшой бизнес. У них есть сайты, но они давно не поддерживаются, меня попросили помочь администрировать их, а может и вообще поменять их. Ситуация такая, так как Ruby on Rails фраемворк для больших Web-приложений ( начиная от интернет-магазинов и т.п), то его просто незачем использовать, например для сайта визитки Ивана Иванова. Вопрос, как быть?

Илон Маск рекомендует:  Что такое код fbsql_list_tables

1. Конечно можно писать на Ruby on Rails, но это будет в ДАННОМ случае затратно.

2. Можно использовать CMS на PHP ( Drupal, Joomla, WordPress ), но я уже забыл php и заново разбираться, закачивать и настраивать сервер на DigitalOcean для php, опять же затратно.

Погуглив, я пришел к выводу, что за меня уже все сделали крутые ребята и написали 2 CMS/CMF для таких сайтов.

Итак, поехали. Какие сайты я сделаю, напишу в этапах.

P.S. Я вообще не понимаю тех людей , которые ведут свои блоги/портфолио, рассказывают там про Ruby on Rails , и пишут статьи на данную тему, на каких-либо php системах управления контентом. Это тоже самое что работать в компании Lexus ген.директором, а ездить на Volvo. Зачем тогда работать в Lexus?

Критерий завершения

Сайты работают и запущены

Jekyll

Текст из habrahabr.ru

Коротко говоря: это система генерации статических сайтов, ориентированная на блоги. Основная особенность: используется на Github Pages, что позволяет держать исходники сайта в репозитории на Github — а несколько кэширующих серверов его в пределах 10 минут после коммитов будут собирать и отображать посетителям. Если интересно больше и коротко: рекомендую к прочтению эту статью, часть материала которой я упомяну и здесь. А я расскажу о Jekyll поподробнее: как им можно пользоваться по назначению, для чего им пользоваться не по назначению, и на что он вообще способен. Статья ориентирована больше на тех, кто ни с чем подобным ранее не работал (как я, работавший ранее с WordPress), и в большей части статьи Jekyll будет рассматриваться именно как средство ведения блога, хотя ближе к концу будет нечто совсем другое.

Из всех существующих платформ для блогов (движков, сервисов, генераторов) Jekyll мне показался странно выделяющимся. Это скорее моя вина, потому что статическими сайтами я увлёкся не так давно и аналогов не знаю. Jekyll ориентирован на технически грамотных людей, которых больше интересует использование блога по его прямому назначению: публиковать посты в обратном хронологическом порядке, а также обеспечивать более-менее удобную навигацию. Если вам нужно больше, придётся либо попотеть, либо отказаться от большего (ну, или от Jekyll). И такой способ «общения» во многом определяет круг пользователей этой платформы: те, кому нужен сайт с предельно понятной им структурой и минимумом проблем в публикации новых постов.

Octopress

Текст из habrahabr.ru

Octopress — технология, которая позволяет удобно генерировать статический контент в HTML виде.

Это фреймворк, использующий Jekyll.
Octopress дает вам следующее:

  • шаблон в HTML5 с уже «встроенной» поддержкой мобильных устройств
  • поддержку Twitter, Google Plus One, Disqus Comments, Pinboard, Delicious и Google Analytics
  • простой и удобный деплой на Github pages или на ваш сервер с помощью Rsync,
  • шаблон в HTML5 с уже «встроенной» поддержкой мобильных устройств
  • подсветку синтаксиса с помощью темы Solarized.

Что же в нем такого особенного? Обновлять по сути ничего, кроме элементов движка (в отличие от WordPress). Конфигурационных файлов мало и в них легко разобраться. Нет MySQL, нет PHP, нет Apache. Динамический контент добавляется с помощью javascript плагинов. Тема оформления минималистская, читать статьи одно удовольствие. Она умеет автоматически масштабироваться в зависимости от ширины браузера. Статьи теперь можно писать в любом текстовом редакторе, теперь это особенно удобно с помощью markdown.

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

Конвертация статичного сайта в Jekyll

Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.


Jekyll does what you tell it to do — no more, no less. It doesn’t try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.

  • Install the gem
  • Read up about its Usage and Configuration
  • Take a gander at some existing Sites
  • Fork and Contribute your own modifications
  • Have questions? Check out our official forum community Jekyll Talk or #jekyll on irc.freenode.net
  • Migrate from your previous system
  • Learn how Front Matter works
  • Put information on your site with Variables
  • Customize the Permalinks your posts are generated with
  • Use the built-in Liqu >

If you don’t find the answer to your problem in our docs, or in the troubleshooting section, ask the community for help.

Code of Conduct

In order to have a more open and welcoming community, Jekyll adheres to a code of conduct adapted from the Ruby on Rails code of conduct.

Please adhere to this code of conduct in any interactions you have in the Jekyll community. It is strictly enforced on all official Jekyll repositories, websites, and resources. If you encounter someone violating these terms, please let one of our core team members know and we will address it as soon as possible.

Support this project by becoming a sponsor. Your logo will show up in this README with a link to your website. Become a sponsor!

This project exists thanks to all the people who contribute.

Thank you to all our backers! �� Become a backer

Создаём бесплатный сайт на GitHub Pages при помощи Jekyll

В этой статье я расскажу как быстро и бесплатно создать сайт для своего блога, используя GitHub Pages и Jekyll. Для примера я создам клон своего же сайта, где можно будет размещать не только статьи, но и полезные коды, а также комментировать их. Пример сайта.

Что нам потребуется
Первое и основное ­— аккаунт на GitHub.
Второе — базовые знания Markdown. Читайте статью Markdown для повседневной жизни.
Третье — аккаунт на Cloud9. Необязательно, но для тестирования нужен. Иначе придётся каждый раз делать изменения на гитхабе, чтобы увидеть результат.
Вместо Cloud9 можно поставить Linux, Ruby и тестировать локально.

Подготовка
В Cloud9 создаём workspace Ruby.

После этого нам будут доступны Ruby и RubyGems.

Лишние файлы, которые созданы по умолчанию, можно удалить.

Быстрый старт
В Jekyll есть готовые шаблоны. Выполните:

Структура сайта
Сгенерированные файлы в директории test имеют такую структуру:

Что выбрать: Джейкил или Вордпрес?

Целый год мой блог работал на Jekyll и размещался на GitHub.

Исходники блога остались лежать в репозитории на GitHub. За это время я его хорошо изучил, понял его сильные и слабые стороны. Месяц назад вернулся обратно к WordPress и ниже расскажу почему.

Jekyll — это генератор статических сайтов. Устанавливаем его на компьютер, создаем определенную структуру папок и из них генерируются статичные HTML страницы, которые можно загрузить к себе на хостинг и отображать на сайте. GitHub предоставляет возможность генерации статики из репозитория, используя gh-pages.

В Jekyll мне понравились такие возможности:

  1. Писать заметки прямо из редактора кода, используя синтаксис Markdown.
  2. Публикация заметок через push в репозиторий сайта.
  3. Бесплатный хостинг от Github в виде gh-pages.

Через полгода использования начал понимать, что Jekyll отличная штука, но не для часто обновляемых сайтов. Для того, чтобы написать заметку, нужен компьютер, на котором настроен сам Jekyll и GitHub. Есть сервис prose.io, который позволяет писать заметки через веб, но он показался мне неудобным.

Помимо прочего, использование gh-pages для сайта несет не лучшие результаты в поисковой выдаче из-за использования 301 редиректа. Это влечет за собой не только плохую индексацию поисковиками, но и отказ социальных сетей от выгрузки заголовка, описания и фотографии заметки в карточку.

Пример отображения заметки в Facebook:

После отказа от gh-pages, публикация заметок превратилась в ад. Нужно было каждый раз перезаливать статику на хостинг через FTP. Занятие не из приятных. Поэтому уже тогда начал задумываться о том, чтобы вернуться к использованию WordPress в качестве ядра блога.

Но это не значит, что Jekyll и другие генераторы статических сайтов — плохая затея. Наоборот. Они позволяют создать сайт, для которого не нужны Apache, PHP и MySQL. При этом есть возможность разделения повторяющихся блоков сайтов на шаблоны и их повторное использование. Есть встроенная система тегов, категорий, что позволяет легче находить и классифицировать информацию на сайте.

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

WordPress — многим известная система управления сайтами. Заядлые технари упрекнут меня в недостаточной гибкости системы и будут правы, но не совсем. Возможности WordPress могут покрыть 90% всех потребностей. Если нужно что-то очень специфичное сделать, тогда да, не стоит его использовать, как и не стоит использовать любую другую CMS. В такой ситуации придется писать своё решение с нуля и это займет больше времени, денег, и в сопровождении такой проект обойдется клиенту (и вам самому) намного дороже.

За последние годы я выпал из новостей, касающихся WordPress и совсем недавно начал навёрстывать упущенное. Система выросла из CMS для блогов в CMS управления чем-твоя-душа-пожелает . Правда, WP настолько гибкий, что из него можно сделать интернет-магазин, форум, доску объявлений или даже простенькую социальную сеть.

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

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

При всей мощи WordPress его, как и раньше, можно использовать для ведения блога, что я и сделал. Перевел всю верстку, которая была на Jekyll-блоге в тему для WordPress и сейчас продолжаю ей заниматься. Если хотите получить такую же, пишите мне на почту alexandr@bizikov.ru или в комментарии к этой заметке. Когда доработаю её до должного уровня, начну продавать.

Благодаря потенциалу WordPress одним из основных направлений деятельности проектного бюро Набла будет разработка тем и плагинов для этой системы.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL