Разработка сайта на Jekyll в Ubuntu 18.04

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

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

В этом руководстве мы разработаем простой сайт Jekyll с автоматически сгенерированным контентом в Ubuntu 18.04.

Требования

Для работы вам понадобится сервер Ubuntu 18.04, настроенный по этому мануалу (включая пользователя с привилегиями sudo).

1: Установка Jekyll

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

sudo apt update

Затем установим make и build-essential, чтобы скомпилировать библиотеки Jekyll (также эти инструменты пригодятся Ruby и его библиотекам разработки). Флаг y автоматически примет все запросы системы.

sudo apt -y install make build-essential ruby ruby-dev

Когда эта команда выполнится, нам нужно будет добавить две строки в файл .bashrc, чтобы сообщить менеджеру пакетов Ruby gem, что гемы следует помещать в домашнюю папку текущего пользователя. Это позволит избежать проблем, обычно возникающих при глобальной установке, и, кроме того, добавит локальную команду jekyll в пользовательский PATH.

Откройте.bashrc в любом редакторе, например, в nano:

nano .bashrc

Добавьте в конец файла эти строки:

# Ruby exports
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH

Сохраните и закройте файл.

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

source ~/.bashrc

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

gem install jekyll bundler

Затем нужно проверить настройки брандмауэра и разблокировать входящий и исходящий трафик веб-сервера разработки Jekyll.

2: Настройка брандмауэра

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

sudo ufw status

Если согласно выводу команды ваш брандмауэр отключен, выполните эти команды.

ufw allow OpenSSH
sudo ufw enable

Это добавит брандмауэр в автозапуск. Вы можете столкнуться со следующим запросом системы (введите «y», чтобы согласиться и продолжить работу):

Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup

В нашем случае открыт только трафик SSH:

Status: active
To Action  From
-- ------  ----
OpenSSH ALLOW   Anywhere
OpenSSH (v6)   ALLOW   Anywhere (v6)

У вас могут быть другие правила (или вообще не быть правил) в зависимости от того, как вы настроили брандмауэр. В данном случае разблокирован только трафик SSH, а потому нам нужно открыть порт 4000, стандартный порт сервера разработки Jekyll:

sudo ufw allow 4000

Теперь список правил должен выглядеть так:

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
4000                       ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)

Теперь, когда все программное обеспечение установлено, а необходимый порт открыт, мы готовы начать работу над сайтом.

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

Перейдите в домашний каталог и запустите команду Jekyll new для создания скаффолда сайта в подкаталоге www:

cd ~
jekyll new www

Команда jekyll new запускает команду bundle install для установки необходимых зависимостей, а затем автоматически устанавливает тему Minima. После успешной установки вы должны получить такой вывод:

New jekyll site installed in /home/8host/www.

Команда new создает следующие каталоги и файлы:

...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site

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

Примечание: tree – полезная команда, она проверяет структуру файлов и каталогов из командной строки. Вы можете установить ее с помощью следующей команды:

sudo apt install tree

Чтобы использовать ее, перейдите в нужный каталог и введите tree или явно укажите путь к начальной точке: tree /home/8host/www

4: Запуск веб-сервера Jekyll

Встроенный легкий веб-сервер Jekyll предназначен для среды разработки сайтов: он позволяет отслеживать файлы в каталоге и автоматически восстанавливать статический сайт после сохранения всех изменений.

Поскольку мы работаем на удаленном сервере, мы укажем адрес хоста, чтобы просматривать сайт с нашего локального компьютера. Если вы работаете на локальном компьютере, вы можете запустить команду jekyll serve без настройки хоста и подключиться по ссылке http://localhost:4000.

cd ~/www
jekyll serve --host=203.0.113.0
Configuration file: /home/8host/www/_config.yml
Source: /home/8host/www
Destination: /home/8host/www/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 0.645 seconds.
Auto-regeneration: enabled for '/home/8host/www'
Server address: http://203.0.113.0:4000/
Server running... press ctrl-c to stop.

При вызове команды jekyll serve Jekyll обрабатывает конфигурационные файлы и файлы с контентом и собирает их в новый каталог _site, откуда он обслуживает контент.

...
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
├── _posts
│   └── 2020-05-29-welcome-to-jekyll.markdown
└── _site

├── 404.html


├── about


│   └── index.html


├── assets


│   ├── main.css


│   │   ├── main.css.map


│   └── minima-social-icons.svg


├── feed.xml


├── index.html


└── jekyll


└── update


└── 2020


└── 05


└── 29


└── welcome-to-jekyll.html

Теперь Jekyll будет следить за изменениями в текущем каталоге www. Как только вы измените публикацию или страницу и сохраните ее, статический сайт будет автоматически пересобран с учетом этих изменений, поэтому важно не вносить изменения непосредственно в файлы в папке _site.

Если оставить терминал с сервером разработки открытым и запущенным на переднем плане, по мере добавления страниц и публикаций (и изменения контента) мы будем сразу же получать видеть их на экране.

Примечание: Если вы работаете с большим сайтом, добавьте флаг –incremental – он может ускорить пересборку сайта после внесения изменений. Этот флаг ускоряет этот процесс, поскольку пересобирает только измененные файлы. Для маленького сайта эта функция обычно не нужна. Узнать больше об этой экспериментальной функции можно на веб-сайте Jekyll.

Теперь наш сайт доступен. Мы можем посетить его в браузере по адресу сервера и порту из вывода команды jekyll serve.

Заключение

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

Читайте также: Стандартный контент Jekyll

Tags: , ,

Добавить комментарий