Развертывание сайта на VitePress
Следующие руководства основаны на некоторых общих предположениях:
Сайт VitePress находится в директории
docs
вашего проекта.Вы используете директорию по умолчанию для вывода сборки (
.vitepress/dist
).VitePress установлен как локальная зависимость в вашем проекте, и вы настроили следующие скрипты в вашем
package.json
:json{ "scripts": { "docs:build": "vitepress build docs", "docs:preview": "vitepress preview docs" } }
Сборка и локальное тестирование
Запустите эту команду для сборки документации:
sh$ npm run docs:build
После сборки предварительно просмотрите его локально, запустив:
sh$ npm run docs:preview
Команда
preview
запустит локальный статический веб-сервер, который будет обслуживать директорию вывода.vitepress/dist
по адресуhttp://localhost:4173
. Вы можете использовать это, чтобы убедиться, что все выглядит хорошо, перед публикацией в продакшн.Вы можете настроить порт сервера, передав
--port
в качестве аргумента.json{ "scripts": { "docs:preview": "vitepress preview docs --port 8080" } }
Теперь метод
docs:preview
запустит сервер по адресуhttp://localhost:8080
.
Установка публичного базового пути
По умолчанию мы предполагаем, что сайт будет развернут в корневом пути домена (/
). Если ваш сайт будет обслуживаться по подпути, например, https://mywebsite.com/blog/
, тогда вам нужно установить опцию base
в '/blog/'
в конфигурации VitePress.
Пример: Если вы используете Github (или GitLab) Pages и развертываете в user.github.io/repo/
, тогда установите ваш base
в /repo/
.
HTTP заголовки кэша
Если у вас есть контроль над HTTP-заголовками на вашем продакшн-сервере, вы можете настроить заголовки cache-control
для достижения лучшей производительности при повторных посещениях.
Продакшн-сборка использует хешированные имена файлов для статических активов (JavaScript, CSS и других импортированных активов, не из public
). Если вы проверите предварительный просмотр продакшна, используя вкладку сети в инструментах разработчика вашего браузера, вы увидите файлы вроде app.4f283b18.js
.
Этот хеш 4f283b18
генерируется из содержимого этого файла. Гарантируется, что один и тот же хешированный URL будет обслуживать одно и то же содержимое файла - если содержимое изменится, URL тоже изменится. Это означает, что вы можете безопасно использовать самые сильные заголовки кэша для этих файлов. Все такие файлы будут размещены в assets/
в выходной директории, поэтому вы можете настроить следующий заголовок для них:
Cache-Control: max-age=31536000,immutable
Пример файла _headers
для Netlify
/assets/*
cache-control: max-age=31536000
cache-control: immutable
Примечание: файл _headers
должен быть размещен в публичной директории - в нашем случае, docs/public/_headers
- чтобы он был скопирован без изменений в выходную директорию.
Пример конфигурации Vercel в vercel.json
{
"headers": [
{
"source": "/assets/(.*)",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000, immutable"
}
]
}
]
}
Примечание: файл vercel.json
должен быть размещен в корне вашего репозитория.
Руководства по платформам
Netlify / Vercel / Cloudflare Pages / AWS Amplify / Render
Настройте новый проект и измените эти настройки, используя вашу панель управления:
- Команда сборки:
npm run docs:build
- Выходная директория:
docs/.vitepress/dist
- Версия Node:
18
(или выше)
WARNING
Не включайте опции вроде Auto Minify для HTML-кода. Это удалит комментарии из вывода, которые имеют значение для Vue. Вы можете увидеть ошибки несоответствия гидратации, если они будут удалены.
GitHub Pages
Создайте файл с именем
deploy.yml
внутри директории.github/workflows
вашего проекта с содержимым, подобным этому:yaml# Пример рабочего процесса для сборки и развертывания сайта VitePress на GitHub Pages # name: Развертывание сайта VitePress на страницах on: # Запускается при пушах, нацеленных на ветку `main`. Измените это на `master`, если вы # используете ветку `master` в качестве основной ветки. push: branches: [main] # Позволяет вам запускать этот рабочий процесс вручную из вкладки Действия workflow_dispatch: # Устанавливает разрешения GITHUB_TOKEN для развертывания на GitHub Pages permissions: contents: read pages: write id-token: write # Разрешает только одно одновременное развертывание, пропуская запущенные между запущенным в данный момент и последним поставленным в очередь. # Однако НЕ отменяйте запущенные процессы, так как мы хотим позволить этим развертываниям в продакшне завершиться. concurrency: group: pages cancel-in-progress: false jobs: # Задание сборки build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: fetch-depth: 0 # Не нужно, если lastUpdated не включен # - uses: pnpm/action-setup@v2 # Раскомментируйте это, если вы используете pnpm # - uses: oven-sh/setup-bun@v1 # Раскомментируйте это, если вы используете Bun - name: Setup Node uses: actions/setup-node@v4 with: node-version: 20 cache: npm # или pnpm / yarn - name: Setup Pages uses: actions/configure-pages@v4 - name: Install dependencies run: npm ci # или pnpm install / yarn install / bun install - name: Build with VitePress run: | npm run docs:build # или pnpm docs:build / yarn docs:build / bun run docs:build touch docs/.vitepress/dist/.nojekyll - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: path: docs/.vitepress/dist # Задание развертывания deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} needs: build runs-on: ubuntu-latest name: Развертывание steps: - name: Развертывание на GitHub Pages id: deployment uses: actions/deploy-pages@v4
WARNING
Убедитесь, что опция
base
в вашем VitePress правильно настроена. Смотрите Установка публичного базового пути для получения дополнительной информации.В настройках вашего репозитория в пункте меню "Страницы" выберите "GitHub Actions" в "Сборка и развертывание > Источник".
Отправьте ваши изменения в ветку
main
и дождитесь завершения рабочего процесса GitHub Actions. Вы должны увидеть ваш сайт, развернутый по адресуhttps://<username>.github.io/[repository]/
илиhttps://<custom-domain>/
в зависимости от ваших настроек. Ваш сайт будет автоматически развернут при каждом пуше в веткуmain
.
GitLab Pages
Установите
outDir
в конфигурации VitePress на../public
. Настройте опциюbase
на'/<repository>/'
, если вы хотите развернуть наhttps://<username>.gitlab.io/<repository>/
.Создайте файл с именем
.gitlab-ci.yml
в корне вашего проекта с содержимым ниже. Это построит и развернет ваш сайт каждый раз, когда вы вносите изменения в ваше содержимое:yamlimage: node:18 pages: cache: paths: - node_modules/ script: # - apk add git # Раскомментируйте это, если вы используете маленькие docker-образы, например, alpine, и lastUpdated включен - npm install - npm run docs:build artifacts: paths: - public only: - main
Azure Static Web Apps
Следуйте официальной документации.
Установите эти значения в вашем конфигурационном файле (и удалите те, которые вам не нужны, например,
api_location
):app_location
:/
output_location
:docs/.vitepress/dist
app_build_command
:npm run docs:build
Firebase
Создайте
firebase.json
и.firebaserc
в корне вашего проекта:firebase.json
:json{ "hosting": { "public": "docs/.vitepress/dist", "ignore": [] } }
.firebaserc
:json{ "projects": { "default": "<YOUR_FIREBASE_ID>" } }
После выполнения
npm run docs:build
запустите эту команду для развертывания:shfirebase deploy
Surge
После выполнения
npm run docs:build
запустите эту команду для развертывания:shnpx surge docs/.vitepress/dist
Heroku
Следуйте документации и руководству, предоставленным в
heroku-buildpack-static
.Создайте файл под названием
static.json
в корне вашего проекта со следующим содержимым:json{ "root": "docs/.vitepress/dist" }
Edgio
См. Создание и развертывание приложения VitePress на Edgio.
Kinsta Static Site Hosting
Вы можете развернуть свой сайт Vitepress на Kinsta следуя этим инструкциям.