My Website

Overview

This project demonstrates how to provide automatic build and deploy of a static website starting from a GitHub repository.

  • The GitHub repository is converted into website content using Hugo, an open-source static site generator. The content is then packaged in a Docker image and copied into the GitHub repository generating the .github.io website.
  • All the flow is automated using a GitHub action that is triggered on every push event. In this way, the website content can be directly updated from within the GitHub repository by simply editing or adding markdown files.
  • All is obtained without writing html/css pages or programming code.

Hugo

Hugo is an open-source static site generator, written in Go: it is flexible and quick, files written in markdown syntax are converted into html and there are a lot of predefined templates called themes. It is very useful when building static sites as personal pages, blogs, documentation resources, company or product pages. For my personal website I used the Refresh theme.

GitHub actions

GitHub actions allows you to create pipelines to automate build and release processes. Actions are defined in the repository by creating one or more text files, called workflows. The workflows are event-driven: the execution can be triggered by GitHub events like push and pull requests. A wide Marketplace collects plenty of actions from official sources and from contributors. An event automatically triggers the workflow, which contains one or more jobs. Each job uses steps to control the order in which actions are run. These actions are the actual commands that automate the process.

In this project, a workflow called build and publish has been created, which contains two jobs:

  • Build & push Docker image: a new docker image of the website is built and pushed to my dockerhub repository.
  • Deploy the site: the project is built using Hugo and the result is pushed to another GitHub repository which generates the .github.io site.