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

Development, Ubuntu | Amber | Комментировать запись

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

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

Требования

Для работы вам понадобится сервер Ubuntu 20.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

Это не настоящие файлы веб-сайта? F исходные файлы, которые 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