Host your Nuxt project on Hostinger Shared Hosting

A step-by-step guide on how to host your Nuxt project on Hostinger

Photo by Stable Diffusion

Hosting in a shared web host has its difficulties. Sure, you can generate the static files locally and upload them. How wants to do that though?

In this article, I am going over how to:

• Host your Nuxt project on Hostinger
• Set up continuous deployment (CD) with GitHub actions.

I divided this tutorial into 2 parts:

1. Create a GitHub workflow for your project.
2. Configure Hostinger Git deployment.

Notes:

I assume you have:

• Basic Nuxt knowledge.
• A Hostinger account.

Create GitHub workflow in your project

GitHub actions allows you to automatize bundle building of your Nuxt project. We are going to use GitHub actions to build our project and push the files into a “build” branch.

Mind you. We are going to push to the build branch files that are in the .gitignore file.

In the root of the project create this series of folders and the one file at the end of it all.

project/
├── .github/
│   └── workflows/
│       └── build.yml

Inside the build.yml copy the following:

name: Generate a build and push to another branch

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and Push

    steps:
      - name: git-checkout
        uses: actions/checkout@v3

      - name: Install all dependencies
        run: npm install

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

      - name: Push
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: build # The branch name where you want to push the assets
          FOLDER: dist # The directory where your assets are generated
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
          MESSAGE: "Build: ({sha}) {msg}" # The commit message

When you push to the master branch, GitHub will detect the change and run the workflow.

You can see your running actions by going to your repo and clicking on the actions button:

This is how the actions look:

The cleared, let’s go line by line on the workflow file.

name: Generate a build and push to another branch

This sets the name of the workflow. You can see your workflows in the Actions tab. Almost every other step has a name.

on:
  push:
    branches:
      - master

That is the event that will trigger the action. In our case every time we do a push on the master branch it will run.

jobs:
  build:
    runs-on: ubuntu-latest
    name: Build and Push

This defines the jobs. In our case only one. Under the job, you’ll find the build data.

runs-on specifies that it will run on Ubuntu and its latest version.

steps:

Everything under steps will be executed sequentially. “One step at a time”.

- name: git-checkout
        uses: actions/checkout@v3

This allows GitHub actions to do modifications to your code. Modification such as installing dependencies or building the bundle, which we will do in this tutorial. (An oversimplification)

If you want to know more though, check their repo here:

GitHub - actions/checkout: Action for checking out a repo

- name: Install all dependencies
    run: npm install

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

This installs the dependencies of the projects and generates their files. The files won’t be copied on the master branch.

      - name: Push
        uses: s0/git-publish-subdir-action@develop
        env:
          REPO: self
          BRANCH: build # The branch name where you want to push the assets
          FOLDER: dist # The directory where your assets are generated
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
          MESSAGE: "Build: ({sha}) {msg}" # The commit message

Everything we generated in the previous step we will push it to a new build branch.

uses: s0/git-publish-subdir-action@develop

This uses an action that allows you to push a subdirectory to GitHub, even if it’s in the .gitignore file. We will push the dist folder (the folder generated with npm run generate).

env with this you can specify options for s0/git-publish-subdir-action@develop .

REPO specifies that we intend to run the commands in the current repo.

BRANCH the branch that we are going to push to.

FOLDER the folder that we want to push.

GITHUB_TOKEN GitHub will generate this for you. So you don’t have to pay too much attention.

MESSAGE the commit message used to push to build.

That’s it. Everything you need generated is in the build branch. Let’s set it up on Hostinger.

Set up Hostinger for Git

I am going to set up Hostinger to detect changes on the repo and load it to the hosting.

Once you log in head over to the Websites.

When done click on your site’s Manage button.

Once on the website manager go to the advanced tools.

On Advanced search for the Git sub-option.

Once you click that you will be inside the Git page. You should have something like this on that page:

Now we have to fill that up. The field you will have to fill like so:

• Repository. The name of the repo you want to upload. In my case: https://github.com/Tauromachian/portfolio
• Branch. The branch we want to deploy. If you remember from the previous section we pushed the generated content to build. So. The branch that we will use is build.
• Directory. You can have sub-directories in your Hostinger host. If you have one feel free to add it. Since I have a portfolio sub-directory I will add that. If you don’t have one leave it blank.

After filling that we should have something like this:

Hit the Create button and give it a second.

After hitting the Create button you can see your added repos in the section below the form.

Notice the added repo:

That’s it. We are done, now you have a continuous deployment setup to Hostinger.

If you want to take a deeper look into the automatic deployment options for Hostinger take a look at this article:

Automatic deployment on Hostinger from Git on a Shared Webhost

Conclusions

Yeah sure it has its issues using a shared hosting. Nothing a few tricks can’t handle though.

In this article, we went over how to:

• Automatically build our Nuxt project using GitHub actions.
• Set up Hostinger with Git to use the previously created build.

Keep on the good work we’ll get there eventually.

Where is there exactly mate?

We’ll never know.