Попробовал создать свой сайт с помощью Astro — вот что получилось

Я веду небольшой сайт на Neocities под названием Whistling Nose Games, Music, and Multimedia. В прошлом году, во время простоя, я занялся переобучением веб-дизайну, CSS и JavaScript, создавая абсурдные игры и музыку. Теперь я решил обновить свой сайт, и мой друг, обладающий великолепными навыками дизайна, посоветовал мне использовать Astro для редизайна. Я попробовал, и результат оказался довольно неплохим.

Astro — это веб-фреймворк для статических сайтов

Под капотом много интересного

Кредит: David J. Buck/How-To Geek

Astro позиционирует себя как "фреймворк для контентных сайтов". Это JavaScript фреймворк, который помогает пользователям создавать статические, насыщенные контентом сайты, отделяя интерактивные элементы от самого контента.

Astro компилирует все элементы сайта (компоненты, макеты и Markdown файлы) на стороне сервера, что позволяет избежать нагрузки на браузер пользователя. Это впечатляющее зрелище в реальном времени. Фреймворк использует файловую маршрутизацию для генерации URL на основе структуры файлов. Он выполняет много работы в фоновом режиме.

Astro богат функционалом и фактически проводит пользователей через процесс создания своего первого сайта с его помощью. Также есть интеграционные функции для работы с ИИ (например, интеграция с Claude CLI), но я не тестировал их в этом проекте.

Перед тем как начать, я рекомендую пройти один из курсов Astro. Я прошел их перед созданием своей страницы, и это очень помогло.

Я использую Astro для тестового сборки обновления сайта

Тестовая страница поможет определить новое направление сайта

Обновление личного сайта не всегда становится приоритетом в работе. Я заметил, что счетчик посетителей не работает, а главная страница выглядит слишком просто для разнообразного контента, который она содержит.

Кроме того, я создал виртуальную музейную выставку для своей жены в подарок на годовщину, и хотел добавить её на сайт в конце месяца. Я завершил проект и добавил его как "секретную ссылку", осознав, что моему сайту нужно немного больше шлифовки. Один из посетителей также обратился ко мне из-за сломанного кода.

Так что я надеюсь, что Astro поможет мне это исправить.

Одна из идей, которую я задумал для своего сайта, — создать ироничный, смешной список, который никто не воспримет всерьез. Поэтому цель этого эксперимента с Astro — создать именно такую страницу и протестировать её перед добавлением на Neocities.

Установка происходит через командную строку

Или можно использовать онлайн-версию программы

Кредит: David J. Buck / How-To Geek

Чтобы установить Astro на Linux, сначала нужно установить Node.js. Используйте node -v и npm -v, чтобы проверить, установлены ли они. Если нет, установите их с помощью команды sudo apt install npm на Linux Mint Cinnamon. Получите нужную версию Node.js с помощью curl.

Установка и добавление различных модулей в Astro происходит в терминале. После установки Astro создаёт директорию для вашего проекта, и вы можете добавлять зависимости и фреймворки (все это подробно описано на их сайте) по мере необходимости. Я использовал команду npx astro add alpinjs, чтобы добавить фреймворк Alpine.js в свой проект. Я большой поклонник этого фреймворка, и собираюсь использовать его для обновления счетчика посетителей на своем сайте.

Astro также предлагает версию, которую можно использовать в браузере, если вы решите пойти этим путем.

Я тщательно спланировал свой дизайн перед загрузкой Astro

Подготовка — ключ к успешному использованию приложения

Кредит: David J. Buck / How-To Geek

Содержимое страницы уже существует, поэтому я сосредоточен только на дизайне и функциональности. Я хочу добавить интерактивный элемент, например, кнопку "дизлайк" (не будет кнопки "лайк", потому что так веселее). В дизайне мне нужен стиль конца 80-х с телевизионным статическим фоном и неяркими цветами.

Я планирую использовать серые границы, легкий сепийный фон, возможно, наложение телевизионного статического изображения (но не слишком отвлекающее), а текст будет бледно-зеленым. Заголовки будут в фиолетовых или маджентовых тонах, чтобы соответствовать теме страницы. Шрифты будут выделены цветом янтаря. Я также сделаю что-то интересное с заголовками.

С помощью Astro я могу сделать все это и даже больше.

