Отметка: Модуль 1 - Настройка
Теперь, когда вы знаете, что будете создавать, пришло время настроить все необходимые инструменты!
В этом модуле мы покажем вам, как настроить среду разработки и развернуть сайт на Netlify. Переходите к Модулю 2, если вы уже освоились с окружением и рабочим процессом.
Хотите пройти этот учебник в онлайн-редакторе кода? Следуйте инструкциям ниже, чтобы начать работу в Google IDX.
Использование Google IDX: Следуйте этим инструкциям, а затем переходите непосредственно к Модулю 2!
Настройте IDX
-
Перейдите по внешней ссылке, чтобы открыть шаблон «Empty Project» в новой рабочей области в IDX.
-
Следуйте инструкции, чтобы войти в свою учётную запись Google, если вы ещё не авторизовались.
-
Введите имя для вашего проекта, если хотите изменить его по умолчанию с «Empty Project». Нажмите Создать.
-
Дождитесь создания рабочей области. Это может занять 30–60 секунд. Если всё пройдет успешно, вы увидите проект Astro, загруженный в онлайн-редакторе кода.
-
Дождитесь, пока IDX запустит два скрипта: один для установки Astro, а другой для запуска сервера разработки. Обратите внимание, что вы можете кратковременно увидеть сообщение о том, что ваша рабочая область «не смогла найти Astro», если она загрузится до завершения установки Astro. Это сообщение можно проигнорировать и закрыть, если оно не исчезнет само.
Внесите изменения
Если всё пройдет успешно, вы увидите код файла src/pages/index.astro
, открытый в разделённом экране вместе с живым предпросмотром веб-сайта. Следуйте инструкции этапа Напишите свою первую строку в Astro, и внесите изменение в этот файл.
Создайте репозиторий на GitHub
-
Перейдите к пункту «Source Control» (Управление исходным кодом) в вертикальном меню или откройте его с помощью CTRL + SHIFT + G.
-
Выберите опцию «Publish to GitHub» (Опубликовать в GitHub). Это создаст новый репозиторий в вашем аккаунте GitHub.
-
Следуйте инструкциям, чтобы войти в свой аккаунт GitHub.
-
После входа вернитесь на вкладку IDX, и вам будет предложено выбрать имя для нового репозитория, а также указать, должен ли он быть приватным или публичным. Для этого руководства вы можете выбрать любое имя и тип репозитория.
-
IDX выполнит начальный коммит и отправит изменения в ваш новый репозиторий GitHub.
-
В дальнейшем, когда у вас появятся изменения, которые нужно закоммитить в GitHub, значок «Source Control» будет отображать число. Это количество файлов, изменённых с момента последнего коммита. Перейдя на эту вкладку и выполнив два шага (коммит и публикация), вы сможете ввести сообщение коммита и обновить репозиторий.
Разверните ваш сайт
Если вы хотите развернуть сайт на Netlify, перейдите к этапу Модуля 1 — Разместите свой сайт в интернете.
В противном случае перейдите к Модулю 2, чтобы начать создавать с Astro!
Что мы сделаем?
Заголовок раздела Что мы сделаем?В этом модуле вы создадите новый проект, который будет храниться на GitHub и подключен к Netlify.
По мере написания кода вы будете периодически фиксировать свои изменения на GitHub. Netlify будет использовать файлы в вашем репозитории GitHub для создания вашего сайта, а затем опубликует его в интернете по уникальному адресу, где любой желающий сможет его просмотреть.
Каждый раз, когда вы фиксируете изменения на GitHub, в Netlify отправляется уведомление. Затем Netlify автоматически пересоберет и снова опубликует ваш сайт, чтобы отобразить эти изменения.