Continous deployment on Hostinger using Github pages

Jan 25, 2024
astro continuous deployment github actions devops

Context

I decided to host this website using the web hosting provider called Hostinger since they are already hosting some of my websites. Since joffreylagut.fr is a plain HTML website generated using Astro.build, updating it is in 2 steps: 1. Build the website using astro build: all files are generated into a directory called dist (which can be changed using an argument). 2. Open an FTP session to the server and drag and drop the content of the dist directory.

To save time, avoid any human error or forget to deploy the website every release, we are going to automatize the deployment using continuous deployment (CD) with Github Actions.

Steps

Create a FTP account for your website on Hostinger

From a security perspective, it’s always best to create account for specific tasks so you can monitor what is done and restrict their access rights. In our case, Github servers will be able to open an FTP session to the Hostinger server hosting our website, which is why we are creating a new account. If tomorrow we decide not to use Github actions anymore, we can simply delete the FTP account.

Let’s create a new FTP account on Hostinger:

Open Hostinger’s hpanel and login. Then, click on Websites > Manage (on the website to manage). In the left sidebar of the newly opened page, click on Files > FTP Accounts.
Fill the form in the section Create a new FTP Account with the information bellow:
- Keep /public_html as the directory.
- Set username, password and click on Create.
Get the information regarding hostname and username in the section bellow the form.
(facultative) Test the credentials with a FTP client like Filezilla to ensure it works.

Tip: Use a password vault (Keepass, Bitwarden etc.) to generate a strong password and save your credentials securely.

Steps to create a new FTP account on Hostinger

Insert the credentials as secrets on Github

From a security perspective, you should never store credentials or sensitive information in unencrypted files. However, the Github servers must have access to our FTP credentials to update our website. Therefore, we are going to use action secrets: variables defined in the repository (or in an organisation) that can be read only by actions and updates by the repository owner.

Let’s add our repository secrets:

Open your Github repository
Go to Settings
Click on Secrets and variables > Actions
Click New repository secret
Set the field Name as GH_DEPLOY_FTP_USERNAME, the field Secret with the username of your FTP account and then click on Add secret.
Repeat step 2 with Name as GH_DEPLOY_FTP_PASSWORD and the FTP account password as Secret
Repeat step 2 with Name as GH_DEPLOY_SERVER and the FTP server hostname as Secret
Ensure you have the 3 secrets properly configured.

Github secrets configuration Steps to configure Github actions secrets

Create the Github Actions workflow

Workflow file

We now have everything we need to write the deployment workflow. At the root of your project, create a new directory .github/workflows and a file deploy.yml. Open this file in your favorite text editor.

mkdir -p .github/workflows && touch .github/workflows/deploy.yml

The final code is available on my repository. You can copy/paste the code bellow in deploy.yml. It will be described in the next sections:

name: Deploy website to Hostinger
on:
  workflow_dispatch: # Allow manual run from Github
  release: # Run automatically when a new release is published
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      # Set the same versions as your own to ensure your project
      # build without issues.
      node-version: 20
      pnpm-version: 8
    steps:
      - name: 🗂️ Checkout repository
        uses: actions/checkout@v3

      - name: 🔨 Install and setup pnpm ${{ env.pnpm-version }}
        uses: pnpm/action-setup@v2 
        with:
          version: ${{ env.pnpm-version }}
      - name: 🔧 Install and setup Node.js ${{ env.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.node-version }}
          cache: 'pnpm'

      - name: 🛠️ Install dependencies
        run: pnpm install

      - name: 🛠️ Build application 
        run: pnpm run build

      - name: 📂 Sync files with FTP server
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.GH_DEPLOY_FTP_SERVER }}
          username: ${{ secrets.GH_DEPLOY_FTP_USERNAME }}
          password: ${{ secrets.GH_DEPLOY_FTP_PASSWORD }}
          port: 21 # Change if necessary
          local-dir: ./dist/ # Change if necessary

Workflow: setup section

The setup section is pretty straightforward.

name: Deploy website to Hostinger
on:
  workflow_dispatch: # Allow manual run from Github
  release: # Run automatically when a new release is published
    types: [published]
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      # Set the same versions as your own to ensure your project
      # build without issues.
      node-version: 20
      pnpm-version: 8

name is displayed on Github Actions to identify the workflow
on defines what event should trigger the workflow ; we want to start it manually and when we publish a new release
jobs is where we can setup the “actions” we want to do ; we have only one, build since we only want to build and publish the website
runs-on defines the operating system of the VM used to run the job
env are environment variables we want to reuse in the steps ; here we can easily change our node and pnpm version

Workflow: steps

The file having a lot of comments and defined names, I’m not gonna describe each line here.

    steps:
      - name: 🗂️ Checkout repository
        uses: actions/checkout@v3

      - name: 🔨 Install and setup pnpm ${{ env.pnpm-version }}
        uses: pnpm/action-setup@v2 
        with:
          version: ${{ env.pnpm-version }}
      - name: 🔧 Install and setup Node.js ${{ env.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.node-version }}
          cache: 'pnpm'

      - name: 🛠️ Install dependencies
        run: pnpm install

      - name: 🛠️ Build application 
        run: pnpm run build

      - name: 📂 Sync files with FTP server
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.GH_DEPLOY_FTP_SERVER }}
          username: ${{ secrets.GH_DEPLOY_FTP_USERNAME }}
          password: ${{ secrets.GH_DEPLOY_FTP_PASSWORD }}
          port: 21 # Change if necessary
          local-dir: ./dist/ # Change if necessary

There are two types of steps:

Commands, which are defined with the keyword run and used to run command lines
Predefined steps defined with the keyword uses to run actions available on the Github Actions Marketplace

In addition, we notice two important informations:

${{ env.node-version }} and ${{ env.pnpm-version }} are replaced by the values of the setup section.
${{ secrets.GH_DEPLOY_FTP_SERVER }}, ${{ secrets.GH_DEPLOY_FTP_USERNAME }} and ${{ secrets.GH_DEPLOY_FTP_PASSWORD }} fetches the actions secrets we defined before.

I am not using `pnpm`, how do I make it work?

pnpm is a packet manager. Therefore, you can replace it with your own by changing the steps 🔨 Install and setup pnpm, 🛠️ Install dependencies and 🛠️ Build application with your own.