I wanted to create my personal portfolio and blog with complete creative control, robust SEO capabilities, and cost-effective hosting. After exploring various platforms and hosting solutions, I discovered that Azure Static Web Apps combined with Next.js provides an unbeatable combination of features, performance, and affordability for just $10/year total cost. In this article, I'll walk you through the technical implementation and architecture decisions that power this blog.
<h2>Why Azure Static Web Apps?</h2>
After evaluating the competitive landscape of modern hosting, Azure Static Web Apps stood out as an excellent and highly cost-effective solution. While I am not currently using its generous backend function capabilities, the platform's robust CI/CD integration and overall value proposition made it the right fit for this blog. The free tier provides everything needed for a professional blog:
<ul>
<li>100 GB bandwidth per month - more than sufficient for personal blogs</li>
<li>0.5 GB storage - adequate for static assets and content</li>
<li>2 custom domains per app - essential for professional branding</li>
<li>Free SSL certificates - automatically managed</li>
<li>Managed Azure Functions - 1 million free executions for any backend needs</li>
</ul>
For my domain registration, I chose Cloudflare Registrar, which sells .com domains at cost for $10.44/year with no markups or renewal surprises. Combined with Azure's free hosting, the total annual cost is just $10.44.
<img alt="Description of image" src="/assets/blog/images/nextjs-azure-static-web-apps-blog-1.png">
<h2>The File-Based Content Architecture</h2>
While Azure Static Web Apps includes managed Azure Functions, I chose a file-based approach for blog content because of its simplicity and perfect fit for static content that doesn't change frequently.
The Solution: Store blog posts as <code>.md</code> files in the repository and use Next.js Static Site Generation to read these files at build time, generating pre-rendered HTML for every blog post.
<h3>Content Management System</h3>
The blog operates on a simple file-based system:
<pre><code class="language-javascript">// services/blogService.js - Simple file-based content fetching
const getBlogPosts = async () =&gt; {
 const filePath = path.join(publicDirectory, 'assets', 'blog-posts.json');
 const fileContents = fs.readFileSync(filePath, 'utf8');
 return JSON.parse(fileContents);
};

