Skip to content

Repository files navigation

Azure Static Web Apps CI/CD

brycesweb.com

Bryce Cee’s personal site for writing and case studies about agent infrastructure, developer tooling, monorepo systems, and AI-assisted engineering.

Stack

  • Astro with static output
  • Tailwind CSS
  • MDX content collections
  • Shiki syntax highlighting
  • Azure Static Web Apps
  • Cloudflare Web Analytics

Local development

Node.js 22.12 or later is required.

npm install
cp .env.example .env
npm run dev

Use npm run check for Astro and TypeScript diagnostics, npm run build for the production build, and npm run preview to serve the generated dist/ directory.

Add a blog post

Create an .md or .mdx file in src/content/blog/:

---
title: 'A specific, useful title'
description: 'The search and social summary.'
publishedAt: 2026-08-23
tags:
  - Agentic engineering
draft: false
---

Post content starts here.

The schema is defined in src/content.config.ts. Published posts appear on the home page, writing index, article routes, sitemap, and RSS feed automatically.

Cloudflare Web Analytics

  1. Add brycesweb.com in Cloudflare Dashboard → Web Analytics.
  2. Copy the site token from the generated beacon snippet.
  3. Set PUBLIC_CLOUDFLARE_WEB_ANALYTICS_TOKEN in .env for local builds.
  4. Add the same name as a GitHub Actions repository secret for production.

BaseLayout.astro emits the privacy-friendly beacon on every page when the token is configured. It does not use cookies, so this site does not need an analytics cookie banner.

Contact form and Gmail delivery

The contact page uses the Formspree Vanilla JS ESM integration and submits to form xkjwapgd. It shows field-level validation and success or error states without leaving the site. Its HTML action remains a no-JavaScript fallback, and a honeypot field provides baseline spam filtering.

In the Formspree dashboard, keep cheruiyotbryan@gmail.com as the verified notification email. The form ID is public by design; Formspree owns email delivery and keeps Gmail credentials out of the repository and generated site.

Azure Static Web Apps deployment

The workflow at .github/workflows/azure-static-web-apps-calm-cliff-020407010.yml runs Astro checks, builds dist/, deploys pushes to main, and creates pull request preview environments.

The existing Azure deployment token must remain available as the AZURE_STATIC_WEB_APPS_API_TOKEN_CALM_CLIFF_020407010 repository secret.

Configure brycesweb.com and managed SSL

  1. Open the Static Web App in the Azure portal and copy its generated hostname, such as <app-name>.azurestaticapps.net.
  2. Open Custom domains → Add → Custom domain on other DNS and enter brycesweb.com.
  3. Add the TXT validation record that Azure displays. Wait until Azure confirms domain ownership.
  4. At the DNS provider, create a CNAME for the apex host (@) that targets the generated Azure hostname. The provider must support CNAME flattening or an equivalent ALIAS/ANAME record. In Cloudflare DNS, use a flattened @ CNAME and keep it DNS only during Azure validation.
  5. Complete the custom-domain wizard. Azure Static Web Apps provisions and renews the managed TLS certificate without a separate certificate resource.
  6. Optionally add www as a second custom domain, with a CNAME to the generated Azure hostname, then redirect it to the apex domain at the DNS or edge layer.

Do not remove the generated Azure hostname or DNS validation records while the custom domain is active.

About

Portfolio

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Used by

Contributors

Languages