INTEGRITY Документация

← Cloudflare Pages / pages / framework-guides

Eleventy

Eleventy ↗ это простой генератор статических сайтов. В этом руководстве вы создадите новый сайт на Eleventy и развернёте его с помощью Cloudflare Pages. Вы будете использовать eleventy CLI для создания нового сайта на Eleventy.

Установка Eleventy

Установите eleventy CLI, выполнив в терминале следующую команду:

npm install -g @11ty/eleventy

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

Существует множество стартовые проекты ↗ доступный на сайте Eleventy. В качестве примера используйте eleventy-base-blog проект, выполнив следующие команды в терминале:

git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
cd my-blog-name
npm install

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

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

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

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

Создание репозитория GitHub

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

git remote set-url origin https://github.com/yourgithubusername/githubrepo
git branch -M main
git push -u origin main

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

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

  1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

    Перейдите в Workers & Pages ↗

  2. Выберите Создать приложение.

  3. Выберите Pages на вкладке.

  4. Выберите Импорт существующего репозитория Git.

  5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

  6. В Настройки сборки разделе выберите Eleventy как ваш Framework preset. Ваш выбор предоставит следующую информацию:

Параметр конфигурацииЗначение
Продакшен-веткаmain
Команда сборкиnpx @11ty/eleventy
Директория сборки_site

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

Подробнее

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