Host your Nuxt project on Hostinger Shared Hosting
A step-by-step guide on how to host your Nuxt project on Hostinger
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:
- Create a GitHub workflow for your project.
- 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:
- 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:
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.