Начало работы с темой Rocket

Это руководство шаг за шагом расскажет вам обо всем необходимом для запуска Astro Rocket локально, настройки под ваш бренд и развертывания в сети. Предварительный опыт работы с Astro не требуется.

Что вам понадобится перед началом работы

Node.js version 22.12.0 or later
A package manager: npm, pnpm, or yarn
A Vercel account (free) for deployment
A code editor - VS Code with the Astro extension is recommended

Installation

Astro Rocket - это бесплатное программное обеспечение с открытым исходным кодом. Клонируйте репозиторий с GitHub и установите зависимости:

git clone https://github.com/hansmartens68/astro-rocket my-site
cd my-site
pnpm install
pnpm dev

Откройте http://localhost:4321, и вы увидите, что весь сайт работает локально. Каждое внесенное вами изменение обновляется мгновенно, без полной перезагрузки страницы.

Настройка вашего сайта

Практически все параметры сайта управляются из одного файла: src/config/site.config.ts.

const siteConfig: SiteConfig = {
  name: 'Your Site Name',
  description: 'A short description for search engines.',
  url: 'https://yoursite.com',
  author: 'Your Name',
  email: 'hello@yoursite.com',

Начните здесь. Поле name заполняет логотип, заголовки страниц, информацию об авторских правах в нижнем колонтитуле и структурированные данные. Поле description становится метаописанием по умолчанию на любой странице, которая не предоставляет собственное описание.

Фирменные цвета

Astro Rocket поставляется с 12 готовыми цветовыми темами. Выберите предпочитаемую тему, установив атрибут data-theme в файле src/layouts/BaseLayout.astro:

<html lang="en" class="scroll-smooth dark" data-theme="indigo">

Доступные значения: orange, amber, lime, emerald, teal, cyan, sky, blue, indigo, violet, purple, magenta. The theme CSS files live in src/styles/themes/ - open the active one to fine-tune the --brand-* цветовая шкала при необходимости.

Раздел branding.colors в файле site.config.ts управляет двумя несвязанными значениями браузера:

branding: {
  colors: {
    themeColor: '#6366f1',       // Browser toolbar colour on mobile Chrome/Safari
    backgroundColor: '#ffffff',  // PWA splash screen background
  },
},

Обновите themeColor до шестнадцатеричного значения, соответствующего выбранному вами фирменному цвету, чтобы внешний вид мобильного браузера выглядел безупречно - это не повлияет на цвета на странице.

Написание постов в блоге

Создайте новый файл .mdx в src/content/blog/en/. Используйте следующий шаблон метаданных:

---
title: "Your Post Title"
description: "A short summary under 200 characters."
publishedAt: 2026-03-15
author: "Your Name"
tags: ["tag-one", "tag-two"]
featured: false
locale: en
image: "../../../assets/blog/your-image.svg"
imageAlt: "Describe the image for screen readers."
---

Содержимое вашей публикации начинается здесь. Работает стандартный Markdown - заголовки,
списки, ссылки, жирный шрифт, курсив - плюс любые необходимые компоненты MDX.

Сохраните файл, и публикация немедленно появится в индексе блога. Перестройка и очистка кеша не требуются.

Изображения для обложек

Изображения для обложек публикаций блога находятся в src/assets/blog/. Рекомендуемый формат - SVG размером 1200×630 пикселей - стандартный размер изображений Open Graph. SVG-файлы минимизируют размер файлов и идеально масштабируются под любой экран. PNG и JPG также хорошо работают, если вы предпочитаете фотографии; компонент Astro <Image> автоматически выполняет оптимизацию.

Настройка контактной формы

Контактная форма использует Resend для отправки электронных писем. Для активации:

Создайте бесплатный аккаунт Resend и получите свой API-ключ.
Подтвердите свой домен отправки в Resend.
Укажите адрес электронной почты в файле src/config/site.config.ts - сюда доставляются отправленные формы.
Добавьте свой API-ключ в файл .env:

RESEND_API_KEY=re_xxxxxxxxxxxx

При желании установите RESEND_FROM_EMAIL на подтвержденный адрес отправителя в вашем домене. Если этот параметр опущен, форма будет использовать значение email из site.config.ts в качестве адреса отправителя.

Форма работает и без этих переменных - она просто отключает отправку - поэтому вы можете разрабатывать и развертывать остальную часть сайта, прежде чем настраивать электронную почту.

Развертывание в Vercel

Создайте новый репозиторий на GitHub (или GitLab / Bitbucket) и загрузите в него свой локальный проект.
Перейдите на vercel.com и нажмите Добавить новый проект.
Импортируйте свой репозиторий - Vercel автоматически обнаружит Astro.
Добавьте переменные среды в Настройки → Переменные среды.
Нажмите Развернуть.

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

Установите переменную среды SITE_URL на ваш рабочий домен:

SITE_URL=https://yoursite.com

Это гарантирует, что канонические URL-адреса, карта сайта и структурированные данные будут использовать правильный домен.

Развертывание на Netlify

Astro Rocket также поддерживает Netlify «из коробки». В комплект входит файл netlify.toml с предварительно настроенными параметрами сборки и заголовками безопасности.

Создайте новый репозиторий на GitHub (или GitLab / Bitbucket) и загрузите в него свой локальный проект.
Перейдите на netlify.com, нажмите Добавить новый сайт → Импортировать существующий проект и подключите свой репозиторий.
В разделе Конфигурация сайта → Переменные среды добавьте свои переменные, включая:

SITE_URL=https://yoursite.com
DEPLOY_TARGET=netlify

Нажмите Развернуть сайт

Установка DEPLOY_TARGET=netlify указывает сборке использовать адаптер Netlify вместо стандартного адаптера Vercel. Всё остальное - форма обратной связи, маршруты API, оптимизация изображений - работает одинаково на обеих платформах.

Что делать дальше

После запуска сайта вот разумный порядок дальнейших действий:

Замените контент-заглушку - обновите текст в заголовке, раздел «О нас» и текст на целевой странице, чтобы они отражали вашу реальную работу.
Напишите свой первый настоящий пост - регулярная публикация - это самое ценное, что вы можете сделать для повышения видимости в поисковой выдаче.
Настройте Google Search Console - добавьте GOOGLE_SITE_VERIFICATION в файл .env и отправьте карту сайта.
Добавьте ссылки на социальные сети - массив socialLinks в site.config.ts заполняет значки социальных сетей в нижнем колонтитуле.
Настройте аналитику - добавьте PUBLIC_GA_MEASUREMENT_ID или PUBLIC_GTM_ID, чтобы активировать встроенную интеграцию аналитики.

Сайт ваш. Все задокументировано, все можно изменить, и ничто не скрыто за абстракциями, которые вы не можете прочитать.

Если Astro Rocket сэкономил вам время, звездочка на GitHub поможет другим разработчикам найти его. Это займет две секунды.