How I built and deployed this blog with Github Pages

tl;dr Deploying with GitHub Pages is easier than ever and I am a GitHub fangirl.

Before I joined Microsoft I worked as a Software Engineer and Fullstack-Dev. I maintained almost dead Java applications, wrote mobile apps in Kotlin and Swift and misused Python for everything else. But I always preferred frontend and web development. Answering desperate late-evening calls of Backend-Devs to help them center the text inside of a button or even centering the button itself always made me happy (and feel a little bit powerful :D)

As I have lots of experience in designing and implementing large frontend applications I fully understand that there are complex processes that require special use cases and thus complex software systems. But everywhere where it is not necessary I always tried to keep it simple.

And this why I always disliked heavy content management systems like Wordpress. The complicated customization of themes, PHP and the overhead of having this system installed on some kind of server drives me mad. Content management can be way more easily done with a little bit of technical affinity. Static website Generators like Hugo, Gatsby of Jekyll take over heavy CMS and manage their contents with the simple method of pushing markdown-files inside a git-repository. This is where the lightweight technical solution magic happens. 💫

As I did before at frobese, I built this simple website and blog with Hugo, highly inspired by this template, using sass and Bootstrap 5.0

But now to the more interesting part: the deployment. Github recently announced the beta of deploying to Github Pages directly from a repository using Github Actions without setting up a publishing source.

What does publishing source mean? What has improved?

Custom deployments were possible but it was kind of from behind through the chest into the eye. (Translating German sayings one to one always sound a little bit weird 😅)

How did it work? Whenever we pushed changes into our main branch the GitHub Actions workflow build the Hugo project and generated it into a new gh-pages branch. This branch was the publishing source as mentioned before.

How does it work now? The GitHub Actions beta now automatically detects that the source code I am using is based on Hugo and provides two different solutions how to deploy it. With a click on the Configure-Button GitHub creates the pages.yml for the GitHub Pages deployment that can be directly committed into main.

And that’s it. Deploying a static site was never easier.

Thanks for reading and see you next time 👩🏻‍💻