|
| 1 | +--- |
| 2 | +title: Разработка и сборка |
| 3 | +description: 'Как начать работу над новым проектом.' |
| 4 | +i18nReady: true |
| 5 | +--- |
| 6 | +import { Tabs, TabItem, FileTree, CardGrid, LinkCard, Steps } from '@astrojs/starlight/components'; |
| 7 | +import ReadMore from '~/components/ReadMore.astro'; |
| 8 | + |
| 9 | +После создания проекта Astro вы сможете сразу приступить к работе! 🚀 |
| 10 | + |
| 11 | +## Редактирование проекта |
| 12 | + |
| 13 | +Чтобы вносить изменения в проект, откройте папку проекта в вашем редакторе кода. Работа в режиме разработки с запущенным dev-сервером позволяет сразу видеть изменения на сайте по мере редактирования кода. |
| 14 | + |
| 15 | +Вы также можете [настроить параметры среды разработки](#настройка-среды-разработки), например, настроить TypeScript или установить официальные расширения редактора для Astro. |
| 16 | + |
| 17 | +### Запуск сервера разработки Astro |
| 18 | + |
| 19 | +Astro включает встроенный сервер для разработки со всем необходимым функционалом. Команда `astro dev` запустит локальный сервер, позволяя впервые увидеть ваш сайт в действии. |
| 20 | + |
| 21 | +Каждый стартовый шаблон содержит предустановленный скрипт, который автоматически выполнит `astro dev` за вас. После перехода в директорию проекта используйте предпочитаемый менеджер пакетов для запуска этой команды и старта сервера разработки Astro. |
| 22 | + |
| 23 | +<Tabs> |
| 24 | + <TabItem label="npm"> |
| 25 | + ```shell |
| 26 | + npm run dev |
| 27 | + ``` |
| 28 | + </TabItem> |
| 29 | + <TabItem label="pnpm"> |
| 30 | + ```shell |
| 31 | + pnpm run dev |
| 32 | + ``` |
| 33 | + </TabItem> |
| 34 | + <TabItem label="yarn"> |
| 35 | + ```shell |
| 36 | + yarn run dev |
| 37 | + ``` |
| 38 | + </TabItem> |
| 39 | +</Tabs> |
| 40 | + |
| 41 | + |
| 42 | +Всё работает? Отлично! Ваш проект теперь доступен по адресу [http://localhost:4321/](http://localhost:4321/) — открывайте его в браузере и смотрите результат! |
| 43 | + |
| 44 | +### Работа в режиме разработки |
| 45 | + |
| 46 | +Astro будет отслеживать изменения файлов в каталоге `src/` и обновлять предварительный просмотр сайта по мере сборки, поэтому вам не придётся перезапускать сервер при внесении изменений во время разработки. При работе dev-сервера вы всегда сможете увидеть в браузере актуальную версию вашего сайта. |
| 47 | + |
| 48 | +При просмотре сайта в браузере вам будет доступна [панель разработчика Astro](/ru/guides/dev-toolbar/). В процессе разработки она поможет вам проверить ваши [островки](/ru/concepts/islands/), выявить проблемы с доступностью и многое другое. |
| 49 | + |
| 50 | +Если после запуска dev-сервера вы не можете открыть свой проект в браузере, вернитесь в терминал, где вы выполняли команду `dev`, и проверьте отображаемые сообщения. Так вы поймёте, произошла ли ошибка или обслуживается ли ваш проект по URL-адресу, отличному от [http://localhost:4321/](http://localhost:4321/). |
| 51 | + |
| 52 | +## Сборка и предварительный просмотр вашего сайта |
| 53 | + |
| 54 | +Чтобы проверить версию вашего сайта, которая будет создана во время сборки, закройте сервер разработки (<kbd>Ctrl</kbd> + <kbd>C</kbd>) и запустите соответствующую команду сборки для вашего менеджера пакетов в терминале: |
| 55 | + |
| 56 | + <Tabs> |
| 57 | + <TabItem label="npm"> |
| 58 | + ```shell |
| 59 | + npm run build |
| 60 | + ``` |
| 61 | + </TabItem> |
| 62 | + <TabItem label="pnpm"> |
| 63 | + ```shell |
| 64 | + pnpm build |
| 65 | + ``` |
| 66 | + </TabItem> |
| 67 | + <TabItem label="yarn"> |
| 68 | + ```shell |
| 69 | + yarn run build |
| 70 | + ``` |
| 71 | + </TabItem> |
| 72 | + </Tabs> |
| 73 | + |
| 74 | +Astro создаст готовую к развёртыванию версию вашего сайта в отдельной папке (по умолчанию `dist/`), и вы сможете наблюдать за её развитием в терминале. Это предупредит вас о любых ошибках сборки проекта до его развёртывания в производство. Если TypeScript настроен на `strict` или `strictest`, сценарий `build` также проверит ваш проект на наличие ошибок типа. |
| 75 | + |
| 76 | +Когда сборка будет завершена, запустите соответствующую команду `preview` (например, `npm run preview`) в терминале, и вы сможете просмотреть собранную версию сайта локально в том же окне предварительного просмотра браузера. |
| 77 | + |
| 78 | +Обратите внимание, что в этом случае ваш код просматривается в том виде, в котором он существовал на момент последнего запуска команды сборки. Это позволит вам увидеть, как будет выглядеть ваш сайт, когда он будет развёрнут в интернете. Любые последующие изменения, внесённые в код после сборки, **не** будут отражены во время предварительного просмотра сайта, пока вы не выполните команду сборки снова. |
| 79 | + |
| 80 | +Используйте комбинацию <kbd>Ctrl</kbd> + <kbd>C</kbd>, чтобы выйти из предварительного просмотра и запустить другую команду терминала, например, перезапустить сервер разработки, чтобы вернуться в [работу в режиме разработки](#работа-в-режиме-разработки), который обновляется по мере редактирования и отображает предварительный просмотр изменений вашего кода. |
| 81 | + |
| 82 | +<ReadMore>Узнайте больше об [интерфейсе командной строки Astro](/ru/reference/cli-reference/) и командах терминала, которые вы будете использовать при сборке с помощью Astro.</ReadMore> |
| 83 | + |
| 84 | +:::tip |
| 85 | +Возможно, вы захотите [развернуть ваш новый сайт сразу же](/ru/guides/deploy/), прежде чем вносить множество изменений в код. Это полезно для публикации минимальной рабочей версии сайта и может сэкономить время на устранении проблем с развёртыванием в будущем. |
| 86 | +::: |
| 87 | + |
| 88 | +## Следующие шаги |
| 89 | + |
| 90 | +Отлично! Теперь вы готовы начать строительство с помощью Astro! 🥳 |
| 91 | + |
| 92 | +Вот несколько вещей, которые мы рекомендуем изучить в следующий раз. Вы можете читать их в любом порядке. Вы можете даже оставить нашу документацию на некоторое время и поиграть в кодовой базе вашего нового проекта Astro, возвращаясь сюда всякий раз, когда у вас возникнут проблемы или вопросы. |
| 93 | + |
| 94 | +### Настройка среды разработки |
| 95 | + |
| 96 | +Изучите приведённые ниже руководства, чтобы улучшить свой опыт разработки. |
| 97 | + |
| 98 | +<CardGrid> |
| 99 | + <LinkCard |
| 100 | + title="Настройка редактора" |
| 101 | + description="Настройте редактор кода, чтобы улучшить свою работу и открыть новые возможности." |
| 102 | + href="/ru/editor-setup/" |
| 103 | + /> |
| 104 | + <LinkCard |
| 105 | + title="Панель разработчика" |
| 106 | + description="Изучите полезные функции панели инструментов разработчика." |
| 107 | + href="/ru/guides/dev-toolbar/" |
| 108 | + /> |
| 109 | + <LinkCard |
| 110 | + title="Настройка TypeScript" |
| 111 | + description="Настройте параметры для проверки типов, IntelliSense и многого другого." |
| 112 | + href="/ru/guides/typescript/" |
| 113 | + /> |
| 114 | +</CardGrid> |
| 115 | + |
| 116 | +### Изучите возможности Astro |
| 117 | + |
| 118 | +<CardGrid> |
| 119 | + <LinkCard |
| 120 | + title="Структура проекта" |
| 121 | + description="Разберитесь в организации файлов Astro с помощью руководства по структуре проекта." |
| 122 | + href="/ru/basics/project-structure/" |
| 123 | + /> |
| 124 | + <LinkCard |
| 125 | + title="Работа с коллекциями контента" |
| 126 | + description="Добавляйте контент на сайт с валидацией метаданных и автоматической типизацией." |
| 127 | + href="/ru/guides/content-collections/" |
| 128 | + /> |
| 129 | + <LinkCard |
| 130 | + title="Добавление переходов между страницами" |
| 131 | + description="Создавайте плавные анимации и переходы." |
| 132 | + href="/ru/guides/view-transitions/" |
| 133 | + /> |
| 134 | + <LinkCard |
| 135 | + title="Архитектура островков" |
| 136 | + description="Узнайте об архитектуре островков Astro." |
| 137 | + href="/ru/concepts/islands/" |
| 138 | + /> |
| 139 | +</CardGrid> |
| 140 | + |
| 141 | +### Пройдите вводное руководство |
| 142 | + |
| 143 | +Создайте полнофункциональный блог на Astro с нуля, используя наше [вводное руководство](/ru/tutorial/0-introduction/). |
| 144 | + |
| 145 | +Это отличный способ увидеть, как работает Astro, и пройти основы работы со страницами, макетами, компонентами, маршрутизацией, островками и прочим. Для начинающих разработчиков предусмотрен отдельный раздел с пошаговыми инструкциями по установке программ, регистрации в GitHub и публикации сайта. |
| 146 | + |
0 commit comments