Создание и запуск проекта VitePress

Что такое VitePress?

VitePress — это генератор статических сайтов на основе Vite, разработанный для создания документации. VitePress работает с Vue, предоставляя чрезвычайно быструю скорость сборки и опыт разработки. Он предлагает простой и мощный API, что делает создание и поддержку документации очень легкими.

Основные характеристики и преимущества VitePress

• Быстрый опыт разработки: VitePress использует Vite как основное средство сборки, обеспечивающее мгновенные обновления и быструю скорость сборки.
• Простая конфигурация: С помощью простого конфигурационного файла пользователи могут быстро настроить и кастомизировать свой сайт документации.
• Мощные расширения Markdown: Поддержка компонентов Vue и пользовательских плагинов Markdown делает написание документации гораздо более гибким и мощным.
• Встроенная SEO-оптимизация: Автоматически генерируемая карта сайта и оптимизированная HTML структура повышают удобство для поисковых систем.
• Минимальный размер пакета: Благодаря технологии Tree-shaking, сгенерированные статические файлы очень малы и быстро загружаются.

Использование VitePress может помочь разработчикам быстро создать высокопроизводительный сайт документации.

Создание и запуск проекта VitePress с помощью ServBay

В этой статье мы будем использовать среду Node.js, предоставляемую ServBay, чтобы создать и запустить проект VitePress. Мы будем использовать функцию «хост» от ServBay для настройки веб-сервера и обеспечения доступа к проекту через обратный прокси и сервис статических файлов.

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

1. Инициализация проекта

   Сначала, убедитесь, что вы уже установили среду Node.js, предоставляемую ServBay. Затем используйте следующие команды, чтобы инициализировать новый проект VitePress:

   cd /Applications/ServBay/www
   mkdir servbay-vitepress-app
   cd servbay-vitepress-app
   npm add -D vitepress
   npx vitepress init

   Следуйте указаниям, вводя информацию о проекте и выбирая другие опции, если необходимо:

    ┌  Добро пожаловать в VitePress!
    │
    ◇  Где VitePress должен инициализировать конфигурацию?
    │  ./docs
    │
    ◇  Название сайта:
    │  Пример VitePress от ServBay
    │
    ◇  Описание сайта:
    │  Пример сайта VitePress от ServBay
    │
    ◇  Тема:
    │  Тема по умолчанию
    │
    ◇  Использовать TypeScript для файлов конфигурации и темы?
    │  Да
    │
    ◇  Добавить скрипты npm VitePress в package.json?
    │  Да
    │
    └  Готово! Теперь запустите npm run docs:dev и начните писать.

Изменение содержания проекта VitePress

1. Изменение файла docs/index.md

   Откройте файл docs/index.md, измените содержание так, чтобы страница выводила «Hello ServBay!»

   # Hello ServBay!
   
   Добро пожаловать в использование ServBay для запуска сайта документации VitePress.

Вход в режим разработки

1. Запуск сервера разработки

   Запустите сервер разработки и укажите порт (например: 8585):

   npm run docs:dev -- --port 8585

   Это запустит локальный сервер разработки и откроет порт 8585.

2. Настройка обратного прокси в ServBay

   Используйте функцию «хост» от ServBay, чтобы получить доступ к серверу разработки через обратный прокси. В настройках «хоста» ServBay добавьте новый обратный прокси:

   • Имя: Мой первый сайт разработки VitePress
   • Домен: servbay-vitepress-test.dev
   • Тип хоста: Обратный прокси
   • IP-адрес: 127.0.0.1
   • Порт: 8585

   Подробные инструкции по настройке см. в разделе Добавление сайта для разработки с использованием Node.js.

3. Доступ в режим разработки

   Откройте браузер и перейдите на https://servbay-vitepress-test.dev, чтобы увидеть проект в реальном времени. Поскольку ServBay поддерживает пользовательские домены и бесплатные SSL-сертификаты, вы получите более высокий уровень безопасности.

Сборка для производственного окружения

1. Сборка для производственного окружения

   Когда разработка завершена, используйте следующую команду для сборки продукта:

   npm run docs:build

   После сборки, сгенерированные статические файлы будут находиться в каталоге docs/.vitepress/dist.

2. Настройка службы статических файлов

   Используйте функцию «хост» от ServBay, чтобы получить доступ к продукту через службу статических файлов. В настройках «хоста» ServBay добавьте новый статический сайт:

   • Имя: Мой первый производственный сайт VitePress
   • Домен: servbay-vitepress-test.prod
   • Тип хоста: Статический
   • Корневая директория веб-сайта: /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

3. Доступ к производственному режиму

   Откройте браузер и перейдите на https://servbay-vitepress-test.prod, чтобы увидеть собранную версию сайта. Благодаря использованию пользовательских доменов и бесплатных SSL-сертификатов от ServBay, ваш сайт будет иметь высокую безопасность и доверие.

Работа в режиме Чистые URL

Если VitePress работает в режиме Чистые URL (т.е. cleanUrls: true), в настройках «хоста» ServBay выполните следующую настройку:

• Имя: Мой первый производственный сайт VitePress
• Домен: servbay-vitepress-test.prod
• Пользовательские настройки: Отметьте
• Конфигурация Caddy:

encode zstd gzip
import set-log servbay-vitepress-test.prod

tls internal

try_files {path} {path}/ {path}.html

root * /Applications/ServBay/www/servbay-vitepress-app/docs/.vitepress/dist

file_server

После сохранения вы сможете получить доступ к VitePress без .html в URL, например: https://servbay-vitepress-test.prod/path.

Следуя этим шагам, вы успешно создали и запустили проект VitePress, используя функции, предоставляемые ServBay, для управления и доступа к вашему проекту.