From Wordpress To Azure Static Web App

Posted by An IoT Odyssey on March 03, 2022 · 6 mins read

By day I am an embedded software developer. I worked mostly in two-way digital radio communications systems such as DMR, P25.

In my spare time I also tinker with other technologies outside of the embedded software domain. This tinkering and the curiosity to learn has been and continue to be a rewarding journey, it has taken me down many rabbit holes but equally enlightened by them.

About a year ago, I wanted to record these experiences and the knowledge that I have accumulated so I started blogging. As an embedded software person, creating and maintaining a blog site was another learning curve. At the time I looked at WordPress and even that felt fairly involved. I was more interested in content creation than maintaining a CMS site and so I outsourced that responsibility by going with WordPress.com.

While WordPress.com is a great platform, in my case (in term of flexibility and value for money in the long run) it did not seem like the best option. So I started looking at alternatives.

In this blog post, we will go through the process of getting a blog site up and running using Jekyll.

Jekyll - a static site generator

During my search for an alternatives I came across the concept of static site generator (SSG). Here is a good explanation of what is a static site generator. There are many SSG options out there, but I chose to go with Jekyll for how easy it was for me to get things up and running.

Installing Jekyll

The first step is to install Jekyll on our development machine. You can follow the installation instruction based on your machine’s operating system here.

Check that the installation was successful by verifying the installed version for the following:

  • ruby
  • gem
  • jekyll

Verify Ruby and Jekyll is installed

Create a new Jekyll site

Creating a new site is as simple as running jekyll command with the option new and passing in a name for the site.

Create new Jekyll site!

We can preview the newly created site by executing bundle exec jekyll serve

Preview new Jekyll site!

Jekyll uses themes to change the look and feel of a site. There are plenty of themes out there, some are paid while some are free. For my blog site I liked the look and feel of startbootstrap-clean-blog-jekyll. You can find more details on how to install the template on their GitHub page

Adding and Editing Site Content

Blog posts goes into the _posts folder. The file can be added manually, but we can also use the jekyll-compose plugin as well. To add the plugin:

  • Add gem 'jekyll-compose', group: [:jekyll_plugins] to the Gemfile.
  • In a console terminal run bundle again to install the gem above.

Now all we need to do is run bundle exec jekyll post "Hello World" to create a new post named hello-world.md.

Create new post!

We can also create stand-alone pages as well by running bundle exec jekyll page "Misc".

Create new page!

Deploying To Azure Static Web App Using GitHub Actions

In this section we will be using GitHub Actions to deploy the site to production using a CI/CD workflow.

The blog site’s source code will be hosted on GitHub. At this point let’s assumed everything has been commited and pushed to a GitHub repository. If you are not familiar working with GitHub, check out their documentation for creating a new repository here.

In order to get the blog site out there into the wild, it needs to be published to a server somewhere. For this we will create a static web app resource via the Azure portal to host the site. The documentation on how to create a static web app can be found here.

By default, when we create a static web app resource, an auto-generated domain name is associated with the site. It will be something like https://some-generated-domain.azurestaticapps.net. However, we would probably prefer the site to be associated with something like myblogsite.com or www.myblogsite.com. These are custom domain names which we can easily map to the generated domain name. The documentation on how to map custom domains to a static web app can be found here.

A CI/CD Demo

Let’s create a new post and push it to GitHub.

CI/CD Demo

When a new commit is pushed to GitHub, a build pipeline is triggered as defined by the GitHub action, and once the build is done we should see our new post published to the blog site.

Post CI/CD Demo

That is it. We now have a build and deploy pipeline where everytime we push some changes to GitHub, the site is rebuilt and published to the Azure Static Web App.