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

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

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

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

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

Заголовок раздела Запуск мастера настройки 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

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

  5. Когда запрос спросит вас, планируете ли вы писать на TypeScript, введите n.

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

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

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

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

Заголовок раздела Откройте ваш проект в VS Code

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

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

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

    Окно терминала
    user@machine:~/tutorial$

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

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

Заголовок раздела Запуск 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 вверху.

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы