How to deploy Next.js app to Hostinger shared hosting and alsoadd a github workflow (ci/cd)

How to deploy Next.js app to Hostinger shared hosting and alsoadd a github workflow (ci/cd)

You can bypass Hostinger's limitations entirely by building your application on GitHub Actions and automatically deploying the static files via FTP/SFTP. This means you do not need Node.js installed on your Hostinger account, and your local machine does not need to handle the build.

You can bypass Hostinger's limitations entirely by building your application on GitHub Actions and automatically deploying the static files via FTP/SFTP. This means you do not need Node.js installed on your Hostinger account, and your local machine does not need to handle the build.

📋 Prerequisites Before Setting Up

You must first change your Next.js project to static export mode so GitHub can build it into flat HTML/CSS/JS files.

1. Open your next.config.mjs (or next.config.js) and add the export configuration:

   /** @type {import('next').NextConfig} */const nextConfig = {
     output: 'export',
     images: {
       unoptimized: true, // Required for static export
     },
   };
   export default nextConfig;

Commit and push this change to your repository.

---

🔐 Step 1: Get FTP Credentials & Add to GitHub

GitHub needs permission to upload files to your Hostinger server.

1. Log into your Hostinger hPanel.
2. Navigate to Websites > Manage > Files > FTP Accounts.
3. Note your FTP Host, FTP Username, and FTP Password.
4. Go to your repository on GitHub.
5. Click Settings > Secrets and variables > Actions > New repository secret.
6. Create the following three secrets:
   • FTP_SERVER (Your Hostinger FTP Host)
   • FTP_USERNAME (Your Hostinger FTP Username)
   • FTP_PASSWORD (Your Hostinger FTP Password)

---

🚀 Step 2: Create the GitHub Actions Workflow

This workflow will trigger every time you push to your main branch. It spins up a temporary virtual environment, installs Node.js, builds your Next.js app, and uploads the out folder to Hostinger.

1. In the root of your local project, create a folder structure named .github/workflows/.
2. Inside that folder, create a file named deploy.yml.
3. Paste the following configuration into deploy.yml:

name: Deploy Next.js to Hostinger
on:
  push:
    branches:
      - main # Change this to 'master' if your default branch is named master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-level: 20
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci

      - name: Build Next.js Static Site
        run: npm run build

      - name: Deploy via FTP to Hostinger
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./out/
          server-dir: ./public_html/ 
          # Use ./public_html/subfolder/ if hosting on a subdomain

---

🛠️ Step 3: Trigger Your First Deployment

1. Save the deploy.yml file.
2. Commit and push the new workflow to GitHub:

   git add .github/workflows/deploy.yml next.config.mjs
   git commit -m "Add GitHub Actions CI/CD deployment workflow"
   git push origin main

Go to the Actions tab on your GitHub repository page to watch the live build progress. Once it finishes green, your site will be updated live on Hostinger.

If you hit any errors during the automated GitHub build or face issues with asset loading, let me know the error message or if you are hosting this on a subdomain so we can tweak the routing configuration.