Let's Build A Recipe Blog with Azure Static Web Apps & Hugo
Tags: staticwebapps, gohugo, beginners, githubactions
Published: 2021-12-07 12:00:00

---
title: Let's Build A Recipe Blog with Azure Static Web Apps & Hugo
description: I cooked up a blog with @GoHugoIO and  @AzureStaticApps as a fun morning project! Here's how.
published: true
date: 2021-12-07 12:00:00 UTC
tags: staticwebapps, gohugo, beginners, githubactions
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7uodmfho04m4h9d8sya.png
---

> This post is adapted from a longer article first published on my [Learn Playwright](https://bit.ly/learn-playwright?WT.mc_id=javascript-51408-ninarasi) blog. Any updates to content will be published on _that_ site first.

---

### 🔖  | Today's Resources 

 * [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/) - browse the documentation!
 * [Azure Static Web Apps: Learning Path](https://docs.microsoft.com/en-us/learn/paths/azure-static-web-apps/) - learn by doing!
 * [Playwright](https://playwright.dev) - an open-source test automation framework.
 * [Publish a Hugo Site to ASWA](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo) - an easy-to-follow tutorial
 * [Hugo Cookbook Theme](https://github.com/deranjer/hugo-cookbook) - a handy recipe blog theme
 * [Recipes4AJ: GitHub Repo](https://github.com/nitya/aswa-hugo-recipes4aj) - README documents my entire build process!
 * [Recipes4AJ: Deployed Site](https://green-stone-0ef96ef10.azurestaticapps.net/) - Because we all need recipes in our lives!
 
--- 

### 🗺 | Post Outline
 
 * ✅  | Objective: Quickly Build & Deploy a Demo App!
 * ✅  | About Azure Static Web Apps
 * ✅  | Recipes4AJ: Yes, I Cooked Up An App!
 * ✅  | Tutorial: Azure Static Web Apps + Hugo
 * ✅  | Automation with GitHub Actions!
 * ✅  | Additional Resources

--- 

### 🎯 | Objective: Quickly Build & Deploy a Demo App!

If you've been following my posts recently, you might know I'm playing around (pun intended) with test automation tools and workflows using [Playwright](https://playwright.dev). Learn more here:

{% link https://dev.to/azure/hello-30daysofplaywright-2fl1 %}

My next step was to [explore Playwright Test tools](https://nitya.github.io/learn-playwright/002-getting-started-testing/#day-3-up-next) in Playwright, and dive deeper into command-line, authoring and debugging support in more detail. 

But it occurred to me that doing this with a somewhat realistic app as an experiment sandbox, might make more sense.

---

## About Azure Static Web Apps

Enter [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/) - an Azure service that helps you build and deploy a full stack web app to Azure from a code repository. Code changes trigger build/deploy actions, making the developer experience painless. 

Plus, there's a free tier for personal and hobby projects that is ideal for projects like this. 

The key benefit to static web apps is their ability to separate static assets (HTML/CSS/JS files, images etc.) from the web server - making it easier to distribute and host static assets globally for better performance. Web server interactions can be abstracted into API endpoints hosted using a [serverless architecture](https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview) - leading to more efficiencies in performance and costs.

Azure Static Web Apps has tutorials for many popular [static site generators](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-gatsby) and [front-end frameworks](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react) to get you up-and-running fairly quickly. And don't forget to check [community posts](https://dev.to/t/azurestaticwebapps) with additional tips and tricks.

Have questions or comments, do leave them [here](#comments) on this post and you might just inspire me to do something more!

{% twitter 1440403652758228996 %}


Alright then - it's settled.  I want to build a fun real-world app using Azure Static Web Apps with a supported static site generator or a front-end framework. And I can then use it to explore the Playwright tools and API!

So what's a fun use case you ask?


---

## Recipes4AJ: Yes, I Cooked Up An App!

This was really the fun part! Like millions of people around the world, I'd been cooking up a storm over the past couple of years (thanks pandemic!). And I'd posted quite a few tweet-sized recipes under [#RecipesForAJ](https://twitter.com/hashtag/Recipes4AJ?src=hashtag_click&f=live) or [#Recipes4AJ](https://twitter.com/search?q=%23RecipesForAJ&src=typed_query&f=live)). 

What if I build a static web site that featured these recipes - and had simple tags and search functionality to help folks browse or discover recipe cards easily? Would that work? And how long would it take me to build it?

Two things sealed the deal:

 * I'm a huge fan of [Hugo](https://gohugo.io) - it's fast and flexible, with a rich set of themes for a rapid start. And voila- there was a [Cookbook Theme](https://github.com/deranjer/hugo-cookbook) that met my needs!
 * Azure Static Web Apps has a [quickstart](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo) for using Hugo. And yes, it took next to no time to complete the tutorial and have my basic (empty) blog scaffolded and deployed - do go [check out the site](https://bit.ly/recipes-for-aj)!

Here's my celebratory post that morning!

{% twitter 1467903204218355712 %}


---

## Tutorial: Azure Static Web Apps + Hugo

This post is meant to focus on getting to the point where we have Playwright setup for end-to-end testing so I want to speed up to that point. If you want to try this out, follow the steps in the [Azure Static Web Apps Hugo Quickstart](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo) - you can also watch an older [video from my colleague](https://www.youtube.com/watch?v=Ik9AfYKn-p0) that walks through the basic steps interactively!

For convenience, I documented my experience in the project [README](https://github.com/nitya/aswa-hugo-recipes4aj#readme) - it might be useful if you want to learn how to use this specific theme, or check out issues encountered and how to troubleshoot them. The key steps are:
 * [Install Hugo](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#21-install-hugo)
 * [Scaffold your blog](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#22-create-new-blog-site)
 * [Initialize Git](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#23-initialize-git-repo)
 * [Add a Hugo Theme](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#24-add-hugo-theme)
 * [Customize and Configure Theme](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#25-customize-and-configure-theme)
 * [Create the first post](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#26-create-your-first-content-item)
 * [Push Commits to GitHub](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#28-push-to-github)
 * [Deploy to Azure Static Web Apps](https://github.com/nitya/aswa-hugo-recipes4aj/blob/main/README.md#29-deploy-your-web-app)

Note that all but the last step are related to the use of the Hugo static site generator. The actual Azure Static Web Apps deployment happens in the final step - you should see something like this when done.

![Screenshot of Azure Static Web Apps Deploy in Progress](https://github.com/nitya/aswa-hugo-recipes4aj/raw/main/img/aswa-building.png)

---

## Automation with GitHub Actions!

A key benefit of using Azure Static Web Apps is that it sets up GitHub Actions to automate the build-deploy steps for you, on every commit. 

Here is what the default YAML configuration file looked like for my project. You can see it is set up for two main trigger events -- _push_ events (commits) and _pull requests_. And has two associated jobs (_build and deploy_ and _close pull request_) that will be run based on a matching condition for these events.

```yaml
name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

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: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_STONE_0EF96EF10 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GREEN_STONE_0EF96EF10 }}
          action: "close"
```

Now, any changes you make - e.g., adding a new post, or changing the content in an existing post - automatically triggers a rebuild and deploy of the blog. You can track status of past and ongoing runs in the [Actions tab](https://github.com/nitya/aswa-hugo-recipes4aj/runs/4433120328?check_suite_focus=true) of your GitHub project. Check out the [Test GitHub Actions](https://github.com/nitya/aswa-hugo-recipes4aj#210-test-the-github-actions-workflow) step of my README to see how you can see this in action by adding a new blog post.

![Screenshot of Azure Static Web Apps Deploy in Progres](https://github.com/nitya/aswa-hugo-recipes4aj/raw/main/img/aswa-updated.png)

At the end of this step, my blog was deployed and the first post was visible as shown above. Now, it was time to think about integrating Playwright -- check back for an updated link to the blog post where I talk about how I do just that!

---

## Additional Resources

Want to learn more about Azure Static Web Apps? Check out the [current community posts on dev.to](https://dev.to/search?q=static%20web%20apps) that explore this topic in more detail.

Then check out this post about a handy tool - the [Azure Static Web Apps CLI](https://github.com/azure/static-web-apps-cli) developed by my colleague [Wassim Chegham](https://twitter.com/manekinekko)

{% link https://dev.to/azure/leveling-up-static-web-apps-with-the-cli-5g5h %} 

And this more recent post about a couple of great resources built my another colleague [Aaron Powell]() to really jumpstart your ASWA-development process. Hint: Think templates and command-line!

{% link https://dev.to/azure/scaffolding-static-web-apps-4p97 %}

And definitely follow the Azure publication for more awesome content from my collegues on all things Cloud, AI and Multi-platform app development!

{% org azure %}

Now - go cook up something of your own!!

---

### 🔖  | Today's Resources 

 * [Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/) - browse the documentation!
 * [Playwright](https://playwright.dev) - an open-source test automation framework.
 * [Azure Static Web Apps: Learning Path](https://docs.microsoft.com/en-us/learn/paths/azure-static-web-apps/) - learn by doing!
 * [Publish a Hugo Site to ASWA](https://docs.microsoft.com/en-us/azure/static-web-apps/publish-hugo) - an easy-to-follow tutorial
 * [Hugo Cookbook Theme](https://github.com/deranjer/hugo-cookbook) - a handy recipe blog theme
 * [Recipes4AJ: GitHub Repo](https://github.com/nitya/aswa-hugo-recipes4aj) - README documents my entire build process!
 * [Recipes4AJ: Deployed Site](https://green-stone-0ef96ef10.azurestaticapps.net/) - Because we all need recipes in our lives!