Deploy an Astro Static Site on Hostinger with Namecheap DNS and StackPath CDN

Astro spits out plain static files. You don’t need a Node runtime chugging along in production just to serve pre-rendered pages. Putting an Astro static build on cheap Hostinger shared hosting, managing DNS through Namecheap, and slapping StackPath CDN in front of it delivers sub-100ms global TTFB without paying edge platform premiums.

I migrated a 140-page documentation site to this exact setup last week. Here’s how to wire Astro into Hostinger, route everything cleanly through Namecheap, and cache it across StackPath’s edge nodes without shooting yourself in the foot.

The Pipeline: Astro, Hostinger, Namecheap, and StackPath

Before jumping into dashboards, here’s how the traffic actually flows. Every visitor request bounces through three layers:

1. Namecheap DNS: Resolves your root domain and www subdomains, handing users StackPath’s Anycast edge IPs.
2. StackPath CDN: Handles edge SSL termination, serves cached HTML and hashed assets instantly, and only talks to your origin when there’s a cache miss.
3. Hostinger Origin: Runs Apache/LiteSpeed to serve raw files from public_html/. When StackPath misses its cache, it pulls the asset over an encrypted HTTPS connection.

Decoupling the stack like this keeps your origin server load near zero, even during heavy traffic spikes, and avoids bandwidth surcharges.

Step 1: Configure and Build Astro for Static Output

Astro defaults to static output, but you need to lock down trailing slashes and route formats so Hostinger’s Apache setup doesn’t choke on directory paths.

Check your astro.config.mjs:

import { defineConfig } from 'astro/config'; export default defineConfig({ site: 'https://example.com', output: 'static', trailingSlash: 'never', build: { format: 'directory' }
});

Setting trailingSlash: 'never' with build.format: 'directory' generates predictable folder structures like /blog/first-post/index.html. Apache on Hostinger reads these cleanly without crazy mod_rewrite rules. If you’re doing something similar with client-side SPAs, check our walkthrough on how to deploy a Vite React SPA on Hostinger with Namecheap and StackPath.

Run your production build:

npm run build

Take a look at dist/. Astro puts fingerprint-hashed CSS, JS, and optimized images into _astro/, alongside static .html files and anything from your public/ folder.

Step 2: Set Up Hostinger hPanel and Configure .htaccess

Log into Hostinger hPanel. If you haven’t added your domain yet, go to Websites > Add Website and follow the prompts. Grab the server IP listed under Plan Details in the left sidebar—you’ll need it for StackPath in a minute.

Upload the contents of your dist/ folder into Hostinger’s public_html/ via SFTP, rsync, or File Manager. Don’t upload the folder named dist; drop the files themselves directly into the web root.

Next, create a .htaccess file inside public_html/ to handle clean routing, fallback errors, and cache headers:

# Enforce UTF-8
AddDefaultCharset UTF-8 # Enable Rewrite Engine
RewriteEngine On
RewriteBase / # Redirect Trailing Slashes if Not a Directory
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301] # Custom 404 page generated by Astro
ErrorDocument 404 /404.html # Long-lived browser caching for hashed Astro assets
 ExpiresActive On ExpiresByType text/html "access plus 10 minutes" ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year"

This prevents infinite trailing-slash redirect loops and ensures browsers never hang onto stale HTML while caching fingerprinted scripts and styles forever. For a deeper breakdown on tuning headers in Hostinger, see our guide on how to fix static asset cache policies on Hostinger with .htaccess.

Step 3: Configure StackPath CDN Origin and Edge Settings

StackPath sits in front of Hostinger. Visitors talk to StackPath, and StackPath pulls from Hostinger behind the scenes.

Open your StackPath console and create a new CDN Site:

1. Site URL: Your live domain (e.g., example.com).
2. Origin Type: Select IP Address.
3. Origin IP: Enter your Hostinger server IP from Step 2.
4. Origin Port: Pick 443 for HTTPS.

StackPath will hand you an Edge Address (like example.stackpathdns.com) or a set of dedicated Anycast edge IP addresses.

Head to the EdgeSSL tab in StackPath and generate a free Let’s Encrypt cert. Then set your Origin Protocol Policy to HTTPS Only. Hostinger provisions automated SSL certificates for all domains by default; making both edges talk over HTTPS stops mixed-content warnings before they start.

Step 4: Update Namecheap DNS Records

Now route traffic through Namecheap. Leave your nameservers set to Namecheap BasicDNS (or WebDNS). That way, you manage individual DNS records without breaking mail delivery.

If you’re already running MX records for Google Workspace or Fastmail, make sure to read our walkthrough on how to point Namecheap DNS to Hostinger without breaking email before saving changes.

In Namecheap, go to your domain’s Advanced DNS tab and find Host Records. Wipe out the default parking records and plug in:

• Type: A Record | Host: @ | Value: [StackPath Edge IP 1] | TTL: 5 min
• Type: A Record | Host: @ | Value: [StackPath Edge IP 2] | TTL: 5 min
• Type: CNAME Record | Host: www | Value: example.stackpathdns.com. | TTL: 5 min

