← Cloudflare Pages / pages / framework-guides

VitePress

VitePress ↗ это генератор статических сайтов ↗ (SSG), предназначенный для создания быстрых сайтов с акцентом на контент. VitePress берет исходный контент, написанный на Markdown ↗, применяет к нему тему и создаёт статические HTML страницы, которые можно легко развернуть где угодно.

В этом руководстве вы создадите новый проект VitePress и развернете его с помощью Cloudflare Pages.

VitePress поставляется с мастером настройки командной строки, который поможет создать базовый проект.

Чтобы создать новый проект VitePress, выполните в терминале следующую команду:

npx vitepress@latest init

Среди прочего мастер настройки спросит, в каком каталоге сохранить новый проект, убедитесь, что вы находитесь в каталоге проекта, и установите vitepress зависимость следующей командой:

npm i -D vitepress@latest

Наконец, создайте .gitignore файл следующим содержимым:

node_modules
.vitepress/cache
.vitepress/dist

Этот шаг гарантирует, что ненужные файлы не попадут в git репозиторий проекта (который мы настроим далее).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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