const getBlogPostContent = async (id) =&gt; {
 const filePath = path.join(publicDirectory, 'assets', 'blog', `${id}.md`);
 const fileContents = fs.readFileSync(filePath, 'utf8');
 return fileContents;
};
</code></pre>
This approach provides version control for all content, eliminates database hosting costs, and enables build-time processing where content is processed once during build rather than on every request.
<h2>Static Site Generation for SEO Excellence</h2>
Static Site Generation (SSG) generates HTML files at build time rather than runtime, maximizing performance and SEO benefits:
<ul>
<li>Instant page loads: Pre-rendered HTML files serve immediately</li>
<li>Perfect SEO scores: Search engines can easily crawl and index static HTML</li>
<li>Consistent performance: No server-side rendering delays</li>
</ul>
The core functionality uses Next.js dynamic routes with static generation:
<pre><code class="language-javascript">// pages/blog/[id].js - Static generation for all blog posts
export async function getStaticPaths() {
 const posts = await getBlogPosts();
 const paths = posts.map(post =&gt; ({
 params: { id: post.id.toString() },
 }));
 return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
 const rawContent = await getBlogPostContent(params.id);
 const processedHtml = marked(rawContent);
 const postContent = DOMPurify.sanitize(processedHtml, purifyConfig);
 const postMetadata = await getBlogPostMetadata(params.id);
 return { props: { postContent, postMetadata } };
}
</code></pre>
This ensures all blog URLs are pre-rendered at build time with DOMPurify for XSS protection and comprehensive SEO meta tags.
<h2>How Easy It Is to Add New Content</h2>
Adding a new blog post requires just two simple steps:
<ol>
<li>Create the Markdown file: Add <code>new-post.md</code> to <code>/public/assets/blog/</code></li>
<li>Update the metadata: Add entry to <code>blog-posts.json</code></li>
</ol>
<pre><code class="language-json">{
 "id": "new-post",
 "title": "My New Blog Post",
 "date": "2025-06-02", 
 "excerpt": "Description of the new post...",
 "keywords": ["tech", "development"],
 "ogDescription": "Social media description",
 "ogImage": "/assets/blog/images/new-post.png"
}
</code></pre>
The next deployment automatically generates the new route, creates SEO-optimized HTML, and updates the blog listing page.
<h2>Deployment Configuration</h2>
Next.js Static Export Configuration:
<pre><code class="language-javascript">// next.config.js - Required for static export
const nextConfig = {
 reactStrictMode: true,
 output: 'export', // Critical: generates static HTML files
};
</code></pre>
Azure Static Web Apps Configuration:
<pre><code class="language-json">// staticwebapp.config.json - Optimizes routing and caching 
{
 "navigationFallback": {
 "rewrite": "/index.html",
 "exclude": ["/_next/static/*", "/_next/data/*", "/assets/*"]
 },
 "globalHeaders": {
 "Cache-Control": "public, max-age=0, s-maxage=60, stale-while-revalidate=86400"
 }
}
</code></pre>
Azure Static Web Apps provides seamless GitHub integration with automatic builds on every commit and preview deployments for pull requests.
<img alt="Description of image" src="/assets/blog/images/nextjs-azure-static-web-apps-blog-2.png">
The Cloudflare domain integration is straightforward: register domain at Cloudflare, add custom domain in Azure portal, update DNS records, and SSL certificate is automatically provisioned.
<h2>Cost Analysis and Performance</h2>
Real cost breakdown:
<ul>
<li>Domain registration via Cloudflare: $10.44/year (.com)</li>
<li>Azure Static Web Apps: $0 (within free tier limits)</li>
<li>Total annual cost: $10.44</li>
</ul>
Current resource usage:
<ul>
<li>Bandwidth: &lt;1% of 100GB monthly limit</li>
<li>Storage: 1MB used of 500MB limit (~0.2% used)</li>
<li>Custom domains: 1 of 2 allowed</li>
<li>Capacity: At current usage rate, could support ~1,000 blog posts</li>
</ul>
This makes it one of the most cost-effective professional blog setups possible while maintaining enterprise-grade features including automatic SSL, global CDN, and automated deployments.
<h2>Conclusion</h2>
Building a personal blog with Next.js and Azure Static Web Apps provides complete control, excellent performance, and minimal costs. The file-based approach makes content management incredibly simple - adding a new blog post is as easy as creating a Markdown file and updating a JSON entry. 
Combined with Azure's free hosting and Cloudflare's at-cost domains, this setup provides professional blogging capabilities for just $10/year with enterprise-grade features like global CDN, automatic SSL, and automated deployments.
Call to Action: If you're considering building your own blog platform, this tech stack offers an unbeatable combination of features and cost-effectiveness, proving that modern web development can be both powerful and accessible.
<hr>
<h3>Resources</h3>
<ul>
<li>Azure Static Web Apps Documentation: <a href="https://learn.microsoft.com/en-us/azure/static-web-apps/">https://learn.microsoft.com/en-us/azure/static-web-apps/</a></li>
<li>Next.js Static Export Guide: <a href="https://nextjs.org/docs/app/guides/static-exports">https://nextjs.org/docs/app/guides/static-exports</a></li>
<li>Cloudflare Registrar: <a href="https://www.cloudflare.com/products/registrar/">https://www.cloudflare.com/products/registrar/</a></li>
</ul>
<hr>

Complete guide to building a professional blog with Next.js and Azure Static Web Apps for just $10/year. Learn the architecture, deployment, and content management strategies.

Building a Modern Blog Portfolio with Next.js and Azure Static Web Apps: A Developer's Journey to Free, Scalable Hosting