Static websites have become the foundation of modern web development, offering unmatched performance, security, and simplicity. At Grisu Studio, we use static site generation for our company website, and this guide shares our deployment process to Hostinger.
Why Static Sites?
Static websites are pre-rendered HTML files that require no server-side processing. This approach offers several advantages:
| Benefit | Impact | Details |
|---|---|---|
| Performance | ⚡ Instant | No database queries or server processing |
| Security | 🔒 Enhanced | No server-side code vulnerabilities |
| Scalability | 📈 Unlimited | Serve from CDNs worldwide |
| Cost | 💰 Lower | Significantly cheaper than dynamic hosting |
| Reliability | ✅ Higher | Fewer potential points of failure |
Our Stack
For the Grisu Studio website, we use:
| Category | Technology | Version/Details |
|---|---|---|
| Framework | Astro | 5.16.4 |
| Styling | Tailwind CSS | 3.4.3 |
| Hosting | Hostinger | Shared hosting plan |
| Build Tool | pnpm | Package manager |
| Deployment | Git | Manual deployment process |
Deployment Process
Step-by-Step Deployment
| Step | Command/Action | Purpose |
|---|---|---|
| 1. Build | pnpm build |
Compile TypeScript, minify assets, optimize images |
| 2. Verify | Check dist/ folder |
Ensure all files generated correctly |
| 3. Upload | Upload dist/* contents |
Transfer to Hostinger’s public_html |
| 4. Test | Visit your domain | Verify deployment success |
Common Mistakes to Avoid
⚠️ Don’t upload the dist folder itself - Upload the contents of dist/ directly to public_html/
✅ Correct structure:
public_html/
├── index.html
├── about/
├── apps/
└── _astro/❌ Incorrect structure:
public_html/
└── dist/
├── index.html
└── ...Optimization Techniques
Our build process includes several optimization strategies:
| Optimization | Method | Result |
|---|---|---|
| Images | WebP conversion with fallbacks | 60-80% size reduction |
| JavaScript | Minification and tree-shaking | Minimal bundle size |
| CSS | Tailwind purge + minification | Only used styles included |
| Caching | .htaccess browser caching |
Faster repeat visits |
| Compression | Gzip for text assets | 70% bandwidth reduction |
Performance Metrics
After optimization, the Grisu Studio website achieves:
| Metric | Target | Achieved |
|---|---|---|
| Lighthouse Score | 90+ | 98+ |
| First Contentful Paint | < 1.5s | < 0.8s |
| Time to Interactive | < 3.5s | < 1.2s |
| Total Page Size | < 500KB | ~280KB |
Conclusion
Deploying static websites to Hostinger is straightforward and cost-effective. The combination of static site generation, proper optimization, and reliable hosting provides excellent performance without complexity.
At Grisu Studio, this approach allows us to maintain a fast, secure website while focusing on what we do best: building great mobile applications.
