How to deploy Blowfish using Github Pages and Infomaniak 🌍

Introduction to this article 🌟

#

In this chapter, I’ll guide you through deploying your website online using the Infomaniak Web Hosting Service and automating the process with GitHub Actions.

Essential Prerequisites for a Smooth Deployment 🛠️

#

To be able to deploy your website on Internet you need first :

• Your own domain name: This is a unique, easy-to-remember address used to access websites, such as google.com and facebook.com. Users can connect to websites using domain names thanks to the DNS system. You can purchase domain names from providers like GoDaddy, Namecheap, or personnaly I bought it on Infomaniak.

• A web hosting service: This is where your website files are stored and served to visitors. While you can host your website on your own server, I will be using Infomaniak, a Swiss-based web hosting provider, in this guide.

Understanding Web Hosting: The Backbone of Your Website 💻

#

A web hosting service provides the infrastructure and technology needed to store and display a website on the internet. When you create a website, all the files, images, videos, and data need to be stored somewhere so people can access it through their browsers. Web hosting companies offer the servers and resources to make that possible.

The main advantage is convenience—users don’t need to worry about managing physical servers, server security, uptime, or technical configurations. Hosting providers take care of that for you. Additionally, they often provide support for domain registration, email services, and backups.

The reason I chose Infomaniak is that they offer a free (yes, free) hosting service for students! All you need to do is create an account and submit your student application. Plus, they comply with the GDPR and respect your privacy. And what’s better ? They are using 100% renewable energy, and the datacenters are cooled solely using filtered outside air.

Make sure to follow the web host’s tutorial to associate your domain to your web host ! The Infomaniak documentation is here.

Mastering Automation with GitHub: Streamline Your Development Process ⚙️

#

Github delivers a ton of process to automatize your tasks, that’s what we call CI/CD :

CI/CD: What is it?

#

CI/CD stands for Continuous Integration and Continuous Delivery/Deployment. It’s a process that automates your tasks to streamline and enhance development workflows. The concept is often visualized by the following diagram :

In our case, since we built our website using Hugo and Blowfish, we’ve already completed the plan, code, and build stages.

Achieving continuous testing isn’t feasible for us either. Therefore, the next step is to deploy our first release.

While CI/CD is typically a full-cycle process involving testing and deployment automation, our specific use case simplifies the pipeline by focusing on deploying the final product. This helps us stay aligned with the project’s goals without overcomplicating the process.

As I said before, Github offers us some tools to automatize our deployment. We will be using Github Workflows.

What is Github Actions ?

#

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that trigger tests whenever you push a change to your repository.

To put it in simple terms, imagine I’m a cook and need to make a recipe. I decide to use my super automated cooker that follows the recipe step by step.

In this analogy, my workflow is the recipe itself, and the events are the specific steps I need to follow to complete the recipe. Does that make sense? 😄

Quickstart Guide

#

First, you will need to create an account on Github. And create a new project.

You can follow this guide, to create a new project !

Once it’s done, create a folder named .github and inside it a repository called workflows at the root of your directory :

mkdir .github/workflows

Inside it create your workflow, I will name it infomaniak.yml, you can name it whatever you want.

# .github/workflows

touch infomaniak.yml

Afterward, you can start to edit the file, I will now show you the steps, and how to configure your Github Workflow.

Deploying Your Project with Confidence 🚢

#

First, let’s start with the basics, in this part of code we will name our pipeline (the recipe), we will push on master (you can edit it, but if you are a beginner, I think master is a good choice.)

In my context, Infomaniak gave me the adress of a server, on this server where I need to transfer my Hugo website. This server is an Ubuntu server so I specify it on the runs-on parameters. The HUGO VERSION is used to pull the right version of Hugo.

name: Deploy Hugo site to Infomaniak

on:
  push:
    branches:
      - master
  workflow_dispatch:  
jobs:
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.141.0
    steps:

The first step , as aforesaid, is to install Hugo and for that, we need to clone the official repository on the remote server.

      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb

Next, we are using the actions/checkout@v4. This action checks-out your repository under $GITHUB_WORKSPACE, so your workflow can access it.

      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

We can finally launch our website using the hugo command, and this time it’s not hugo server but you need to replace it with your domain name.

      - name: Build Hugo site
        run: |
          hugo --gc --minify --baseURL "https://amakatus.tech"  # Remplace par l'URL de ton site sur Infomaniak

Now, let’s install sshpass, this is a tool used to make an authentication on the remote server with a password. I don’t know why I never successfully made my pipeline work with a passphrase. So for this article I will instead use a password.

Even if i precognize to use a private/public key architecture.

      - name: Install sshpass
        run: |
          sudo apt-get install -y sshpass  # Installer sshpass pour utiliser un mot de passe SSH

