Создайте свой первый проект Astro

Приготовьтесь…

Запустить мастер настройки create astro, чтобы создать новый проект Astro
Запустить сервер Astro в режиме разработки (dev)
Увидеть предварительный просмотр вашего сайта в браузере

Запуск мастера настройки Astro

Рекомендуемый способ создания нового сайта Astro — через наш мастер настройки create astro.

В командной строке своего терминала запустите следующую команду, используя ваш менеджер пакетов:
- npm
- pnpm
- Yarn
Terminal window
# создать новый проект с npm npm create astro@latest
Terminal window
# создать новый проект с pnpm pnpm create astro@latest
Terminal window
# создать новый проект с yarn yarn create astro
Подтвердите y, чтобы установить create-astro
При запросе “Where would you like to create your new project?”(Где вы хотите создать новый проект?) введите имя папки, чтобы создать новый каталог для проекта, например ./tutorial

Новый проект Astro может быть создан только в абсолютно пустой папке, поэтому выберите для своей папки имя, которого еще не существует!
Вы увидите краткий список стартовых шаблонов для выбора. Используйте клавиши со стрелками (вверх и вниз) для перехода к шаблону «Empty», а затем нажмите клавишу Enter, чтобы отправить свой выбор.
Когда запрос спросит вас, планируете ли вы писать на TypeScript, введите n.
Когда появится вопрос “Would you like to install dependencies?”(Хотите ли вы установить зависимости?), введите y.
Когда появится запрос “Would you like to initialize a new git repository?”(Хотите ли вы инициализировать новый git-репозиторий?), введите y.

Когда мастер установки завершен, вам больше не понадобится этот терминал. Теперь вы можете открыть VS Code, чтобы продолжить.

Откройте ваш проект в VS Code

Откройте VS Code. Вам будет предложено открыть папку. Выберите папку, которую вы создали в процессе мастера настройки.
Если вы впервые открываете проект Astro, вы должны увидеть уведомление, спрашивающее, хотите ли вы установить рекомендуемые расширения. Щелкните, чтобы увидеть рекомендуемые расширения, и выберите Astro language support extension. Это обеспечит подсветку синтаксиса и автозавершение кода в Astro.
Убедитесь, что терминал виден и что вы можете увидеть командную строку, например:
Terminal window
```
user@machine:~/tutorial$
```
Чтобы переключить видимость терминала, используйте Ctrl + J (macOS: Cmd ⌘ + J).

Теперь вы можете использовать терминал, встроенный прямо в это окно, а не приложение “Терминал” на вашем компьютере до конца этого пособия.

Запуск Astro в режиме разработки

Чтобы просматривать файлы проекта как веб-сайт во время работы, вам нужно, чтобы Astro работал в режиме разработки (dev).

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

Запустите команду для запуска Astro в режиме разработки, набрав в терминале VS Code:
- npm
- pnpm
- Yarn
Terminal window
npm run dev
Terminal window
pnpm run dev
Terminal window
yarn run dev
Теперь в терминале должно появиться подтверждение того, что Astro работает в режиме dev. 🚀

Просмотрите предварительный вариант вашего сайта

Файлы вашего проекта содержат весь код, необходимый для отображения веб-сайта Astro, но браузер отвечает за отображение вашего кода в виде веб-страниц.

Щелкните на ссылке localhost в окне терминала, чтобы увидеть живой предварительный просмотр вашего нового сайта Astro!

(По умолчанию Astro использует http://localhost:4321, если доступен порт 4321).

Вот как должен выглядеть стартовый сайт Astro “Empty Project” в предварительном просмотре браузера:

Во время работы сервера Astro в режиме разработки вы НЕ сможете выполнять команды в окне терминала. Вместо этого на этой панели вы получите обратную связь в процессе предварительного просмотра сайта.

Вы можете остановить сервер разработки в любое время и вернуться к командной строке, нажав Ctrl + C в терминале.

Иногда сервер разработки останавливается самостоятельно во время работы. Если ваш предварительный просмотр перестал работать, вернитесь в терминал и перезапустите сервер разработки, набрав npm run dev.