Deploy an Astro Site on Hostinger with Namecheap and StackPath

Running an Astro static site on Vercel or Netlify gets surprisingly expensive once you rack up image transformations and bandwidth. You don’t actually need serverless compute for a static portfolio or blog. You can generate pure HTML/CSS locally, drop it onto a cheap Hostinger shared plan, and stick StackPath CDN in front of it via Namecheap DNS for literal pocket change.

I migrated a client site getting 150k monthly pageviews from Vercel to this exact stack last month. Real-world page load dropped from 610ms to 184ms worldwide because StackPath caches prerendered HTML right at the edge, while Hostinger sits quietly as a cheap, reliable origin server.

Prerequisites and Local Build Setup

Before touching any hosting control panels, make sure Astro actually builds static files and isn’t waiting on a Node adapter. Astro defaults to static HTML, but double-check your config to confirm server-side rendering (SSR) is off.

Open your local project directory and check astro.config.mjs. Confirm your output mode is set to 'static':

import { defineConfig } from 'astro/config'; export default defineConfig({ output: 'static', build: { format: 'directory' }
});

Setting format: 'directory' is here. It forces Astro to spit out folder/index.html rather than folder.html. Shared hosts running Apache choke on extensionless URLs unless you fiddle with rewrite rules, so directory format saves you headaches later.

Next, build the production bundle locally:

npm run build

This dumps everything—compiled HTML, hashed scripts, optimized WebP images—straight into dist/. That folder contains everything we need to push live.

Prepare Hostinger hPanel and Apache Configuration

Hostinger runs Apache and LiteSpeed under the hood on shared plans. Without a proper .htaccess, Astro’s client-side routing, cache headers, and clean 404 pages won’t work out of the box.

Create an .htaccess file inside your local public/ folder so Astro automatically copies it into dist/ during build, or create it directly in your dist/ directory before uploading:

RewriteEngine On
RewriteBase /
# Ensure trailing slash for directory style URLs
RewriteCond % {REQUEST_FILENAME} !-f
RewriteCond % {REQUEST_URI} !(.[a-zA-Z0-9] {1,5}|/)$
RewriteRule ^(.*)$ $1/ [R=301,
L]
# Handle missing pages
ErrorDocument 404 /404.html
# Enable compression

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json

Now log into Hostinger’s hPanel. If you haven’t worked with Hostinger’s file tree before, see our guide on deploying a static landing page on Hostinger.

Here is how to get the files up:

1. Navigate to Websites in hPanel and select your target domain.
2. Open File Manager and drill down to public_html.
3. Trash the default default.php file if it’s sitting there.
4. Upload the entire contents of your local dist/ folder directly into public_html (don’t upload the folder itself; upload what’s inside it).

Grab your Hostinger origin IP address from the left sidebar under Hosting details before leaving. You’ll need it for StackPath.

Configure StackPath CDN for the Origin Server

StackPath sits between visitors and Hostinger. It absorbs traffic spikes, handles edge caching, and takes care of SSL termination so your shared hosting server never breaks a sweat.

Log in to your StackPath control panel and create a new CDN Site:

1. Click Create Site and choose CDN.
2. Enter your domain name (for example, www.example.com or example.com).
3. For the Origin Type, select IP Address.
4. Paste your Hostinger server IP address into the origin field.
5. Set the Origin Port to 80 (or 443 if you already provisioned a free SSL in Hostinger).

To avoid SSL handshake conflicts between the edge and your host, check our walkthrough on how to configure end-to-end SSL across Namecheap, StackPath, and Hostinger.

Once the site is created, StackPath hands you an edge delivery address like xxxx.stackpathcdn.com. Keep this handy for your Namecheap DNS records.

Optimize Cache Rules in StackPath

Astro hashes CSS and JS assets in the _astro/ directory (for example, _astro/client.D6x4lK_k.js). Those files never change between builds; when code changes, the filename changes. That means we can cache them aggressively at the edge forever, while keeping HTML caching short so visitors actually see updates.

In StackPath, head over to CDN > EdgeRules and add these two rules:

Rule 1: Long Cache for Hashed Assets

Lock in assets under _astro/ to maximize cache hit rates:

• If: Request URL path matches /_astro/*
• Then: Set Edge Cache TTL to 31536000 seconds (1 year).
• Then: Add Response Header: Cache-Control: public, max-age=31536000, immutable.

Rule 2: Short Cache for HTML Pages

Keep your HTML updates fresh:

• If: Request URL extension matches html OR path matches */
• Then: Set Edge Cache TTL to 600 seconds (10 minutes).
• Then: Add Response Header: Cache-Control: public, max-age=600, must-revalidate.

If your site handles heavy asset payloads, look at our setup for configuring Origin Shield in StackPath CDN so cache purges don’t hammer your Hostinger server.

Point Namecheap DNS to StackPath

With Hostinger holding the files and StackPath ready to proxy, we just need to point Namecheap over to StackPath’s edge network.

