Перейти к содержимому

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

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

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

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

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

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

    # создать новый проект с npm
npm create astro@latest

  2. Подтвердите выполнение команды клавишей y, чтобы установить create-astro

  3. При запросе «Where would you like to create your new project?» (Где вы хотите создать новый проект?) введите имя папки, чтобы создать новый каталог для проекта, например./tutorial

    :::noteНовый проект Astro может быть создан только в абсолютно пустой папке, поэтому выберите для своей папки имя, которого ещё не существует!:::

  4. Когда появится вопрос «Would you like to install dependencies?» (Хотите ли вы установить зависимости?), введите y.

  5. Когда появится запрос «Would you like to initialize a new git repository?» (Хотите ли вы инициализировать новый git-репозиторий?), введите y.

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

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

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

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

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

    user@machine:~/tutorial$

    :::tip[Сочетание клавиш]Чтобы переключить видимость терминала, используйте Ctrl + J (macOS: Cmd ⌘ + J).:::

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

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

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

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

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

    npm run dev

    Теперь в терминале должно появиться подтверждение того, что Astro работает в режиме dev. 🚀

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

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

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

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

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

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

:::tip[Использование сервера разработки Astro]

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

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

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

Контрольный список

Ресурсы

Внести свой вклад Сообщество Поддержать