↓ Skip to main content

Deploying a website with simple CI/CD pipeline

·444 words·3 mins
tacoverflow
Author
tacoverflow
Software engineer with a passion for building and experimenting with cloud technologies.
Table of Contents

I wanted, for a long time, to have my own website to share things that I learn across the years.

A place where I can save “how-to” guides that future me will consider useful since human memory is ephemeral.

The initial goal: a website that I can control
#

There are many solution to host a website:

  • from bare metal solutions where you need to assemble your own rack install the web server, configure it, and finally getting the files in place.
  • to a more newbie and user friendly GUI where you can just choose from predefined template and drag and drop the content you want.

Each option has its own pros and cons. For me at least, what I really wanted was to have a good amount of control over the files, the service and the machine in case I want to migrate to a different solution in the future.

At the end I choose:

  • To get a domain with a registrar
  • For hosting I went with a cloud solution for the compute, getting a very affordable machine in which I can ssh into.
  • For serving the files a simple nginx installation will do just fine.
  • HTTPS is a must so I use certbot to get some valid ssl certificates.
  • The actual website files are build using hugo, a go framework for static sites.
I did the test and worked, but now a new problem arise.

The problem: updating the website
#

Having to ssh into a remote machine to make changes, then use hugo to compile such changes and copy/paste it in the correct location was becoming tedious. Also I needed a way to track the changes I was making to the files in case I needed to rolled back or just to have some kind of backup.

The solution: a simple CI/CD deployment pipeline
#

So I opted to use git with webhookd and some bash scripts to create a very simple CI/CD pipeline. It goes like this:

  • I create a remote repository in GitHub.
  • Then configure the webhook in the GitHub repo to trigger on push to master.
  • The GitHub webhook is pointing to a custom http endpoint.
  • Using webhookd I created said endpoint, when called it runs a bash script.
  • On execution the script will
    • get the repository from GitHub.
    • pull dependencies.
    • build the page using hugo.
    • place the compiled files into the expected location for nginx to serve them.

Here’s a simple diagram

flowchart TD
    A[push to remote git] -->|webhook triggered| B[webhookd http endpoint]
    B --> C[bash script runs]
    C --> |git pull from remote, install dependencies, Compile using Hugo| D[Replace files served by nginx with new ones]