Astro 7 для новичка: собираем быстрый блог-портфолио из Markdown

Astro 7 можно освоить на одном небольшом проекте, если сразу видеть вход, действие и результат. Astro превращает Markdown-файлы в типизированную коллекцию контента и заранее собирает быстрые HTML-страницы. Ниже вы соберёте работающий пример и проверите обычный и граничный сценарии.

Новичку хочется добавить проекты через простой текстовый файл, но обычное копирование HTML-карточек быстро приводит к разным датам, ссылкам и разметке. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте портфолио с главной страницей, карточками проектов и отдельным URL для каждого Markdown-файла. Проверка: новый Markdown-файл появляется в списке, открывается по своему slug, а npm run build создаёт статические страницы без ошибок.

Как устроен учебный проект Astro 7

Файлы Markdown хранят данные и текст, content collection проверяет frontmatter, а шаблоны Astro отвечают за список и страницу проекта. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: проект, контент, маршруты и сборка. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Пример сверялся с актуальной документацией официального релиза Astro 7 на 19 октября 2026 года. Создайте проект командой npm create astro@latest, выберите пустой шаблон и установите зависимости. Для проверки типов добавьте @astrojs/check. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

---
import { getCollection } from "astro:content"

const projects = await getCollection("projects")
projects.sort((a, b) => b.data.year - a.data.year)
---

<main>
  <h1>Проекты Ангела</h1>
  <div class="grid">
    {projects.map((project) => (
      <article>
        <p>{project.data.year}</p>
        <h2><a href={'/projects/' + project.id + '/'}>{project.data.title}</a></h2>
        <p>{project.data.summary}</p>
        <ul>{project.data.stack.map((item) => <li>{item}</li>)}</ul>
      </article>
    ))}
  </div>
</main>

Компонент не хранит проекты внутри разметки. Он запрашивает коллекцию и строит одинаковую карточку для каждой записи. Найдите в примере вход, проверку и место формирования результата.

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

Что происходит внутри и почему это работает

Content collection задаётся через loader и схему. Во время сборки Astro читает файлы, проверяет типы полей и передаёт записи шаблонам. Статический маршрут создаёт URL заранее, поэтому браузер получает готовый HTML. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. В Astro 7 старый Content Layer API удалён, поэтому новый проект следует строить на актуальной конфигурации коллекций, а не копировать пример для Astro 4.

Markdown удобен, пока структура материала проста. Не переносите в frontmatter сложное состояние интерфейса. Схема должна проверять только данные контента, а вычисления и отображение остаются в компонентах. Изображения храните предсказуемо и передавайте через поддерживаемый image API. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

Добавьте фильтр по технологии через query-параметр или отдельные страницы тегов. Сначала вычислите список доступных тегов из коллекции. До правки запишите ожидаемое поведение одним предложением. После граничного теста повторите обычный сценарий.

Главная польза коллекции в одном источнике правды: карточка, страница и метаданные используют одну запись. Полезная правка проходит от нового ввода до видимого результата.

Четыре проверки перед следующим шагом. Каждый следующий этап начинается после наблюдаемого результата.

Что запомнить и куда двигаться дальше

Перед публикацией проверьте заголовки, description, абсолютные ссылки и страницу 404. Затем соберите production-версию и откройте файлы из dist локальным сервером. Для закрепления откройте в проекте React + Vite, в лендинге на Tailwind CSS и в базовом портфолио разработчика.

Как изучить тему в Кодике

Сначала закрепите HTML, массивы и map, затем переходите к коллекциям и статическим маршрутам. Сначала восстановите главную функцию и проверьте её на трёх значениях.

После портфолио добавьте один новый проект только через Markdown, не трогая компоненты. Это главный тест архитектуры. Базовый синтаксис закрепите через курс HTML.

Что получится в итоге

Так выглядит законченный учебный проект: есть понятный вход, видимый результат, защита от неверных данных и место для следующего улучшения.