В последнее время от сложных веб-сайтов, управляемых базой данных, произошел некоторый поворот назад к более простым, более статичным сайтам — где это возможно, конечно, например, с простым сайтом портфолио или блогом.
Это не значит, что люди возвращаются на сайты .html
прошлых лет. Вы по-прежнему хотите иметь возможность эффективно управлять шаблонами и кодом всего сайта, и именно здесь приходят статические генераторы сайтов.
Генераторы статического сайта предназначены для сбора различных статических файлов и превращения их в веб-сайт. Есть много и много из них на выбор, и здесь есть последние статьи о них на SitePoint, в которых рассматриваются различные языки, на которых они появляются, опции на основе узлов , их потенциальные преимущества по сравнению с WordPress и даже как создавать свои собственные с Grunt ,
В этой статье мы рассмотрим Jekyll, один из самых популярных и широко используемых. Я опишу, как вы можете создать блог с минимальным кодированием, а затем бесплатно разместить его на страницах GitHub . Мы также будем использовать Poole , своего рода фреймворк — или «базовую настройку» — для создания сайтов Jekyll.
Джекилл в двух словах
Джекилл написан на Ruby. Он установлен на вашем компьютере как драгоценный камень Ruby. Это не CMS, это не программное обеспечение для ведения блогов, оно не содержит шаблонов, контента и так далее. Это намного проще, чем это. Думайте об этом как о простой программе, которая предоставляет удобные способы обработки ваших файлов.
После установки Jekyll вы можете запустить его из командной строки. Он может выполнять такие вещи, как процесс Markdown, и поскольку он генерирует статический сайт, вы можете легко просматривать прогресс локально и размещать свой сайт на статическом веб-сервере, таком как GitHub Pages.
Установка Джекила
Сначала вам нужно установить Jekyll в вашей системе. Для Mac выполните следующую команду в терминале, чтобы установить Jekyll:
$ gem install jekyll
Это автоматически установит все зависимости Gem от Jekyll. Если вы застряли во время установки, посетите страницу устранения неполадок на официальном сайте Jekyll или сообщите о проблеме на GitHub.
Хотя Jekyll официально не поддерживается в Windows, вы можете запустить его с некоторыми изменениями. Пожалуйста, обратитесь к Jekyll на странице Windows на веб-сайте Jekyll или к этому руководству Джулиана Тило.
Получение Poole и ваш первый сервер
Вместо того, чтобы начинать с необработанной темы Jekyll, давайте использовать Poole. Он был создан Марком Отто, и вот как он это описывает:
Пул — дворецкий для Джекила, генератора статических сайтов. Он спроектирован и разработан @mdo для обеспечения четкой и краткой основы для любого сайта Jekyll. Это достигается путем предоставления полной ванильной установки Jekyll с примерами шаблонов, страниц, сообщений и стилей.
Вы можете увидеть базовую версию здесь . Хотя это очень хорошо для минимального блога, мне больше нравятся две темы, построенные поверх него: Hyde и Lanyon . Давайте использовать Hyde для создания нашего демонстрационного блога.
Чтобы получить настройки для Hyde, перейдите на страницу GitHub и загрузите репозиторий. Поместите его в папку по вашему выбору и перейдите к терминалу. Давайте предположим, что вы держите его на рабочем столе. Выполните следующие команды, чтобы перейти в этот каталог и запустить сервер:
$ cd Desktop/hyde-master/ $ jekyll serve
Команда jekyll serve
запустит сервер разработки, который позволит вам предварительно просмотреть созданный сайт в вашем браузере.
Чтобы понять, что я имею в виду, откройте новую вкладку в своем браузере и введите: http://localhost:4000
. Если вы все правильно выполнили, вы найдете там свой новый блог.
Добавление новых сообщений
Только что загруженный репозиторий hyde-master
содержит много папок, таких как _layouts
, _posts
и _includes
. Но есть только одна папка, о которой вам нужно заботиться, если вы хотите управлять сообщениями для своего блога: _posts
. Он содержит все ваши сообщения в формате Markdown .
Для добавления нового сообщения в блог просто поместите файл Markdown в папку _posts
. Убедитесь, что ваши файлы Markdown содержат следующую информацию (известную как YAML ):
--- layout: post title: Your Post Title ---
Это скажет Джекиллу, что вы добавляете сообщение. (Проверьте примеры сообщений в папке _posts
если у вас есть какие-либо сомнения.)
Запустите jekyll serve
снова в своем терминале, и вы найдете новый пост в своем блоге, если откроете http://localhost:4000
.
Чтобы обеспечить правильное построение вашего блога, Jekyll требуется следующее соглашение об именах:
YEAR-MONTH-DAY-title.MARKUP
YEAR
— четырехзначное число, MONTH
и DAY
— двузначные числа, а MARKUP
— расширение файла, представляющее формат, используемый в файле (в нашем случае md
). Например, ваш первый пост может быть назван 2015-03-29-my-first-post.md
.
Публикация вашего блога
После того, как вы выполнили шаги, описанные выше, и добавили несколько своих постов, вы готовы показать свой новый блог всему миру. Вы можете публиковать свои файлы на многих веб-хостах, но GitHub сделал очень простым (и бесплатным!) Размещение статического сайта Jekyll через GitHub Pages. Все, что вам нужно — это учетная запись GitHub.
Прежде чем отправить его на GitHub, давайте внесем некоторые изменения:
В файле config.yml
:
- Измените
title
,tagline
,description
github
иauthor
на ваши личные данные. - Измените
url
наyour_github_username.github.io
.
В CNAME your_github_username.github.io
вместо hyde.getpoole.com
. И отредактируйте about.md
чтобы включить ваши данные.
your_github_username.github.io
внесения вышеуказанных изменений создайте репозиторий your_github_username.github.io
и переместите все файлы со своего рабочего стола в этот репозиторий.
Попробуйте открыть your_github_username.github.io
в браузере, и вы найдете там свой новый блог.
Важное замечание : вам нужно знать немного о Git, чтобы иметь возможность добавлять свои новые сообщения в хранилище. Если командная строка не ваша вещь, есть много инструментов, таких как GitHub для Mac , которые облегчают работу с Git. В любом случае, как только вы добавите свои сообщения в хранилище, GitHub Pages позаботится обо всем остальном.
Дальнейшее чтение
Этот пост был о том, как начать работать с Jekyll, но вы можете многое сделать, если хотите потратить некоторое время на изучение. Вы найдете следующие ресурсы полезными для понимания Jekyll и Git немного лучше:
- Документация Jekyll — очень аккуратная и точная документация
- Введение в Джекилла — хорошее объяснение Йохана Ронзее
- Основы Git и GitHub — с официального канала GitHub на YouTube
- Изучите основы Git за 15 минут — интерактивное руководство от Code School.
Я надеюсь, что вы нашли эту статью полезной. Если вы пытаетесь создать блог, используя шаги, упомянутые выше, и застряли где угодно, задайте вопрос в комментариях ниже. Я буду активным там.