<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Static Website - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Static Website - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Mon, 10 Aug 2026 19:34:13 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/static-website/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How to Add Dynamic Features to a Static Site Without a Server ]]>
                </title>
                <description>
                    <![CDATA[ Static sites are having a moment, and it makes sense. A folder of HTML, CSS, and JavaScript files is fast to load, cheap to host, and very hard to break. Tools like Astro, Eleventy, and Hugo build tha ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-add-dynamic-features-to-a-static-site-without-a-server/</link>
                <guid isPermaLink="false">6a79dc91e7c11cc73062288e</guid>
                
                    <category>
                        <![CDATA[ Static Website ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Manish Shivanandhan ]]>
                </dc:creator>
                <pubDate>Mon, 10 Aug 2026 14:13:37 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/uploads/covers/5e1e335a7a1d3fcc59028c64/9796f3aa-8b5c-4bcf-804b-57725cc2c08f.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Static sites are having a moment, and it makes sense. A folder of HTML, CSS, and JavaScript files is fast to load, cheap to host, and very hard to break.</p>
<p>Tools like <a href="https://astro.build/">Astro</a>, <a href="https://www.11ty.dev/">Eleventy</a>, and <a href="https://gohugo.io/">Hugo</a> build that folder for you from Markdown files and templates. Hosts like Netlify, Vercel, and Cloudflare Pages then serve the result from a CDN, often for free.</p>
<p>Then your site needs to actually do something. A reader wants to leave a comment, or someone wants to email you. Maybe you want to show live prices, hide a page behind a login, or collect email addresses before a launch.</p>
<p>Most developers reach for a backend at this point. They spin up an Express app, add a database, and pick a hosting plan. Now they own a server, and servers need care forever.</p>
<p>The good news is that you often don't need one. Most dynamic features on a small site work fine without a server of your own, so here's how to think about the problem.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a href="#heading-static-does-not-mean-frozen">Static Does Not Mean Frozen</a></p>
</li>
<li><p><a href="#heading-start-with-what-the-browser-already-does">Start With What the Browser Already Does</a></p>
</li>
<li><p><a href="#heading-handling-form-submissions">Handling Form Submissions</a></p>
</li>
<li><p><a href="#heading-serverless-functions-for-the-rest">Serverless Functions for the Rest</a></p>
</li>
<li><p><a href="#heading-databases-and-logins-you-can-rent">Databases and Logins You Can Rent</a></p>
</li>
<li><p><a href="#heading-comments-search-and-payments">Comments, Search, and Payments</a></p>
</li>
<li><p><a href="#heading-know-when-you-have-outgrown-it">Know When You Have Outgrown It</a></p>
</li>
</ul>
<h2 id="heading-static-does-not-mean-frozen">Static Does Not Mean Frozen</h2>
<p>The word "static" describes how your HTML reaches the browser, not what happens after it lands. A static site can still run all the JavaScript you want. It can fetch data, rewrite the page, listen for clicks, and talk to any public API.</p>
<p>There's only one thing it can't do, which is run your code before the page is sent. That means it can't keep a secret, query a private database, or make a decision based on who is asking.</p>
<p>That single limit is the whole design problem. Once you see it clearly, the rest is just sorting. Some work belongs in the browser, some belongs in a service you rent, and a small slice needs to run somewhere private.</p>
<h2 id="heading-start-with-what-the-browser-already-does">Start With What the Browser Already Does</h2>
<p>Check the platform before you add anything to your stack, because browsers ship with more power than most of us use.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"><code>fetch</code> API</a> pulls JSON from any public endpoint. The <code>&lt;dialog&gt;</code> element gives you an accessible modal with no library, and <code>&lt;details&gt;</code> gives you an accordion. CSS now handles sticky headers, scroll-driven animation, and container queries, all of which used to need JavaScript.</p>
<p>A lot of features that seem to need a backend are really just a fetch call and a template string. A weather widget, a GitHub activity feed, a currency converter, a live score, or a Mastodon timeline: every one of those runs happily from the browser, because the data is public and the endpoint needs no key. Write the fetch, handle the loading and error states properly, and move on.</p>
<h2 id="heading-handling-form-submissions">Handling Form Submissions</h2>
<p>Forms are where most static sites hit their first real wall, because a submission has to go somewhere your visitors can't see. You can't put a database password in client-side code, and you can't send email straight from a browser.</p>
<p>Luckily this problem has been solved many times over, and most static hosts will handle forms for you. <a href="https://docs.netlify.com/manage/forms/setup/">Netlify Forms</a> needs one extra attribute on your form tag. After that, Netlify catches each submission at the edge, stores it in a dashboard, and either emails you or pings a webhook.</p>
<p>Sometimes you need more than that. Spam filters, file uploads, conditional logic, multi-step flows, payments inside the form, or rows that land in a spreadsheet with no glue code all point toward a dedicated tool. This roundup of the <a href="https://forms.app/en/blog/best-form-builders">best form builders</a> is a good way to compare your options, since the real differences come down to logic, integrations, and how much control you keep over the markup.</p>
<p>Either way, the choice is about ownership. Write your own form endpoint and you own the validation, the rate limits, the spam defense, the storage, the alerts, and the deletion requests that arrive under GDPR. That's a lot of work for a contact form. Build it yourself when the form is part of your product, and rent it when the form is just a way for people to reach you.</p>
<h2 id="heading-serverless-functions-for-the-rest">Serverless Functions for the Rest</h2>
<p>Sooner or later you will need to run a few lines of code in private, whether to sign a request, hide an API key, or reshape a response before the browser sees it. That is exactly what serverless functions are for, and they're the smallest possible step away from a purely static site.</p>
<p>You drop a file into a folder, and your host turns it into a URL on the next deploy. That's the entire setup, and it works the same way in <a href="https://docs.netlify.com/build/functions/overview/">Netlify Functions</a>, <a href="https://vercel.com/docs/functions">Vercel Functions</a>, and <a href="https://developers.cloudflare.com/pages/functions/">Cloudflare Pages Functions</a>. The code stays short:</p>
<pre><code class="language-js">export default async function handler(request) {
  const res = await fetch("https://api.example.com/data", {
    headers: { Authorization: `Bearer ${process.env.API_KEY}` },
  });
  const data = await res.json();
  return Response.json({ total: data.items.length });
}
</code></pre>
<p>Your key lives in an environment variable on the host, so the browser calls <code>/api/handler</code> and never sees it. There's no server to keep alive, no operating system to patch, and no bill on a quiet day.</p>
<p>This is the right home for anything that needs a credential. Use it to send email through Resend or Postmark, call an AI model, check a webhook signature, or proxy a paid API whose key would otherwise leak within a day.</p>
<h2 id="heading-databases-and-logins-you-can-rent">Databases and Logins You Can Rent</h2>
<p>State is the last piece people assume needs a server, but it does not. <a href="https://supabase.com/docs">Supabase</a> puts Postgres behind a REST API with row-level security. Those rules live in the database itself, so you can query it from the browser and still be safe. Firebase does much the same with a different data model, while Cloudflare D1 and Turso give you SQLite at the edge.</p>
<p>Logins follow the same pattern. Clerk, Auth0, and Supabase Auth all handle sessions, password resets, social logins, and two-factor codes behind a client SDK. Authentication is genuinely hard to get right, so leaning on an audited service here isn't laziness. It's sensible risk management.</p>
<h2 id="heading-comments-search-and-payments">Comments, Search, and Payments</h2>
<p>The last few common features have drop-in answers too. <a href="https://giscus.app/">Giscus</a> turns GitHub Discussions into a comment box with a script tag and no database at all. <a href="https://pagefind.app/">Pagefind</a> builds a search index while your site builds and ships it as static files, so full-text search costs you nothing at runtime.</p>
<p>Stripe covers money. Payment Links and Checkout let you sell something with a plain link, and Stripe handles the card, the tax, and the receipt. Your own site never touches card data.</p>
<h2 id="heading-know-when-you-have-outgrown-it">Know When You Have Outgrown It</h2>
<p>This model has a real ceiling, and you should be aware of it rather than fight it. Watch for a few signs: your logic is now spread across six services, your monthly SaaS bill beats the cost of a small server, cold starts are hurting real users, or you need long jobs, a queue, or a socket that stays open for hours. When that day comes, a regular application server is the simpler tool, so move.</p>
<p>Until then, this setup buys you things that matter. Your site stays fast by default, your attack surface stays small, and your time goes into the product instead of the plumbing. Start with the browser, add a function when you need a secret, and rent the hard parts.</p>
<p>Hope you enjoyed this article. You can <a href="https://linkedin.com/in/manishmshiva">connect with me on LinkedIn</a>.</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
