Is this the tech bro equivalent of dying your hair a different color? /s
I have wanted to move away from the WordPress based solution that I used for blog.gurfin.se for some time now. Given that WordPress is prone to… inviting, uninvited, guests… I wanted to move to something that was more secure and lighter weight.
Que Hugo the Golang based static website generator that now builds this blog, from my notes made in Obsidian. This new setup achieves the goals that I mentioned above. It is also super fast! But that is mostly thanks to it being a static resource, so you don’t have to wait around for a backend and database to do a bunch of operations before you are served the content. I also moved hosting provider, from my old solution to Azure. Also, since I have been infatuated by CI/CD and automation lately, I have built a pipeline and automations that deploy changes that are pushed to the master branch to the production server hosted in Azure.
Hugo
Using Hugo it is possible to convert Markdown files into webpages. It is quite popular to do this for blogging reasons, since you don’t really need a dynamic page to sustain that. Written in Go the compile times are also very short:
This will generate public files in the public/ directory, which will then be used to serve the webpage. This directory can be deployed to a hosting solution, like a VPS or in my case, the cloud.
CI/CD and automations
I use Gitlab to host most of my code - I think the CI/CD is more intuitive and it also allows me to host it on-prem. I run a Gitlab runner locally in my homelab as well to run the jobs. The pipeline is split into three stages:
- Test
- Build
- Deploy
Test
The testing part of the pipeline will try building the webpage locally first, and run some secret detection jobs to scan through the code before it is deployed. This step is crucial and must pass for any subsequent jobs to be run.
Build
Once all testing jobs have passed, the pipeline will then compile the webpage using Hugo. This is done by running the hugo command in the repository root.
Deploy
Once all testing jobs have passed, the pipeline will then compile the webpage and push the public/ directory to the Azure appliance, thus completing the deployment of the revised blog site.
Putting it all together:
variables:
API_TOKEN: '$DEPLOYMENT_TOKEN'
APP_PATH: '$CI_PROJECT_DIR/public'
stages:
- test
- build
- deploy
test:
stage: test
script:
- hugo
build:
stage: build
environment: production
script:
- hugo
artifacts:
paths:
- public
expire_in: 1 week
rules:
- if: '$CI_COMMIT_BRANCH == "master"'
changes:
- content/
deploy:
stage: deploy
image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
script:
- echo "App successfully deployed to Azure."
rules:
- if: '$CI_COMMIT_BRANCH == "master"'
changes:
- content/
include:
- template: Jobs/Secret-Detection.gitlab-ci.yml
Azure
Why host in Azure?
The primary reason is that Azure is a platform that I want to expand my knowledge of, there are really no other reason than that. 🥸 However, I did want to use a hosted solution for the blog. The goal of the blog is to be a store for all the tech stuff I do, not to be a subject of on-prem hosting experimentation (I have other project for that).
It is also very convenient since I use Office 365 quite heavily already, so having a single platform for Cloud services is quite nice.
Azure Static Web App
Azure generously offers a free tier of their static web app hosting for testing and personal projects, which suits my use case perfectly.
I will then be able to utilize Gitlab to push the public/ folder to Azure automagically. Azure actually has an image for performing the deploy to their static web app service, directly in the Gitlab CI/CD pipeline. Here is how I will use it to publish my page:
variables:
API_TOKEN: $DEPLOYMENT_TOKEN
APP_PATH: '$CI_PROJECT_DIR/public'
deploy:
stage: deploy
image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
script:
- echo "App successfully deployed to Azure."
If you want to build something like this yourself I recommend checking out this tutorial by Microsoft.