Landon Fowler
Blog

Rebuilding My Site with AI and Azure Static Web Apps

·Landon Fowler

The Background

Recently, the hosting service for this site (landonfowler.com) suddenly went down without explanation or an expected time to resolution. Getting the site back up was the immediate problem. But it also got me thinking long-term about what hosting solution was best for my site.

I have really enjoyed creating posts for this blog over the years. But as I thought about what is needed to enable that, a full-blown WordPress site just wasn't necessary. As I waxed eloquent (or maybe not so much) on LinkedIn about my hosting woes, a friend suggested a service that I wasn't familiar with, Azure Static Web Apps. After using it to throw up a quick landing page to cover the outage, I started to wonder if it could become my permanent solution.

The New Setup

The way it works is pretty simple. Codex helps me work on the site, GitHub keeps the files and their history, and Azure Static Web Apps puts the site online. When I send a change to GitHub, GitHub Actions builds the site and sends it to Azure. That’s the same process whether I’m changing the home page, publishing a new article, or tweaking the aesthetic.

Under the hood, the site uses Eleventy to turn my posts into pages ahead of time. Azure serves those pages directly, so there’s no live WordPress instance or database involved when someone reads a post. And if I ever need to move again, I can rebuild from the files in GitHub. Azure’s Free plan includes globally distributed hosting, custom domains, and HTTPS. It has usage limits and comes without an uptime SLA, but for this blog (and, I’d argue, for many simple websites), it was a great fit. Azure Static Web Apps hosting plans

Where Codex Helped

I’m primarily a data guy. I have plenty of experience with Azure and scripting, but I’m by no means a web developer. Getting a new home page online would have been one thing. Getting years of articles, images, and links working again was a different proposition altogether.

What made this doable for me was being able to talk conversationally at a high level with AI, and then have it implement all the messy bits. I wanted old links to keep working, my screenshots to show up correctly, and people to be able to copy the code samples from a post. Codex could work directly in the project, make those changes, and check that the result worked. I could open the site locally, click through it, and talk back and forth with Codex about what I wanted to change. That worked for the look and feel of the site just as well as it did for getting the old content back.

Here’s the prompt I started with:

I currently have a wordpress website. There have been issues lately with the hosting service, which you can find details about in memories from other chats and projects. I'd like to transition to using an Azure Static Webapp instead. I've already created the github repo and given you access to that folder. I've also created the web app and pointed it at that repo. I want you to help me plan the transition and then execute it.

That was enough to get us started (and it was a mighty solid start, I might add). From there we could iterate, talking back and forth, and work out the site details as we went.

How to Build Your Own

1. Give AI a Place to Work

Create a repository on GitHub, clone it to your computer, and open that folder in your AI tool of choice. GitHub Free supports both public and private repositories. Standard GitHub-hosted Actions runners are free for public repositories, and private repositories get a monthly allowance. GitHub Free · GitHub Actions billing

If you’re starting from scratch, tell AI the basics what you want to see. Something like this is plenty to get the conversation going.

Help me make a simple personal site with a home page, an About page, and a blog. I want to host it on Azure Static Web Apps using GitHub. Start with one sample post and show me how to preview it and add another one.

Open the preview and click around. Does it feel like your site? If the home page is too busy or the posts are hard to read, tell AI what you’d like to change and take another look. When you’re happy with it, have AI commit the changes and push the project to GitHub.

2. Connect GitHub to Azure

In the Azure portal, create a Static Web App. Choose the Free plan, pick GitHub as the source, and select your repository and publishing branch (probably main). Then click Review + create. Azure portal quickstart

Azure creates a GitHub Actions workflow when you connect the repo. Ask AI to check that the workflow Azure created knows how to build and publish your site. Once the changes are on GitHub, look in the Actions tab to see whether the deployment succeeded. Then open the address Azure gives you. You can use that address as long as you like.

3. Point Your Domain to the New Site

I wanted people to keep finding me at landonfowler.com, rather than the Azure-provided address. Once the new site was working on Azure, the next step was to point my existing domain there.

In your Static Web App, go to Custom domains and add the name you want to use. Azure gives you a record to add wherever you manage your DNS. That proves the domain is yours. Then update the website’s DNS record to point it to Azure. The exact record depends on your DNS provider, so follow their instructions for your setup. I have to say that Azure does a great job of walking you through the steps to carry out on its side. Azure custom domain setup

Once the DNS changes take effect and Azure has issued the HTTPS certificate, open the site at your domain. With this done for www.landonfowler.com, I could open an old article link and end up right where I expected.

4. Write a Post

One requirement I had was to be able to continue posting to the site easily, and Codex delivered. I can write a draft in Markdown or Word and ask Codex to turn it into a post that follows the format of the rest of the blog. I can even ask it to format a code example so it’s easy to read and copy.

Then I open the preview, read through it, and make whatever changes I want. When I'm happy, I ask it to push the updates to the GitHub repo. Once the post lands on GitHub, Azure gets the updated site through the same process that put it online in the first place. The post shows up on the home page and in the RSS feed without me having to update either one by hand.

5. When in Doubt, Ask AI

The wild thing is, you don't need to understand all of the above points, or any of them, to be successful with this or projects like it. Tell AI what you want to do, and let it work out how to do it. If there is a piece you don't understand, don't be afraid to ask it for clarification. Don't miss this opportunity to both build things you never imagined and to learn more along the way. It's not infallible and can make mistakes, but overall AI can be a fantastic tutor.

The Payoff

I started out just wanting a landing page for a temporary outage. What I ended up with was a site that’s simpler to run, free to host, and easy to rebuild. I’ve also gained a publishing process that I can keep improving over time. I don't need to know all the nitty-gritty webby details, especially when it comes to making it look pretty. I just need to talk back and forth with my AI assistant. And any time I learn something worth sharing, I can type up a draft, review it, and tell that digital assistant "Make it so".

Free Plan Limits

Below are the free plan limits as of this writing. Check the links below for the latest details.

  • GitHub Free. Standard GitHub-hosted runners are free for public repositories. Private repositories draw from the account’s included allowance of $12 USD per month in compute usage and 500 MB of Actions storage. If you run enough builds to go over your allowance, extra usage can cost money depending on your billing settings. GitHub Actions billing · GitHub plan allowances
  • Azure Static Web Apps Free. The monthly bandwidth limit is 100 GB per Azure subscription, with no paid overage option on the Free plan. Each app gets 250 MB of storage per environment (500 MB total), up to three preview environments, and two custom domains. My root domain and its www version use both slots. The Free plan has no uptime SLA. If you want a custom domain, registration and renewal are separate costs. Azure Static Web Apps quotas · Azure hosting plans
← Back to the blog