Установка Jekyll и создание сайта в Ubuntu 16.04

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

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

Данное руководство поможет установить Jekyll 3.2.1 и создать тестовый сайт в Ubuntu 16.04.

Требования

• Сервер Ubuntu 16.04.
• Пользователь с доступом к команде sudo (об этом можно узнать здесь).

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

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

sudo apt-get update

Установите Ruby и библиотеки разработки make и gcc, чтобы скомпилировать библиотеки Jekyll.

sudo apt-get install ruby ruby-dev make gcc

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

sudo gem install jekyll bundler

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

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

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

sudo ufw status

В данном случае брандмауэр пропускает только трафик SSH:

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

Примечание: Правила брандмауэра могут отличаться. Возможно, на вашем сервере он отключен.

Чтобы получить доступ к веб-серверу разработки Jekyll, откройте порт 4000.

sudo ufw allow 4000

Снова проверьте состояние:

sudo ufw status
To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
4000                       ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)

Теперь брандмауэр не будет блокировать сервер Jekyll.

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

Откройте домашний каталог и запустите команду new, чтобы создать скаффолдинг сайта в подкаталоге www.

cd ~
jekyll new www
New jekyll site installed in /home/8host/www.

Jekyll задаёт тему по умолчанию (minima) в файле Gemfile. Чтобы установить тему, запустите Bundler:

cd ~/www
bundle install

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

. . .
Could not find gem 'minima' in any of the gem sources listed in
your Gemfile or available on this machine. (Bundler::GemNotFound)
. . .

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

.
├── about.md
├── _config.yml
├── css
│   └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
└── _posts

└── 2016-09-03-welcome-to-jekyll.markdown

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

Примечание: Для просмотра структуры каталогов и файлов существует удобная команда tree. Чтобы установить её, введите:

sudo apt-get install tree

Чтобы использовать эту команду, перейдите в каталог, который нужно просмотреть, и введите tree. Также можно задать путь к исходной точке (например, tree /home/8host/www).

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

nano ~/www/_config.yml

Найдите в файле строку:

url: "http://example.com" # the base hostname & protocol for your site

При использовании сервера разработки эта директива не нужна, её можно закомментировать.

#url: "http://example.com" # the base hostname & protocol for your site

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

3: Запуск тестового сайта

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

jekyll serve

а затем перейти по ссылке:

http://localhost:4000

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

cd ~/www
jekyll serve --host=111.0.111.0
8host@jekyll-apt:~/www$ jekyll serve /home/8host/www --host=111.0.111.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.32 seconds.
Auto-regeneration: enabled for '/home/8host/www'
Configuration file: /home/8host/www/_config.yml
Server address: http://111.0.111.0:4000/
Server running... press ctrl-c to stop.

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

.
├── about.md
├── _config.yml
├── css
│   └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│   └── 2016-09-06-welcome-to-jekyll.markdown
└── _site

├── about
│   └── index.html
├── css
│   └── main.css
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
└── jekyll

└── update

└── 2016

└── 09

└── 08

└── welcome-to-jekyll.html

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

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

Примечание: При работе с объёмным сайтом можно использовать флаг –incremental, чтобы ускорить обновление страниц. Больше об этой функции можно узнать на сайте Jekyll.

Теперь сайт доступен в браузере. Чтобы открыть его, введите ссылку, указанную в выводе команды jekyll serve:

http://111.0.111.0:4000/

Заключение

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