Skip to content
A Astro Rocket
Tag

#astro-rocket

25 posts tagged "astro-rocket".

All posts

Five Footer Layouts, and the One That Ships

Simple, minimal, stacked, centered and columns. The default builds its own columns from your nav, your tags and your projects, and shrinks back to a single row when a site has nothing to put in them.

B Beyond.ms
5 min read
#astro-rocket #features #footer #navigation #customization

Newsletter Signup: Collect Subscribers

A signup that posts to a Resend audience, in the footer of every page. On by default, and it tells you when its keys are missing instead of waiting for a visitor to find out.

B Beyond.ms
7 min read
#astro-rocket #features #newsletter #resend #forms

Umami Analytics: Cookieless, Built In

Umami works out of the box: private, cookieless web analytics. Set one environment variable and you get visitor numbers with no cookie banner.

B Beyond.ms
8 min read
#astro-rocket #features #analytics #umami #privacy

Updating Without Losing Your Content

Astro Rocket is installed with git clone, so updating is a git merge rather than an npm install. Here's the safe, reversible way to do it.

B Beyond.ms
6 min read
#astro-rocket #tutorial #git #maintenance

The Click-to-Play YouTube Embed

Embed a YouTube video with one component. The page ships only a thumbnail; the player loads from youtube-nocookie.com on play, so Lighthouse stays at 100.

B Beyond.ms
3 min read
#astro-rocket #features #components #performance

Video Slides in Project Galleries

Project carousels now accept self-hosted video slides next to images. Here's how to use them, how they work, and why they don't cost a single Lighthouse point.

B Beyond.ms
4 min read
#astro-rocket #features #projects #performance

Set a Custom Logo and Site Name

Swap the auto-generated monogram for your own logo, rename your site, and choose a logo-with-wordmark or logo-only header — mostly from one config file.

B Beyond.ms
5 min read
#astro-rocket #branding #logo #customization

The Stack Marquee: A Pure-CSS Tech Strip

Two rows of tech-stack cards scrolling opposite ways with no JavaScript. How the homepage marquee loop works, and why it is hidden on phones.

B Beyond.ms
5 min read
#astro-rocket #animation #css #components #ux #performance

Going Multilingual with Native i18n

How the opt-in i18n works: locale routing, the t()/tData() dictionary, an auto-localized blog, projects and pages, and how to ship a multilingual site.

B Beyond.ms
14 min read
#astro-rocket #i18n #internationalization #tutorial

Blog Comments: Giscus, Cusdis or Artalk

Astro Rocket's blog comments are pluggable: pick Giscus, Cusdis, or the fully self-hosted Artalk. All three lazy-load on scroll — skip them and you pay nothing.

B Beyond.ms
7 min read
#astro-rocket #features #blog #comments #giscus #cusdis #artalk

A Footer Menu Separate From the Header

Configure the footer menu independently of the header navigation: add a Privacy link, an Imprint, or a Cookie Policy without cluttering your main nav.

B Beyond.ms
2 min read
#astro-rocket #features #footer #navigation

Table of Contents for Long Posts

An optional TOC on blog posts in three layouts — inline card, sticky sidebar, or both — with the sidebar on the left or right. Pick what fits your audience.

B Beyond.ms
5 min read
#astro-rocket #features #blog #navigation

System, Light, Dark: How Colour Mode Works

A 3-state colour mode with no flash, live OS-preference tracking, and a pill dropdown that respects what the user picked. Here is how it is built.

B Beyond.ms
5 min read
#astro-rocket #dark-mode #design-system #ux #tutorial

Add a LetterGlitch Effect to Astro 7

How to drop a brand-tinted LetterGlitch canvas effect into an Astro 7 project: the full component, an Astro wrapper, and the production-ready details.

B Beyond.ms
8 min read
#astro-rocket #astro #react #canvas #tutorial

Getting Started: From Install to Live

How to install, configure, and deploy Astro Rocket — covering site.config.ts, brand colours, navigation, writing posts, and deploying to Vercel.

B Beyond.ms
4 min read
#astro-rocket #getting-started #configuration #vercel

Every Configuration Toggle, Theme and Layout

A walkthrough of every configuration option: 12 colour themes, OKLCH colours, typography, radius and shadow tokens, header styles, and dark mode.

B Beyond.ms
16 min read
#astro-rocket #configuration #customization #themes

Animations: How the Motion Design Works

Every animation layer in Astro Rocket: the ease-out hero entrance, the staggered scroll-reveal cascade, and how it stays smooth with no JS animation library.

B Beyond.ms
10 min read
#astro-rocket #animation #css #ux #performance

44 Components Ready to Use

A 44-component UI library: buttons, cards, dialogs, forms, data display, and full page-structure components. All accessible, all themed.

B Beyond.ms
8 min read
#astro-rocket #components #ui #velocity

SEO: What's Built In and How to Configure It

Astro Rocket handles structured data, Open Graph, canonical URLs, sitemaps, and more out of the box. Here's exactly what ships and where to configure it.

B Beyond.ms
5 min read
#astro-rocket #seo #structured-data #tutorial #configuration

Hero Scroll Indicator: Hides on Scroll

Two bouncing chevrons that fade in after the hero animation and disappear the moment you start scrolling. How every part of the indicator works.

B Beyond.ms
4 min read
#astro-rocket #features #ux #animation

A Progress Ring on the Back-to-Top Button

The back-to-top button has a circular SVG ring that fills as you scroll: brand-coloured, theme-aware, and built from CSS and a small inline script.

B Beyond.ms
4 min read
#astro-rocket #features #ux #animation

Contact Form Setup: Resend, Vercel, GoDaddy

The contact form is wired up but needs three things to deliver email: a Resend account, a verified domain, and one environment variable on Vercel.

B Beyond.ms
5 min read
#astro-rocket #tutorial #email #vercel #deployment

The Scroll Progress Bar

A thin brand-coloured line that fills as you scroll. How the progress bar works, where it lives, and how to enable it on any page.

B Beyond.ms
3 min read
#astro-rocket #features #header #ux

The Design System: Tokens, Colours, Dark Mode

Astro Rocket uses a three-tier token architecture with OKLCH colors. Change one value and the entire site updates. Here's how it works and how to make it yours.

B Beyond.ms
4 min read
#astro-rocket #design-system #tailwind #customization #tutorial

The Hero Typing Effect: How to Tune It

The hero headline cycles through words with a typing animation. How it works, how to tune every speed and pause, and how to turn it off.

B Beyond.ms
7 min read
#astro-rocket #components #customization #tutorial #javascript

blog.cta.heading

blog.cta.description