В этом посте мы покажем вам, как быстро построить и развернуть базовый сайт, используя Astro и NetLify. Это простой способ вывести ваш сайт в прямом эфире.
Вы можете быстро создавать и запустить веб -сайты, используя Astro и NetLify. Astro использует подход с нулевым джавазиписом. Это означает, что он не будет отправлять никакого JavaScript в браузер, если вы не решите добавить его (используя простые JavaScript или фреймворки, такие как React или Vue). Вместо этого он превращает все компоненты в статический HTML, когда сайт построен. Этот тип сборки помогает страницам загружаться быстрее, работать более плавно и использовать меньше мощности или данных. Это отлично подходит для таких вещей, как блоги, документы и маркетинговые сайты.
Этот стек является современной альтернативой для знакомых устаревших стеков, таких как WordPress и создание приложения React. В отличие от WordPress, Astro не полагается на плагины или PHP, делая сайты быстрее и безопаснее. По сравнению с созданием приложения React, Astro по умолчанию по умолчанию выпускает меньше JavaScript, что приводит к меньшим пакетам и более быстрой загрузке страниц.
Этот учебник проведет вас через создание базового сайта на Astro и развернувшись на NetLify через пять минут.
Начнем!
Предварительные условия
Убедитесь, что у вас установлено следующее:
- Node.js (рекомендуется версия 18+)
- Git
- VS -код (или любой IDE; я работаю в коде VS)
- GitHub CLI и аккаунт GitHub
- Плагин Astro для кода VS
- NetLify Login с помощью GitHub подключено
Строить с Astro
Как только ваша новая папка проекта в вашем IDE будет открыта, откройте новый терминал. Первая команда терминала:
npm создать Astro@Last
Это начнет ваш проект Astro. Это запустит несколько подсказок.
- Принять название проекта.
- Выберите шаблон блога.
- Установите зависимости — да.
- Инициализировать новый репозиторий GIT — да.
Далее нам нужно зайти в наш новый репозиторий проекта:
CD Your-Project-Folder-name
Развернуть с помощью NetLify
Теперь нам нужно установить адаптер NetLify. Мы можем сделать это в терминале, используя следующую команду:
NPM установить @Astrojs/netLify
После завершения установки пришло время обновить наш файл Astro.config.mjs — файл конфигурации проекта. Вам нужно будет работать над этим файлом только при добавлении интеграции или настройки поведения сборки (аналогично Next.js’s next.config.js или Vite’s vite.config.js).
Astro.config.mjs будет выглядеть так:
Этот файл делает следующее:
- Импорт помощник для определения конфигурации Astro с безопасностью типа.
- Импортирует адаптер NetLify для развертывания Astro.
- Запускает конфигурацию Astro.
- Создает сайт для рендеринга на стороне сервера (необходимый для функций NetLify).
- Использует адаптер NetLify для оптимизации сборки для NetLify.
- Устанавливает базовый URL -адрес сайта для таких вещей, как STEMAP и ссылки.
Теперь пришло время запустить наш сервер Dev, чтобы убедиться, что все правильно подключено.
NPM запустить Dev
Если все работает правильно, вы увидите эту страницу:
Прежде чем мы пойдем дальше, давайте займем минуту, чтобы поговорить о маршрутизации. Проекты Astro используют систему маршрутизации на основе файлов. SRC/ Страницы/ Папка — это то, где живут ваши маршруты. Каждый файл, который вы добавляете здесь, становится страницей на вашем сайте. Например, src/pages/index.astro становится вашей домашней страницей, в то время как любой другой файл создает маршрут, основанный на его имени, например,/ваше имя.
src/ pages/ есть также там, где вы определяете структуру вашего сайта. Поскольку каждый файл становится своей собственной страницей, именно здесь вы можете настроить с помощью HTML, CSS и логики. Если вы хотите добавить интерактивность, именно здесь вы используете такие рамки, как React или Vue.
Поскольку мы пропускаем настройку в этом уроке и сосредотачиваемся на простоте сборки и развертывании, мы теперь готовы создать репо Github и развернуть NetLify.
Нам нужно будет работать напрямую в сети для этой следующей части.
Перейдите, как только вы входите в систему, вы увидите синюю кнопку с правой стороны в середине страницы с надписью «Добавить новый проект ^». Нажмите на ^ и импортируйте существующий проект.
Развернуть с GitHub. Прокрутите, пока не увидите название этого проекта и нажмите его. Создайте название проекта NetLify, а затем просмотрите настройки сборки (предварительная заполнение подходит для этого проекта). Прокрутите внизу и нажмите Deploy Project -name.
Как только сборка будет завершена, вы увидите этот экран:
Как только ваш сайт будет развернут, NetLify автоматически обновляет его с каждым новым толчком к GitHub.
При работе с Astro и NetLify есть гораздо больше, но этот урок поможет вам начать.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Джессика Вахтел — писатель по маркетингу разработчиков в InfluxData, где она создает контент, который помогает сделать данные о мире временных рядов более понятными и доступными. Джессика имеет опыт работы в разработке программного обеспечения и технической журналистике. Подробнее от Джессики Вахтел