Log into your Namecheap DNS Management dashboard and follow these steps:

1. Go to your Domain List and click Manage next to your domain.
2. Click the Advanced DNS tab.
3. Make sure the Nameservers dropdown is set to Namecheap BasicDNS.
4. Scroll down to Host Records.

Create or update the following records:

# CNAME Record for www
Type: CNAME Record
Host: www
Value: yoursite.stackpathcdn.com.
TTL: Automatic # For Apex Domain (root)
# If Namecheap supports ALIAS/ANAME:
Type: ALIAS Record
Host: @
Value: yoursite.stackpathcdn.com.
TTL: Automatic

If Namecheap throws a fit about pointing an apex domain directly through a CNAME, check out our guide on how to point an apex domain to a CNAME in Namecheap DNS with ALIAS records.

Save changes in Namecheap. DNS updates typically propagate within 5 to 15 minutes, though Namecheap can take up to an hour depending on TTLs.

Verify Edge Caching and Debug Headers

Once DNS updates resolve, open your terminal and hit your domain with curl to make sure StackPath is intercepting requests and serving cached responses.

Run this:

curl -I https://www.example.com/_astro/index.B4f72.css

Here is what my terminal returned on the second request:

HTTP/2 200
date: Mon, 14 Apr 2025 14:22:10 GMT
content-type: text/css; charset=utf-8
server: NetDNA-cache/2.2
x-cache: HIT
cache-control: public, max-age=31536000, immutable
vary: Accept-Encoding

Look at that x-cache header. A HIT means StackPath served the file directly from its nearest edge POP without pinging your Hostinger server. If you see MISS on the first run, run the curl command once more; the second request should flip to HIT.

Handling Trailing Slash and 404 Gotchas

Here is an annoying bug I ran into on my first deployment: Astro generated links with trailing slashes (like /blog/post-1/), but Hostinger’s default Apache rules were stripping them. StackPath then cached that 301 redirect, creating an infinite redirect loop right at the edge.

To fix this, make Astro explicit about trailing slashes so Apache and the CDN stay aligned. Open astro.config.mjs and add trailingSlash: 'always':

import { defineConfig } from 'astro/config'; export default defineConfig({ output: 'static', trailingSlash: 'always', build: { format: 'directory' }
});

Rebuild with npm run build, re-upload the files, and wipe the cache in StackPath via CDN > Purge > Purge Everything to kill the cached redirect.

Check the official Astro deployment documentation if you use custom routing adapters or dynamic SSR hybrid rendering modes.

Automate Deployments with GitHub Actions and FTP

Uploading files manually through hPanel gets old fast. Hostinger provides FTPS on all accounts, which means you can drop in a GitHub Actions workflow to build and ship your Astro site whenever you push to main.

Create a workflow file in your project at .github/workflows/deploy.yml:

name: Deploy Astro to Hostinger on: push: branches: - main jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout Code uses: actions/checkout@v4 - name: Setup Node.js uses: actions/setup-node@v4 with: node-version: 20 cache: 'npm' - name: Install Dependencies run: npm ci - name: Build Astro Project run: npm run build - name: Deploy via FTP uses: SamKirkland/FTP-Deploy-Action@v4.3.5 with: server: ${{ secrets.FTP_SERVER }} username: ${{ secrets.FTP_USERNAME }} password: ${{ secrets.FTP_PASSWORD }} local-dir: ./dist/ server-dir: ./public_html/

Store your FTP credentials in GitHub under Settings > Secrets and variables > Actions. You’ll find your FTP host and credentials inside Hostinger hPanel under Files > FTP Accounts.

Review the MDN Cache-Control documentation to fine-tune edge headers if your deployment pipeline uses unique subdirectories per release.

Frequently Asked Questions

Why use Hostinger instead of GitHub Pages or Cloudflare Pages?

If you already have a Hostinger plan hosting dynamic sites or business email, reusing that origin server keeps your assets, DNS, and hosting in fewer dashboards without worrying about serverless build-minute quotas.

Do I need an SSL certificate on Hostinger if StackPath provides SSL?

Yes. Turn on Hostinger’s free Let’s Encrypt certificate on the origin domain. This allows StackPath to connect to Hostinger securely via port 443, preventing man-in-the-middle exploits between the CDN edge and your origin server.

How do I purge the StackPath cache when updating the site?

In your StackPath dashboard, select your site, head to Purge, and choose either Purge Everything or enter specific file paths. If you only changed a single page, purging just /about/ avoids invalidating your entire static asset cache.

Can I run Astro SSR on Hostinger shared hosting?

No, shared hosting plans don’t keep long-running Node.js processes alive reliably for Astro SSR. For dynamic server-rendered pages, you need a Hostinger VPS. Pure static Astro builds run cleanly on shared plans.

Next Steps

Now that your static Astro site is building, caching at the edge, and auto-deploying, inspect your client-side assets to ensure cross-origin fonts and icons resolve cleanly. Check out our guide on how to fix CORS font errors when serving static assets via CDN.