Deploying Hugo on Hostinger using ssh

I tried building this site for personal blogging for data and visualizations. Since building website is not my strength I was looking for something simpler and hence I choose Hugo which seems to be quite popular framework for building static website. Once getting the framework ready, I selected Hostinger for hosting. I wanted to be in a position where I could finish a page/blog and the site would get published in one push. I figured out three different ways and two of which worked. Here I will show all three ways I tried and why I finally settled for publishing via ssh.

Option1: Via github workflow.

This was my original plan. Basically it would be very convenient to simply push the content to github and let the workflow run that would publish the site. After few hits and trial I managed to get this work. I still had to run hugo before I push. I am sure someone with more expertise could manage the workflow so that manual build using “hugo” was not necessary. Below is the workflow code that one would need to save inside .github/workflows/hugo.yml for this to work.

name: Deploy via FTP

on:
  push:
    branches:
      - main  
  workflow_dispatch:  # Allows manual triggering

jobs:
  deploy:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@v2

- name: Setup Hugo
  run: |
    wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v0.128.0/hugo_extended_0.128.0_linux-amd64.deb \
    && sudo dpkg -i ${{ runner.temp }}/hugo.deb
    hugo version



  
- name: Install lftp
  run: sudo apt-get install -y lftp


- name: Deploy to FTP
  uses: sebastianpopp/ftp-action@releases/v2
  with:
    host: ${{ secrets.FTP_SERVER }}
    user: ${{ secrets.FTP_USERNAME }}
    password: ${{ secrets.FTP_PASSWORD }}
    localDir: "public"
    remoteDir: "."
    options: "--delete --ascii"



- name: Check for errors
  if: failure()
  run: |
    echo "Workflow failed. Please check the logs for errors."
    echo "Hugo version:"
    hugo version
    echo "Contents of current directory:"
    ls -la

- name: FTP Deployment Status
  run: echo "FTP Deployment completed"

Note that it is using three secrets i.e FTP_SERVER, FTP_USERNAME and FTP_PASSWORD. These needs to be stored in your repository settings. You can get these from FTP Accounts page of your site in hostinger. These details need to be provided in your Secrets and variablse under securtiy section of the settings of your repo. This does work quite well. But I was still not satisfied with my workflow because I had to manually build my site by running “hugo” on my terminal and then pushing the code. Plus sometime I would just like to push without the need to publish. I could manage that by triggering the workflows based on tags instead of push but somehow I though Hostinger would provided something more straight forward so that would be explained in next option.

Option2: Via Hostinger git

I admit while I tried this I could not get this work for hugo. The problem that I faced is more to do with publishing the right content in the right folder. When we run hugo, it creates a folder called ‘public’. The content of this folder needs to be saved inside public_html folder inside hostinger. For some reason I am not able to ensure this. When I pushed a new commit basically the whole folder(i.e. repo) would get stored inside the public_html folder and not the content of public folder inside the public_html folder in Hostinger. Anyways after struggling for sometime I realised Hostinger allows to do ssh inside the server and then I thought why not simply copy the content of public folder to public_html folder using ssh. This is what I will cover in more details in Option 3.

Option3: Publish via ssh.

Here is step by step process.

Step 1: Generate ssh keys at your terminal

Run ‘ssh-keygen’ in your terminal and then copy the content of id_rsa.pub inside your .ssh folder of your root.

Step 2: Copy id_rsa.pub key to Hostinger

Copy this key to Hostinger. Please go to Advanced > SSH Access section in the website section. You would need to enable ssh first in hostinger.

This is more of a test. If you have done step 1 and step 2 correctly you should be able to log in to Hostinger via ssh without the need of password. You can find ssh command with your user id and server inside hostinger. it would look something like this. ssh -p 650xx uxxxxxxx@xxx.xxx.xxx.xx

Step 4: Use a bash script to build and publish.

You can save the below bash script(i.e. deployment.sh) in your repository root and call it by simply running ‘bash deployment.sh’

    #!/bin/bash
    
    # Define local and remote paths
    LOCAL_PATH="public/."
    REMOTE_USER="uxxxxxxxxxx"
    REMOTE_HOST="xxx.xxx.xxx.xx"
    REMOTE_PORT="650xx"
    REMOTE_PATH="/home/uxxxxx/domains/datavizs.com/public_html/"
    
    # Run Hugo to generate the static site
    hugo -D
    
    # Clear the remote public directory
    ssh -p $REMOTE_PORT $REMOTE_USER@$REMOTE_HOST "rm -rf $REMOTE_PATH/*"
    
    # Copy the contents of the public folder to the remote public directory
    scp -P $REMOTE_PORT -r "$LOCAL_PATH/" "$REMOTE_USER@$REMOTE_HOST:$REMOTE_PATH"
    
    # Print a message indicating completion
    echo "Deployment completed successfully."

The benefit of this approach is one it is quite fast and two it is more flexible and gives you more control.

Having said so I wish you luck on all the three options and hope whatever you have seected works best for you.

Happy blogging!!!

Option1: Via github workflow.#

Option2: Via Hostinger git#

Option3: Publish via ssh.#

Step 1: Generate ssh keys at your terminal#

Step 2: Copy id_rsa.pub key to Hostinger#

Step 3: Login to Hostinger server via your terminal#

Step 4: Use a bash script to build and publish.#