Let’s take a break from our pipeline because the next steps will require you to configure some secrets on Github directly.

The secrets are a feature on Github to store the criticals informations about your pipeline in a vault. It prevents to write your credentials in your scripts, for security purpose indeed 😄

So once you’re connected to Github, go to your repository :

1. Go into the Settings of your repository.
2. Look for the Secrets and variables in the Security menus.
3. Choose the Actions options.
4. In the Repository secrets, you can click the New repository secret.

Inside the name buble, you need to provide the name of the variable (pretty straightforward, eh). for example : SSH_HOST. As for the secrets, write the critical information. For the SSH_HOST it will be the ip adress of your remote server.

The other secrets that you need to define are, you can find these informations on your panel in Infomaniak. The doc is here

• SSH_PORT : the port used by SSH, by default this is the port 22 but regarding the security lack, a lot of web hosting service modify the default port.
• SSH_USER : the username of your account used to connect to the remote server.
• SSH_PASSWORD : the password of your account.
• SSH_WORKDIR : the working directory where your site will be uploaded. On Infomaniak, my WORKDIR is /sites/amakatus.tech. It will copy all my Hugo website inside this repository.

Create the secrets

#

The first step is to add your server to the list of trusted hosts, so SSH won’t fail due to asking for confirmation when connecting for the first time.

      - name: Add SSH host to known_hosts
        run: |
          mkdir -p ~/.ssh
          ssh-keyscan -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        env:
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_PORT: ${{ secrets.SSH_PORT }}

Next, we test whether the SSH connection works properly with the password you’ve configured. This is a quick check to make sure we can actually access the server before deploying any files.

      - name: Test SSH connection with password
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" ssh -o StrictHostKeyChecking=yes -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "echo 'SSH connection successful'"
        env:
          SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }} 

Finally, once the connection is confirmed to be working, we move on to the actual deployment. This step will copy your Hugo site files (from the ./public/ folder) to your server via rsync.

      - name: Deploy to Infomaniak via rsync 
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" rsync -avz --delete -e "ssh -p ${{ secrets.SSH_PORT }}" ./public/ ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_WORKDIR }}/
        env:
          SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }}
          SSH_PORT: ${{ secrets.SSH_PORT }}
          SSH_USER: ${{ secrets.SSH_USER }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_WORKDIR: ${{ secrets.SSH_WORKDIR }}

And that’s all !! 😄 Now, you have two choice :

• Whenever you push modifications using git add/commit/push on the master branch, it will launch the pipeline, modifying the server in a minute.
• You can manually start and manage the pipeline via the Actions menu.

Final code

#

Here is the full-code for you to Copy :

# .github/workflows/infomaniak.yml

name: Deploy Hugo site to Infomaniak

on:
  push:
    branches:
      - master
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.141.0

    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb

      - name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: recursive
          fetch-depth: 0

      - name: Build Hugo site
        run: |
          hugo --gc --minify --baseURL "https://amakatus.tech"  # Remplace par l'URL de ton site sur Infomaniak

      - name: Install sshpass
        run: |
          sudo apt-get install -y sshpass  # Installer sshpass pour utiliser un mot de passe SSH

      - name: Add SSH host to known_hosts
        run: |
          mkdir -p ~/.ssh
          ssh-keyscan -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_HOST }} >> ~/.ssh/known_hosts
        env:
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_PORT: ${{ secrets.SSH_PORT }}

      - name: Test SSH connection with password
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" ssh -o StrictHostKeyChecking=yes -p ${{ secrets.SSH_PORT }} ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }} "echo 'SSH connection successful'"
        env:
          SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }}

      - name: Deploy to Infomaniak via rsync 
        run: |
          sshpass -p "${{ secrets.SSH_PASSWORD }}" rsync -avz --delete -e "ssh -p ${{ secrets.SSH_PORT }}" ./public/ ${{ secrets.SSH_USER }}@${{ secrets.SSH_HOST }}:${{ secrets.SSH_WORKDIR }}/
        env:
          SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }}
          SSH_PORT: ${{ secrets.SSH_PORT }}
          SSH_USER: ${{ secrets.SSH_USER }}
          SSH_HOST: ${{ secrets.SSH_HOST }}
          SSH_WORKDIR: ${{ secrets.SSH_WORKDIR }}

What’s Next? 🚀

#

And with that, we’ve reached the final step in this 4-part series on deploying your Hugo site with CI/CD and GitHub workflows! 🎉

I hope you learned some new things from these articles, and if you successfully deployed your website, I’d love to see it! Feel free to send me an email. I’d be happy to check it out and hear about your experience. 😊

Happy coding and best of luck with your projects! 🚀