Мій досвід переробки сайту за допомогою Astro: що спрацювало, а що ні

Публікація 11 липня 2026 року, 16:00 EDT

Я веду невеличкий сайт на Neocities під назвою Whistling Nose Games, Music, and Multimedia. Під час простою минулого року я присвятив кілька місяців повторному вивченню веб-дизайну, CSS, JavaScript та створенню абсурдних ігор і музики. Сайт має навмисно ностальгічну атмосферу, і я вирішив оновити його. Мій друг, який має феноменальні навички дизайну, порадив мені скористатися Astro для редизайну. Я спробував, і результат виявився досить вдалим.

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

Багато чого відбувається під капотом

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

Astro позиціонує себе як "фреймворк для контентно-орієнтованих веб-сайтів". Це JavaScript фреймворк, який допомагає користувачам створювати статичні, насичені контентом сайти, відокремлюючи інтерактивні компоненти від самого контенту.

Astro компілює все, що ви створюєте для свого сайту (компоненти, макети та Markdown файли), у HTML і CSS на серверному боці, а не в браузері користувача. Це виглядає вражаюче в реальному часі. Фреймворк використовує систему маршрутизації на основі файлів для генерації URL-адрес на основі структури ваших файлів. Він виконує величезну кількість роботи за лаштунками.

Astro багатий на функції і, по суті, веде користувачів через процес створення першого сайту за допомогою програмного забезпечення. Також є можливості інтеграції для роботи з AI (використання 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-х, з телевізійним статичним фоном і не насиченими кольорами.

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

З 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, а не Assets, щоб спростити тестування. Пізніше я переміщу їх до 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 для оновленої сторінки. Думаю, мені знадобиться час, щоб звикнути до нього, але я бачу себе, використовуючи його частіше в майбутньому.

І хто знає? Можливо, це змусить мене частіше оновлювати свій сайт або додавати до нього більше сторінок. Я досі не встиг переробити той лічильник відвідувачів, але я обов'язково зроблю це згодом.

У будь-якому випадку, я дійсно насолоджувався часом, проведеним з ним, і не можу дочекатися, щоб побачити, що ще я можу з ним зробити в майбутньому.