Это руководство проведёт вас через всё необходимое, чтобы запустить Fastry локально, настроить под свой бренд и опубликовать в интернете. Предварительный опыт работы с Astro не требуется.
Что нужно перед началом
- Node.js версии 22.12.0 или новее
- Менеджер пакетов:
npm,pnpmилиyarn - Аккаунт на Vercel (бесплатный) для деплоя
- Редактор кода — рекомендуется VS Code с расширением Astro
Установка
Fastry — бесплатный проект с открытым исходным кодом. Клонируйте репозиторий с GitHub и установите зависимости:
git clone https://github.com/hansmartensdev/astro-rocket my-site
cd my-site
pnpm install
pnpm devОткройте http://localhost:4321 — вы увидите полный сайт, работающий локально. Каждое изменение применяется мгновенно без полной перезагрузки страницы.
Настройка сайта
Почти всё управляется из одного файла: src/config/site.config.ts.
const siteConfig: SiteConfig = {
name: 'Название вашего сайта',
description: 'Краткое описание для поисковых систем.',
url: 'https://yoursite.com',
author: 'Ваше Имя',
email: 'hello@yoursite.com',Начните отсюда. Поле name заполняет логотип, заголовки страниц, копирайт в подвале и структурированные данные. description становится мета-описанием по умолчанию для всех страниц, у которых нет своего.
Брендовый цвет
Fastry поставляется с 12 готовыми цветовыми темами. Выберите тему, установив атрибут data-theme в src/layouts/BaseLayout.astro:
<html lang="ru" class="scroll-smooth dark" data-theme="indigo">Доступные значения: orange, amber, lime, emerald, teal, cyan, sky, blue, indigo, violet, purple, magenta. CSS-файлы тем находятся в src/styles/themes/ — откройте активную тему, чтобы настроить цветовую шкалу --brand-*.
Раздел branding.colors в site.config.ts управляет двумя независимыми значениями браузера:
branding: {
colors: {
themeColor: '#6366f1', // Цвет панели инструментов браузера на мобильных
backgroundColor: '#ffffff', // Фон заставки PWA
},
},Обновите themeColor на hex, соответствующий вашему брендовому цвету.
Навигация
Откройте src/config/nav.config.ts. Это единственный файл, который нужно менять для настройки навигации:
export const navItems: NavItem[] = [
{ label: 'Блог', href: '/blog', order: 1 },
{ label: 'Проекты', href: '/projects', order: 2 },
{ label: 'Обо мне', href: '/about', order: 3 },
{ label: 'Контакты', href: '/contact', order: 4 },
];Добавляйте, удаляйте или меняйте порядок пунктов. Шапка и подвал автоматически используют эту конфигурацию.
Написание блог-постов
Создайте новый .mdx файл в src/content/blog/ru/. Используйте этот шаблон frontmatter:
---
title: "Заголовок вашего поста"
description: "Краткое описание до 200 символов."
publishedAt: 2026-03-15
author: "Ваше Имя"
tags: ["тег-один", "тег-два"]
featured: false
locale: ru
image: "../../../assets/blog/your-image.svg"
imageAlt: "Описание изображения для экранных дикторов."
---
Содержание поста начинается здесь. Стандартная разметка Markdown — заголовки, списки, ссылки, жирный и курсивный текст, а также любые компоненты MDX.Сохраните файл — пост сразу появится в блоге. Никаких пересборок или очистки кеша не требуется.
Изображения для обложек
Изображения для обложек блога хранятся в src/assets/blog/. Рекомендуемый формат — SVG 1200×630 пикселей. Компонент <Image> Astro автоматически оптимизирует изображения.
Настройка контактной формы
Контактная форма использует Resend для отправки email. Чтобы активировать её:
- Создайте бесплатный аккаунт Resend и получите API-ключ
- Подтвердите домен отправителя в Resend
- Укажите ваш
emailвsrc/config/site.config.ts— сюда будут приходить сообщения - Добавьте API-ключ в
.env:
RESEND_API_KEY=re_xxxxxxxxxxxxПри желании установите RESEND_FROM_EMAIL на подтверждённый адрес отправителя. Форма работает без этих переменных — она просто отключает отправку.
Деплой на Vercel
- Создайте новый репозиторий на GitHub и отправьте туда ваш проект
- Перейдите на vercel.com и нажмите Add New Project
- Импортируйте репозиторий — Vercel автоматически определит Astro
- Добавьте переменные окружения в Settings → Environment Variables
- Нажмите Deploy
Ваш сайт опубликован. Каждый следующий push в main автоматически запускает новый деплой.
Установите переменную SITE_URL на ваш продакшн-домен:
SITE_URL=https://yoursite.comЭто гарантирует, что канонические URL, карта сайта и структурированные данные будут использовать правильный домен.
Деплой на Netlify
Fastry также поддерживает Netlify. Файл netlify.toml уже включён с правильными настройками сборки и заголовками безопасности.
- Создайте репозиторий на GitHub и отправьте проект
- Перейдите на netlify.com, нажмите Add new site → Import an existing project и подключите репозиторий
- В Site configuration → Environment variables добавьте переменные:
SITE_URL=https://yoursite.com
DEPLOY_TARGET=netlify- Нажмите Deploy site
Установка DEPLOY_TARGET=netlify указывает сборке использовать адаптер Netlify вместо Vercel.
Что делать дальше
Когда сайт опубликован, вот рекомендуемый порядок следующих шагов:
- Замените демо-контент — обновите текст героя, раздел «О себе» и главную страницу
- Напишите первый настоящий пост — регулярные публикации лучше всего влияют на видимость в поиске
- Настройте Google Search Console — добавьте
GOOGLE_SITE_VERIFICATIONв.envи отправьте карту сайта - Добавьте ссылки на соцсети — массив
socialLinksвsite.config.tsзаполняет иконки в подвале - Настройте аналитику — добавьте
PUBLIC_GA_MEASUREMENT_IDилиPUBLIC_GTM_IDдля активации встроенной аналитики
Сайт полностью ваш. Всё документировано, всё можно изменить, и ничего не скрыто за абстракциями, которые нельзя прочитать.
Если Fastry сэкономил вам время, звезда на GitHub поможет другим разработчикам найти этот проект.