For official syntax details, reference the Namecheap Knowledge Base on A record configuration.

Break It: Fixing the SSL Handshake Redirect Loop

The first time I deployed this setup, the browser stalled and hit me with ERR_TOO_MANY_REDIRECTS. The site was bouncing between http://example.com and https://example.com endlessly.

Here’s what went wrong: Hostinger had its default “Force HTTPS” redirect active. Meanwhile, StackPath was set to fetch from Hostinger over port 80 (HTTP). Hostinger saw plain HTTP, triggered a 301 Moved Permanently pointing to HTTPS, and handed that response back to StackPath. StackPath passed the 301 to the browser, and the whole cycle restarted.

You can spot this in seconds using curl:

curl -Iv https://example.com

If you see a recurring Location: https://example.com/ header while requesting HTTPS, here’s how to fix it:

1. In StackPath: Go to Sites > [Your Site] > CDN > Origin Settings. Set the Origin Port strictly to 443 and set Pull Protocol to HTTPS Only. Make sure Origin Host Header is set to your actual domain name (e.g., example.com), not Hostinger’s raw IP.
2. In Hostinger: Check Security > SSL in hPanel to make sure your SSL certificate is actually active and healthy before turning on HTTPS enforcement.

Once StackPath used HTTPS:443 with the right SNI host header, the redirect loop broke instantly, dropping response times from a 4-second timeout down to 48ms.

Step 5: Configure StackPath Edge Cache Rules for Astro

Astro automatically fingerprints static files in _astro/ with hashes (like _astro/index.B1q4_9x.css). Because the filenames change whenever code changes, you can cache them aggressively at the edge.

As outlined in the MDN documentation on Cache-Control directives, immutable assets can live forever in edge caches without users seeing stale content. Set up an Edge Rule in StackPath to exploit this:

1. Head to Sites > [Your Site] > EdgeRules > Add EdgeRule.
2. Name: Cache Astro Static Bundles.
3. Condition: If URL Path matches regex ^/_astro/.*.
4. Action: Set Edge Cache TTL to Custom: 31536000 seconds (1 year).
5. Action: Set Browser Cache TTL to Custom: 31536000 seconds.

Add a second rule for raw HTML pages:

1. Name: Short TTL for HTML Documents.
2. Condition: If URL Path matches regex .*.html$|^/[^.]*$.
3. Action: Set Edge Cache TTL to 600 seconds (10 minutes).
4. Action: Enable Revalidate Stale Content.

This gives your repeat visitors near-instant delivery while making sure content edits reach the world in minutes without manual cache flushes.

One catch: checking Hostinger’s raw server logs will show StackPath edge IPs instead of client addresses. Check our guide to restore real visitor IP addresses behind StackPath CDN on Apache to fix your analytics and firewall rules.

Automate Deployments: rsync to Hostinger

Dragging ZIP files through hPanel’s web interface gets old fast. Set up SSH keys and deploy with rsync right from your terminal.

Turn on SSH under Advanced > SSH Access in hPanel. Note your connection string, port, and username, then paste your public SSH key into the authorized keys tab.

Add a quick deploy script to your package.json:

{ "scripts": { "dev": "astro dev", "start": "astro dev", "build": "astro build", "deploy": "astro build && rsync -avz -e 'ssh -p 65002' --delete dist/ u123456789@195.168.1.1:~/public_html/" }
}

Swap in your actual port, username, and IP. The --delete flag keeps Hostinger clean by pruning orphaned CSS and JS bundles from previous builds.

Deploy anytime with:

npm run deploy

It builds your Astro project and syncs only modified files in about 5 seconds. If you prefer automated Git pipelines, see the Astro deployment documentation for CI/CD alternatives.

Frequently Asked Questions

Can I run Astro Server-Side Rendering (SSR) on Hostinger shared hosting?

No, not on standard shared hosting. Shared plans run LiteSpeed/Apache and won’t keep a long-running Node process alive. For Astro SSR with dynamic server routes, you’ll need a Hostinger VPS. Shared plans are strictly for static output (SSG).

How do I purge the StackPath CDN cache after deploying changes?

In the StackPath dashboard, go to Sites > [Your Site] > CDN > Purge. Hit Purge All for site-wide updates, or invalidate targeted paths like /index.html or /blog/*. Edge nodes drop old assets within seconds.

Why do subpages return a 404 error when refreshed?

Your web server is looking for a physical file instead of a directory index. Make sure build: { format: 'directory' } is set in your astro.config.mjs, and check that your .htaccess has proper rewrite rules for trailing slashes.

Does StackPath require changing Namecheap nameservers?

No. You can leave your nameservers pointing to Namecheap BasicDNS and manage your routing using standard A and CNAME records under Advanced DNS.

Next Steps

With Astro deployed to Hostinger behind StackPath and Namecheap, you have a lightning-fast static site with rock-solid DNS and edge caching. If your stack also involves hybrid single-page frameworks, take a look at our step-by-step walkthrough on how to deploy a Next.js static export on Hostinger with Namecheap and StackPath.