← Cloudflare Pages / pages / framework-guides

Jekyll

Jekyll ↗ это фреймворк с открытым исходным кодом для создания сайтов на основе Markdown с шаблонами Liquid. В этом руководстве вы создадите новое приложение Jekyll и развернёте его с помощью Cloudflare Pages. Вы используете jekyll CLI для создания нового сайта на Jekyll.

Установка Jekyll

Jekyll написан на Ruby, поэтому вам потребуется рабочая установка Ruby, например rbenv, чтобы установить Jekyll.

Чтобы установить Ruby на компьютер, следуйте rbenv инструкции по установке ↗ и выберите актуальную версию Ruby, выполнив rbenv в терминале. Установленная версия Ruby также будет использована для настройки развертывания Pages для вашего приложения.

rbenv install <RUBY_VERSION> # For example, 3.1.3

После установки Ruby можно установить jekyll Ruby-гем:

gem install jekyll

Создание нового проекта

После установки Jekyll можно создать новый проект, выполнив команду jekyll new в терминале:

jekyll new my-jekyll-site

Создайте базовый index.html в только что созданной папке, чтобы наполнить сайт содержимым:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello from Cloudflare Pages</title>
	</head>
	<body>
		<h1>Hello from Cloudflare Pages</h1>
	</body>
</html>

При желании для нового сайта на Jekyll можно использовать тему, чтобы сразу получить хорошие настройки оформления по умолчанию. Например, minimal-mistakes ↗ тема имеет «Начиная с jekyll new" ↗ раздел, который поможет вам добавить тему на новый сайт.

Прежде чем продолжить

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создайте репозиторий GitHub

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Если вы переносите существующий проект Jekyll на Pages, убедитесь, что ваш Gemfile закоммичен в составе вашей кодовой базы. Pages проверит файл Gemfile и выполнит bundle install чтобы установить необходимые для проекта зависимости, включая jekyll gem.

Развернуть с помощью Cloudflare Pages

Чтобы развернуть сайт в Pages:

На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.
Перейдите в Workers & Pages ↗
Выберите Создать приложение.
Выберите Pages на вкладке.
Выберите Импорт существующего репозитория Git.
Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.
В Настройка сборок и деплоев раздел и укажите следующую информацию:

Параметр конфигурации	Значение
Продакшен-ветка	`main`
Команда сборки	`jekyll build`
Директория сборки	`_site`

Добавьте переменная окружения которая соответствует версии Ruby, используемой у вас локально. Укажите её как RUBY_VERSION как для preview, так и для production развёртываний. Ниже 3.1.3 используется в качестве примера:

Переменная окружения	Значение
`RUBY_VERSION`	`3.1.3`

После настройки сайта вы можете запустить первый деплой. Вы увидите, как Cloudflare Pages устанавливает jekyll, зависимостей вашего проекта и сборку сайта перед его развертыванием.

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем сайте Jekyll, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы вы могли увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

Подробнее

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