While having my blog offline a number of years tech has moved on a great deal. So getting back online I needed a new way of creating and writing my blog. Last iteration of this blog was running on a custom nodeJS Express based setup I created for fun. Blogposts were written as markdown files, and there was a small Express app reading a json-file and a directory of markdown files, exposing those as a blog.

New hosting setup

When watching some of the stuff happening at MS Build last week, I was really excited about the new Static Web App (SWA) offering in Azure. To me this offering has a near perfect mix for publishing content and applications in the current tech setup. From my viewpoint some of the main attractions are:

• Static content hosting with automatic CDN setup
• Easy custom domain setup with automatic SSL Certificates
• Flexible frontend build setups
• Azure Functions based API setup
• A really nice approach to branch-based staging sites
• Really nice getting started help with Azure creating a build/deploy script for Github actions

SWA are in beta and free to try, which is probably a bit risky for a blog, but the setup feels really complete, and I suspect it’s build on top of the static web site hosting in Azure Blob storage that came out last year, so I decided to give it a spin anyway, and if I’m right about it being built on top of blob storage and normal Azure CDN, I expect it to be a really reasonable way of hosting sites money wise. Anyway my blog has been down for several years, so my google juice is probably blown either way - so what’s the worst that can happen.

New blog engine

Since I had an old repo lying around with my old blog-posts in markdown format, I wanted to find a way of reusing these posts without too much transformation. Also I noticed in the SWA presentations some hints to using SWAs as a hosting option for static webapps, so I did a little bit of research on static site generators, noticing Jekyll and Hugo as top performers on “best of” lists around the web. Eventually I settled on trying out Hugo - mostly because it seemed to me to be more easy to get up and running locally on a Windows machine.

All I had to do (besides learning the basics about Hugo) was to add some headers into my markdown files, since my old blog engine kept blog-post data in a json-file on the side, and add a theme to my Hugo install.

Observations

Some hours later with a bit of tinkering with Hugo, reviving my Github acccount with my first private repo, and a half hour spent on setting up my site as SWA. I got this up and running. Some highlights:

Static Web Apps are indeed really, really easy to get up and running.

Even though I’m using Hugo which is not based on any npm packages, I got it running using this tutorial. All I had to change in the build setup was replacing a couple of lines in the YAML build file

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
    - uses: actions/checkout@v2
      with: 
        submodules: true
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2.4.8
      with:
        hugo-version: latest
    - name: Build site
      run: hugo -v
    - name: Build And Deploy
      id: builddeploy
      uses: Azure/static-web-apps-deploy@v0.0.1-preview
      with:
        azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ORANGE_RIVER_01BCD8E03 }}
        repo_token: ${{ secrets.GITHUB_TOKEN }}
        action: 'upload'
        app_location: 'public'
        api_location: 'api'
        app_artifact_location: ''

Basically configuring Github actions to use latest version of Hugo, do the build itself, and then telleing Azure SWA that there is only an app, not artifacts.

Hugo seems to be pretty expandable and indeed really, really fast at generating a static site.

It takes some research and for an old C# CMS-dev type guy like me, there’s plenty of new stuff to learn. But hey I end up with a website consisting of only static HTML/CSS/JS files - not a lot of attack surface here, and a foundation laid for making a really, really fast website.

Next up

So now the basics are in place - and I feel I’ve laid the foundation to build out with more functionality, here’s some of the stuff I’m going to look into in the future, and hopefully blog a little bit about as things move along:

• I need to add a RSS-feed to this setup - should be something I could configure in my Hugo setup
• Add a setup that let’s me publish shorter texts on the go - preferably from my phone.
• Add a tag-based filter opportunity to this blog
• Add some interaction with a comment track
• …