My personal journey: Getting started with Hugo
Holger Bruchelt
First steps
When Robert, Goran and I started our unofficial SAP on Azure Video podcast none of us had thought how much content we would create. Almost every week we come together, talk about latest and greatest things in the SAP on Azure – or better SAP and Microsoft – world and learn from the best in the SAP on Azure community.
Lost of content
In the meantime we have over 70 episodes with lots of fantastic content. I had maintained a GitHub repo where I try to document the content in one long list. The intention was to make it fairly easy to search (just open the GitHub page, hit Strg-F and search for what you are looking for). While it was / is working OK, the huge amount of content that we have created over the months is getting bigger and bigger and i was looking for another option to make the content more accessible.
At the same time I had learned about Azure Static Website and had wanted to go hands-on for quite some time. Of course there are some fantastic tutorials out there, but I wanted to make something meaningful.
I had started to look for some nice intro-content. My times of developing web pages are long gone and I didn’t really know where to start. What would be a good framework? What should I use to create a nice UI? What could I learn?
So I had started to bookmark links to pages / tutorials that looked interesting. I noted down CSS libraries that looked interesting, JavaScript frameworks, …
How to get started?
Since I had postponed this for quite some time I put a note in my ToDo List: During the Christmas break I wanted to finally get started.
Then after my last working day in December, I was listening to the My News Wrap podcast from the great Christian Lechner where he talked about a tutorial that he had found on using Azure Static Web Apps to create a Cookbook recipe website and it immediately got me thinking: what is so different on showcasing recipes compared to SAP on Azure videos podcasts?
Once back at home I sat down and started to look at the tutorial. I have to admit that I had not heard about Hugo, but it looked interesting.
Following [Nitya Narasimhan[(https://twitter.com/nitya) tutorial I started to create a first Hugo website, added the Cookbook theme and had my first recipe displayed a short time later.
Learning Hugo
As mentioned I don’t know Hugo, but I found the very basic concepts easy to understand. So clearly not being an expert I was able to do the right modifications in the Cookbook theme, adjusting some properties, enhancing some layout settings to include links to the YouTube and Anchor sites. I still don’t fully understand all the concepts, but was able to do some modifications on the single.html file which referenced the statstable.html. Adding new parameters and with this if-queries and links was quite easy to understand so the page slowly looked like something I could live with (at least for a first quick start).
First modifications
Then it came to some color modifications. Again I had not worked with webpages for a long time so I had not even known about the Bulma.io CSS framework that was used. However, the documentation was easy enough for me to search and understand the basics to do some rudimentary adjustments (I know it does not look perfect yet – but I am still learning :-))
Finally I obviously need to add the most important thing: the content. Luckily we had 70+ episodes already so I started with creating the default.md file. I changed the default cookbook theme and added parameters like author_link, YouTube URL, Anchor, Spotify and Apple Podcast links and obviously also changed the content.
The final step was to parse and rewrite the existing content of the episodes in the new format. After some tweaking that also worked out and I had 70+ entries ready to be published.
Publishing to Azure Static Web Apps
With that I switched to my Azure Portal subscription. Azure Static Web App is a Free service – right! A FREE services that you can use for private workload. Getting this started was actually much easier than I had thought: just create the Azure Static Web App, connect it to the GitHub repo (which I had created to publish my Huge website) and that was it!
GitHub action would get triggered and a few minutes later the whole website was up and running. Amazing!!!
The result is what you can find here: www.SAPonAzurePodcast.de. Since I did not know of a good place to document my learnings, this page here is supposed to do exactly that: put together the information that I found to create this site. I have lots of additional notes that I need to publish here - so Stay tuned for more! (there are still lots of open issues I am working on :-)
One last thing…
One issue that I was facing at the very beginning was that for some reason starting with episode 47 the pictures would not show up. I looked at the name, copy and pasted different names, replaced the content, … nothing would work. The picture for episodes 47 to 72 would just not load. I googled for a lot of things, but I could not find anything. So finally I decided to ask a question in the Hugo board. My guess was that Hugo would only allow 50 pictures (I had three more “non-episode” related pictures in my folder) and I needed to update my configuration. So I posted my question and went for a walk.
While walking it occurred to me that maybe I had missed a very obvious thing: maybe the filename was actually wrong. While looking for an answer I had learned that Hugo is actually case sensitive. So I had used all lower-case letters for the name - but what I had not done was check the extension. So I used my mobile phone to check the GitHub repo – and there it was. All episodes up to 47 had the extensions jpg, then JPG. Could it be that simple? So again just using my phone, I updated the episode filename and pointed it to the JPG file name. Once I had committed the change, the GitHub Action was running and 2 minutes later episode 47 had the picture! All was done from my phone!!!!