Пропустить до содержимого

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

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

  • Запустите мастер настройки Astro для создания нового проекта Astro
  • Запустите Astro-сервер в среде разработки (dev)
  • Просмотрите предварительный просмотр вашего веб-сайта в браузере

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

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

    Terminal window
    # создать новый проект с npm
    npm create astro@latest
  2. Подтвердите y, чтобы установить create-astro

  3. При запросе «Куда вы хотели бы создать свой новый проект?» введите имя папки для создания новой папки для вашего проекта, например ./tutorial

  1. Вы увидите краткий список стартовых шаблонов для выбора. Используйте клавиши со стрелками (вверх и вниз) для перехода к шаблону «Empty», а затем нажмите клавишу Enter, чтобы отправить свой выбор.

  2. Когда на запрос ответите утвердительно и введите букву y, «Хотели бы вы установить зависимости?».

  3. Когда на запрос ответите отрицательно и введите букву n, «Предполагаете ли вы использовать TypeScript?».

  4. Когда на запрос ответите утвердительно и введите букву y, «Хотели бы вы инициализировать новый репозиторий git?».

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

  1. Откройте VS Code. Вам будет предложено открыть папку. Выберите папку, которую вы создали в процессе мастера настройки.

  2. Если это ваш первый запуск проекта Astro, вы увидите уведомление с запросом о установке рекомендуемых расширений. Нажмите, чтобы увидеть рекомендуемые расширения, и выберите расширение Astro language support extension. Это обеспечит подсветку синтаксиса и автозаполнение для вашего кода Astro.

  3. Убедитесь, что терминал виден и что вы можете увидеть командную строку, например:

    Terminal window
    user@machine:~/tutorial$

Теперь вы можете использовать терминал, встроенный прямо в это окно, вместо приложения Terminal на вашем компьютере в этом учебнике.

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

  1. Запустите команду для запуска Astro в режиме разработки, набрав в терминале VS Code:

    Terminal window
    npm run dev

    Теперь вы должны увидеть подтверждение в терминале, что Astro запущен в режиме dev mode. 🚀

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

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

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

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

Пустая белая страница со словом Astro в верхней части.