posts/post-3/

[utterances-bot]

Hosting an Astro website on Hostinger - Just don't

https://nathanshobbies.com/posts/post-3/

[iankencruz]

Hey Nathan, I stumbled onto this when I was trying to get my app unto hostinger via git. After many nights researching and testing, I ended up finding a way.

What I ended up doing was creating a .htaccess file in my root project directory and redirecting hostinger to look for the index.html file inside of the "dist" folder instead.

https://au.siteground.com/kb/how_to_change_my_document_root_folder_using_an_htaccess_file/

I used the code from this website above and just replaced "folder" with my dist folder.

Now whenever I want to deploy, I just have npm run build command and push to your git repo.

Hope this helps and goodluck

[nwpulverizer]

Hey @iankendoit thanks for the comment. I figured there was probably a way, but it was so easy to set up with netlify I didn't even bother spending too much time with it. I am really glad you figured it out though. If you are posting a write up about it other than this comment I am happy to link to it.

[brokeboiflex]

@iankendoit could you share more information? your comment is the only resource I've found about this subject, and am kinda desperate for some answers, did you have to configure astro in any special way? what output and adapter did you use in astro.config.mjs?

[AleFerradans]

Pueden subir su página web arrastrando los archivos compilados de su carpeta "dist" a el administrador de archivo de Hostinger, dentro de "public_html". Y así pueden subir su pagina con Astro.

[Ian-T-Price]

There are two methods that I use:

1. Link a git repo to the Hostinger domain
   Using this method, the whole repo will be pushed to the public_html directory, so not so useful for Astro sites.
   https://support.hostinger.com/en/articles/1583302-how-to-deploy-a-git-repository

2. Setup SSH connections to Hostinger. Once this is in place you can use a CI/CD pipeline, such as GitHub Actions, to npm run build and then push the dist folder to public_html using SCP - I use appleboy/scp-action
   https://support.hostinger.com/en/articles/1583645-how-to-enable-ssh-access

Using the latter setup will update our site every time you make a commit or only when you perform a PR on a branch; your choice.

UPDATE:

For completeness, here's the github workflow I use:

name: Generate a build and push to Hostinger static files

on:
  push:
    branches:
      - main # The branch name you are committing the new changes to

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20]

    name: Build and Push
    steps:
      - name: git-checkout
        uses: actions/checkout@v4

      - name: Install all dependencies
        run: npm install

      - name: Build
        run: npm run build # The build command of your project

      - name: copy file via ssh scp key
        uses: appleboy/scp-action@v0.1.7
        with:
          host: ${{ secrets.HOSTINGER_HOST }}
          username: ${{ secrets.HOSTINGER_USERNAME }}
          key: ${{ secrets.HOSTINGER_KEY }}
          port: ${{ secrets.HOSTINGER_PORT }}
          source: /home/runner/work/Dundonald-show.org.uk/Dundonald-show.org.uk/dist/
          target: domains/dundonald-show.org.uk/public_html/
          strip_components: 3

My npm run build command is "build": "astro check && astro build", which creates the prod build in /dist

[kalwiggins]

I was wondering...
Your title made me lol AND answered the question.
Thanks m8.

[nwpulverizer]

Ok I want to circle back to this article after the comments made here and say that maybe "just use netlify" is a bit of a cop out answer, although to be fair, that is basically what I was told when asking the same question on the astro discord.

Thanks to the people who have commented their solutions to the actual problem.

[Berlime]

You can create a "hostinger" branch with only the dist folder.