Как только я начал, сборка шла быстро

Я разработал целую веб-страницу за половину времени, которое обычно трачу

Кредит: David J. Buck / How-To Geek

При установке Astro создаётся четыре различных папки в директории src. В них содержатся:

1. Assets
2. Components
3. Layouts
4. Pages

Папка Assets предназначена для изображений и шрифтов, которые вы хотите использовать. Components — для ваших повторно используемых элементов (например, кнопок, навигации и так далее). Layouts и Pages содержат ваш CSS и фактическое содержимое веб-страницы соответственно.

Я написал оригинальный список еще в январе, поэтому просто конвертировал его в Markdown и внес несколько правок. Затем я сохранил его как MD файл, используя Micro в терминале. Astro смотрит на имя файла, а не на его тип, поэтому не обязательно сохранять его как HTML.

Кредит: David J. Buck / How-To Geek

Затем я разработал свои CSS элементы, которые сохранил в папке Layouts, и создал простую кнопку JavaScript, которая превращается в ASCII-скелет, найденный на ASCII Art Archive. Я взял несколько изображений комиксов каждого персонажа и преобразовал их в градации серого, чтобы лучше вписать в эстетику. Я поместил их в папку Pages, чтобы они сосуществовали с моим Markdown файлом, чтобы упростить тестирование. Позже я перемещу их в Assets, когда буду финализировать страницу.

Кредит: David J. Buck / How-To Geek

Редактирование интуитивно понятно. Вы видите изменения по мере их внесения. Я открыл Micro для редактирования файла в одном окне, оставив сайт открытым в другом, чтобы отслеживать изменения в реальном времени. Это значительно сэкономило время на устранение проблем или странного кода.

Чтобы проверить код, нужно выполнить команду npm run dev. При выполнении контент собирается, и вы открываете локальный экземпляр в своем браузере. Оттуда вы можете увидеть, как выглядит новая страница, и сразу же проверить её на наличие проблем. Если нужно внести изменения, просто вернитесь к файлам src, отредактируйте файл в Micro, затем смотрите, как обновляется ваш браузер.

Что касается моей страницы, это заняло время, усилия и доработку, но в конечном итоге я остался доволен результатом, который, вероятно, будет опубликован на моем сайте.

Некоторые вещи работают хорошо в Astro, в то время как другие нуждаются в доработке

Всегда есть место для улучшения

Кредит: Patrick Campanale / How-To Geek

В Astro хорошо работает интеграция и то, как каждый документ взаимодействует друг с другом, создавая единый сайт. С другой стороны, если вы просто создаете простую страницу с изображениями, текстом, CSS и небольшим количеством JavaScript, возможно, будет проще написать код вручную.

Astro очень напоминает приложение, ориентированное на настольные ПК. Хотя у меня не возникло трудностей с его работой на Linux Mint, он проявил некоторые проблемы, когда я пытался использовать онлайн-версию на Android. Это не критично, но стоит учесть, если вы хотите попробовать его на мобильном устройстве.

Приятно не иметь дело с документом, полным кода, и позволить Astro преобразовывать ваш Markdown в полностью функциональный HTML. Поскольку мне нравится писать в Markdown, это значительно экономит время по сравнению с ручным кодированием HTML. Я считаю, что это уникальный способ создания сайтов быстрее, как только вы понимаете, что делаете.

Я не думаю, что Astro предназначен для новичков. У меня уже есть довольно хорошие знания HTML, Markdown и CSS (мой JavaScript немного запущен, но я знаю достаточно, чтобы справляться), поэтому я понимал, что происходит под капотом. Тем не менее, я рекомендую ознакомиться с несколькими учебниками (включая собственные курсы Astro) и уделить время, чтобы познакомиться с программой.

---

Astro кажется новым инструментом, который я действительно могу использовать часто

Кредит: David J. Buck / How-To Geek

Мне было очень весело работать с Astro над обновлением страницы. Думаю, мне потребуется время, чтобы стать более уверенным в его использовании, но я вижу, что смогу чаще его использовать в будущем.

Кто знает? Возможно, это подтолкнёт меня обновить свой сайт или чаще добавлять на него новые страницы. Я так и не успел переделать тот счетчик посетителей, но я доберусь до этого в конечном итоге.

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