How to Deploy a Website on Hostinger: WordPress, Static Files and Next.js

Hostinger supports three common ways to publish a website, and the right one depends on what you built. This guide covers all three.

Which method should you use?

• WordPress site or online store: use the one-click WordPress installer.
• Plain HTML, CSS and JavaScript (like the original atalrawat.in tools): upload the files to public_html.
• Next.js or another Node.js app: deploy through hPanel's Node.js Apps feature, directly from GitHub.

Method 1: WordPress

1. Log in to hPanel and go to Websites > Add Website.
2. Choose WordPress and follow the setup wizard (site name, admin email and password).
3. Connect your domain, then open the WordPress dashboard at yourdomain.com/wp-admin.
4. Install a lightweight theme, set permalinks to Post name, and enable SSL from the SSL section of hPanel.

This is the setup used for stores like goviira.com: WooCommerce, payment gateways and order workflows on top of a fast, clean theme.

Method 2: Static HTML files

1. In hPanel, open File Manager for your domain.
2. Go into the public_html folder.
3. Upload your files (index.html, css, js folders). Uploading a zip and extracting it is faster.
4. Open your domain. index.html loads automatically.

For clean URLs on Apache hosting, use an .htaccess file with rewrite rules, as in the original version of this site. You can also upload via FTP: hPanel > Files > FTP Accounts shows the host, username and password.

Method 3: Next.js from GitHub (Node.js Apps)

Hostinger's Node.js Apps feature builds and runs your app for you. It is available on plans that include Node.js hosting, so check your plan in hPanel first.

1. Push your project to GitHub.
2. In hPanel, open Websites > Add Website and choose Node.js Apps.
3. Select Import Git Repository and click Connect with GitHub. Install the Hostinger GitHub App and choose the repository.
4. Review the auto-detected settings: framework (Next.js), branch, Node version, build command and output directory.
5. Add your environment variables in the app settings, then click Deploy.

After the first deployment, every push to the connected branch triggers a new build automatically. You can also upload a zip of the project (without node_modules and .git) instead of using GitHub.

Next.js notes for Hostinger

• Hostinger runs Next.js in server mode, so server features (API routes, redirects, middleware) work.
• Keep the config file named next.config.js, next.config.mjs or next.config.ts. A TypeScript config needs Next.js 15 or newer, and unsupported names such as next.config.cjs are silently ignored.
• Keep the output directory as .next.
• Setting output: 'export' has no effect on Node.js Apps. If you want plain static hosting, build the export on your computer and upload the generated files to public_html instead.

Static export alternative

For shared hosting without Node.js, set output: 'export' in your Next.js config, run npm run build and upload the out folder contents to public_html. Static export does not support features that need a server, such as redirects and headers in next.config, so handle them in .htaccess.

Connect your domain and SSL

• If the domain is registered at Hostinger and the site is hosted there, it is usually connected during setup.
• Enable the free SSL certificate in hPanel > Security > SSL and force HTTPS.
• Pick one canonical version (with or without www) and redirect the other.

Hostinger or Vercel?

Use Hostinger for WordPress and static sites, and when you want everything (domain, email, hosting) in one place. Use Vercel for Next.js when you want instant preview links for each branch. You can mix them: WordPress projects on Hostinger and the Next.js portfolio on Vercel or Hostinger Node.js Apps.

Before you go live

• Test every page on mobile.
• Check sitemap.xml and robots.txt load.
• Submit the sitemap in Google Search Console.
• Keep a backup before major changes.