> ## Documentation Index
> Fetch the complete documentation index at: https://developer.upsun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How It Works

export const ShowMore = ({children, className = '', id = 'posts', btnClassName = ''}) => {
  const hash = 'show-all-' + id;
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    const check = () => {
      if (window.location.hash === '#' + hash) {
        setExpanded(true);
      }
    };
    check();
    window.addEventListener('hashchange', check);
    return () => window.removeEventListener('hashchange', check);
  }, [hash]);
  const wrapClass = expanded ? className : className + ' blog-paginated';
  return <div>
      <div className={wrapClass}>
        {children}
      </div>
      {!expanded && <div className={btnClassName} style={{
    marginTop: '2rem',
    textAlign: 'center'
  }}>
          <a href={'#' + hash} style={{
    display: 'inline-flex',
    alignItems: 'center',
    gap: '0.5rem',
    padding: '0.75rem 1.5rem',
    borderRadius: '9999px',
    border: '1px solid #e5e7eb',
    fontSize: '0.875rem',
    fontWeight: 500,
    color: '#374151',
    textDecoration: 'none'
  }}>
            Show all posts ▾
          </a>
        </div>}
    </div>;
};

<ShowMore id="how-it-works-articles" className="blog-card-grid">
  <a href="/posts/how-it-works/building-observability-from-scratch-three-times-over" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/building-observability-from-scratch-three-times-over/building-observability-from-scratch-three-times-over.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/building-observability-from-scratch-three-times-over/building-observability-from-scratch-three-times-over.webp" alt="Building observability from scratch, three times over" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, April 21st 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Building observability from scratch, three times over</h3>
      <p className="blog-card-desc">A look back at how Platform.sh / Upsun's observability evolved from Nagios on a single box to a unified stack across thousands of VMs, and the migration patterns that made each transition smooth.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-we-caught-a-silent-io-storm-before-it-hit-production" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-we-caught-a-silent-io-storm-before-it-hit-production/cgroup-v2-dirty-pages.png` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-we-caught-a-silent-io-storm-before-it-hit-production/cgroup-v2-dirty-pages.png" alt="How we caught a silent IO storm before it hit production" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, April 14th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How we caught a silent IO storm before it hit production</h3>
      <p className="blog-card-desc">A sysctl setting that worked fine for years caused over 500 MB/s of disk writes after migrating to Debian 12. MariaDB stalled on pending IO, Redis complained about slow fsync, and RBD-backed storage ground to a halt. The culprit: cgroup v2 changes how the kernel divides dirty page budgets across containers.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-upsun-provisions-tls-certificates-at-scale" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-upsun-provisions-tls-certificates-at-scale/how-upsun-provisions-tls-certificates-at-scale.png` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-upsun-provisions-tls-certificates-at-scale/how-upsun-provisions-tls-certificates-at-scale.png" alt="How Upsun provisions TLS certificates at scale" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, April 9th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How Upsun provisions TLS certificates at scale</h3>
      <p className="blog-card-desc">Every Upsun environment gets HTTPS automatically. Here's how the certificate system works, from wildcards to Let's Encrypt automation.</p>
    </div>
  </a>

  <a href="/posts/core-concepts/meta-upsun-validation-schema-dx-improvement" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/devcenter.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/devcenter.webp" alt="How Meta-Upsun improved Validation Schema and Developer eXperience" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`core-concepts` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        core-concepts
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, April 7th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How Meta-Upsun improved Validation Schema and Developer eXperience</h3>
      <p className="blog-card-desc">The introduction of Meta-Upsun enabled dynamic validation schemas and version enumeration for Upsun services and runtimes, significantly improving developer experience.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/why-upsun-moved-from-lvm-to-ceph" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/why-upsun-moved-from-lvm-to-ceph/why-upsun-moved-from-lvm-to-ceph.png` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/why-upsun-moved-from-lvm-to-ceph/why-upsun-moved-from-lvm-to-ceph.png" alt="Why we moved from LVM to Ceph for container storage" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, April 2nd 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Why we moved from LVM to Ceph for container storage</h3>
      <p className="blog-card-desc">Upsun migrated from LVM to Ceph for container storage to separate compute from storage, enable instant volume migration, and make VMs disposable again.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/meta-reference-source-introduction" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/meta-reference-source-introduction/meta.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/meta-reference-source-introduction/meta.webp" alt="Centralising Upsun Technical References with Meta-Upsun" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, March 25th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Centralising Upsun Technical References with Meta-Upsun</h3>
      <p className="blog-card-desc">How Upsun centralised runtime, service, region, and PHP reference data into a single public API to improve consistency, automation, and documentation accuracy.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/rpm-repo-s3" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/rpm-repo-s3/rpm-logo.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/rpm-repo-s3/rpm-logo.webp" alt="How we host an RPM repository on AWS S3" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, March 17th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How we host an RPM repository on AWS S3</h3>
      <p className="blog-card-desc">Learn how to host an RPM repository entirely on AWS S3 with no active components, minimal cost, and authenticated access using IAM.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/natural-scaling-for-multi-country-ecommerce" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/natural-scaling-for-multi-country-ecommerce/natural-scaling-for-multi-country-ecommerce.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/natural-scaling-for-multi-country-ecommerce/natural-scaling-for-multi-country-ecommerce.webp" alt="Natural scaling for multi-country ecommerce" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, March 12th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Natural scaling for multi-country ecommerce</h3>
      <p className="blog-card-desc">Multi-country ecommerce is a textbook case for natural scaling. Instead of cramming every country into one store, give each its own. Here's why.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/your-waf-is-buffering-ours-is-streaming" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/your-waf-is-buffering-ours-is-streaming/your-waf-is-buffering-ours-is-streaming.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/your-waf-is-buffering-ours-is-streaming/your-waf-is-buffering-ours-is-streaming.webp" alt="Your WAF is buffering. Ours is streaming." className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, February 18th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Your WAF is buffering. Ours is streaming.</h3>
      <p className="blog-card-desc">Most WAFs buffer your entire request before validating it. That's slow. Upsun's technical WAF validates requests while streaming them to your backend, so you don't pay a latency tax for security.</p>
    </div>
  </a>

  <a href="/posts/core-concepts/eliminating-database-pwd-risk-with-network-isolation" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/core-concepts/eliminating-database-pwd-risk-with-network-isolation/database-security.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/core-concepts/eliminating-database-pwd-risk-with-network-isolation/database-security.webp" alt="Eliminating Database Password Risk with Network Isolation" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`core-concepts` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        core-concepts
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, February 4th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Eliminating Database Password Risk with Network Isolation</h3>
      <p className="blog-card-desc">By removing default database passwords, Upsun reduces common credential risks (leaks, reuse, hardcoding) and relies on stronger security controls like SSH keys and private networking.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/spf-dkim-dmarc-what-are-those-for-anyway" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/spf-dkim-dmarc-what-are-those-for-anyway/spf-dkim-dmarc-what-are-those-for-anyway.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/spf-dkim-dmarc-what-are-those-for-anyway/spf-dkim-dmarc-what-are-those-for-anyway.webp" alt="SPF, DKIM, DMARC, what are those for anyway?" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, January 29th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">SPF, DKIM, DMARC, what are those for anyway?</h3>
      <p className="blog-card-desc">Finally understand what SPF, DKIM, and DMARC actually do, why email needs them, and how to set them up without wanting to flip a table.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-weve-been-hardening-containers-since-before-docker-made-it-cool" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-weve-been-hardening-containers-since-before-docker-made-it-cool/how-weve-been-hardening-containers-since-before-docker-made-it-cool.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-weve-been-hardening-containers-since-before-docker-made-it-cool/how-weve-been-hardening-containers-since-before-docker-made-it-cool.webp" alt="How we've been hardening containers since before Docker made it cool" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, January 13th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How we've been hardening containers since before Docker made it cool</h3>
      <p className="blog-card-desc">Docker's hardened images are great, but we've been doing this for years. Here's the automated pipeline that's been securing hundreds of container images behind the scenes at Upsun.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/keeping-the-peace-how-zookeeper-stops-database-nodes-from-fighting" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/keeping-the-peace-how-zookeeper-stops-database-nodes-from-fighting/keeping-the-peace-how-zookeeper-stops-database-nodes-from-fighting.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/keeping-the-peace-how-zookeeper-stops-database-nodes-from-fighting/keeping-the-peace-how-zookeeper-stops-database-nodes-from-fighting.webp" alt="Keeping the peace: how ZooKeeper stops database nodes from fighting" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, December 9th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Keeping the peace: how ZooKeeper stops database nodes from fighting</h3>
      <p className="blog-card-desc">Learn how Upsun uses Zookeeper's sequences, watchers, and ephemeral nodes to coordinate MariaDB clusters and workers across distributed systems without breaking your application.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/when-php-fpm-runs-out-of-workers-a-502-error-field-guide" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/when-php-fpm-runs-out-of-workers-a-502-error-field-guide/when-php-fpm-runs-out-of-workers-a-502-error-field-guide.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/when-php-fpm-runs-out-of-workers-a-502-error-field-guide/when-php-fpm-runs-out-of-workers-a-502-error-field-guide.webp" alt="When php-fpm runs out of workers: a 502 error field guide" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Monday, November 24th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">When php-fpm runs out of workers: a 502 error field guide</h3>
      <p className="blog-card-desc">Your PHP site keeps throwing 502 errors. Your CDN shows 503s. Learn why PHP-FPM workers get exhausted and how to diagnose and fix the real problems.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/we-switched-from-lvm-to-sparse-files" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/we-switched-from-lvm-to-sparse-files/we-switched-from-lvm-to-sparse-files.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/we-switched-from-lvm-to-sparse-files/we-switched-from-lvm-to-sparse-files.webp" alt="We switched from LVM to... sparse files?!" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Friday, November 14th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">We switched from LVM to... sparse files?!</h3>
      <p className="blog-card-desc">How we eliminated 90% of VM evacuation time by replacing LVM with sparse files for temporary storage. A tale of inertia, performance bottlenecks, and surprisingly effective solutions.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/we-made-our-infrastructure-read-only-and-never-looked-back" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/we-made-our-infrastructure-read-only-and-never-looked-back/we-made-our-infrastructure-read-only-and-never-looked-back.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/we-made-our-infrastructure-read-only-and-never-looked-back/we-made-our-infrastructure-read-only-and-never-looked-back.webp" alt="We made our infrastructure read-only and never looked back" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Monday, November 3rd 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">We made our infrastructure read-only and never looked back</h3>
      <p className="blog-card-desc">Learn why read-only infrastructure eliminates entire classes of security attacks, improves reproducibility, and simplifies compliance while enabling predictable deployments.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/event-loop-monitoring-in-nextjs-performance-guide" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/event-loop-monitoring-in-nextjs-performance-guide/event-loop-monitoring-in-nextjs-performance-guide.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/event-loop-monitoring-in-nextjs-performance-guide/event-loop-monitoring-in-nextjs-performance-guide.webp" alt="Event Loop Monitoring in Next.js: Performance Guide" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Friday, October 24th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Event Loop Monitoring in Next.js: Performance Guide</h3>
      <p className="blog-card-desc">Learn to implement event loop monitoring in Next.js applications to identify blocking operations, optimize performance, and scale confidently with production-ready code.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/autoscaling-deep-dive" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/autoscaling-deep-dive/autoscaling-deep-dive.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/autoscaling-deep-dive/autoscaling-deep-dive.webp" alt="Auto-scaling on Upsun Flex. A deep dive." className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Monday, October 20th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Auto-scaling on Upsun Flex. A deep dive.</h3>
      <p className="blog-card-desc">Learn how Upsun's autoscaling dynamically adjusts application instances based on CPU usage, ensuring performance during traffic spikes while optimizing costs.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/fake-ip-till-you-make-ip" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/fake-ip-till-you-make-ip/fake-ip-till-you-make-ip.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/fake-ip-till-you-make-ip/fake-ip-till-you-make-ip.webp" alt="Fake IP till you make IP" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, October 14th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Fake IP till you make IP</h3>
      <p className="blog-card-desc">How Upsun uses virtual IPs and NAT to keep your database connections stable even when containers move between VMs. A look at the networking tricks behind relationship stability.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/explore-plan-execute-methodology" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/explore-plan-execute-methodology/explore-plan-execute-methodology.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/explore-plan-execute-methodology/explore-plan-execute-methodology.webp" alt="Mastering the Explore, Plan, Execute methodology for AI-assisted development" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Friday, October 3rd 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Mastering the Explore, Plan, Execute methodology for AI-assisted development</h3>
      <p className="blog-card-desc">Learn how to transform AI coding assistants from eager juniors into rockstar developers using proven context strategies, quality assurance, and the three-phase workflow</p>
    </div>
  </a>

  <a href="/posts/how-it-works/cut-aws-bandwidth-costs-95-with-dm-cache" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/cut-aws-bandwidth-costs-95-with-dm-cache/cut-aws-bandwidth-costs-95-with-dm-cache.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/cut-aws-bandwidth-costs-95-with-dm-cache/cut-aws-bandwidth-costs-95-with-dm-cache.webp" alt="How we cut AWS bandwidth costs 95% with dm-cache: fast local SSD caching for network storage" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, September 9th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How we cut AWS bandwidth costs 95% with dm-cache: fast local SSD caching for network storage</h3>
      <p className="blog-card-desc">Learn how Upsun solved costly inter-AZ bandwidth billing by implementing dm-cache with local SSDs, achieving 95% read traffic reduction and 30x performance improvement.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-do-we-do-incremental-but-really-full-backups-on-top-of-ceph" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-do-we-do-incremental-but-really-full-backups-on-top-of-ceph/ceph-backup-blob-storage.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-do-we-do-incremental-but-really-full-backups-on-top-of-ceph/ceph-backup-blob-storage.webp" alt="High-performance backups: How Ceph snapshots enable incremental full backups" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Monday, August 25th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">High-performance backups: How Ceph snapshots enable incremental full backups</h3>
      <p className="blog-card-desc">Learn how Upsun leverages Ceph's RBD export-diff feature to implement high-performance incremental backups that maintain full restore capabilities for large-scale container storage.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-upsun-built-stateless-mesh-networking-for-high-density-containers" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-upsun-built-stateless-mesh-networking-for-high-density-containers/mesh-network.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-upsun-built-stateless-mesh-networking-for-high-density-containers/mesh-network.webp" alt="How Upsun built stateless mesh networking for high-density containers" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, August 6th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How Upsun built stateless mesh networking for high-density containers</h3>
      <p className="blog-card-desc">Discover how Upsun's innovative stateless mesh networking architecture handles thousands of containers without databases or bottlenecks.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/mcp-interaction-types-article" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/mcp-interaction-types-article/mcp-interaction-types-article.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/mcp-interaction-types-article/mcp-interaction-types-article.webp" alt="Beyond Tool Calling: Understanding MCP's Three Core Interaction Types" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Saturday, June 7th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Beyond Tool Calling: Understanding MCP's Three Core Interaction Types</h3>
      <p className="blog-card-desc">Discover how prompts, resources, and tools work together in the Model Context Protocol to create richer AI application experiences beyond simple tool calling.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/psh-elastic-love-loss-licensing" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/psh-elastic-love-loss-licensing/psh-elastic-love-loss-licensing-thumbnail.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/psh-elastic-love-loss-licensing/psh-elastic-love-loss-licensing-thumbnail.webp" alt="Upsun and Elasticsearch: A tale of love, loss, and licensing roadblocks" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, March 27th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Upsun and Elasticsearch: A tale of love, loss, and licensing roadblocks</h3>
      <p className="blog-card-desc">[Elasticsearch](https://www.elastic.co/) is a distributed **search engine designed for speed, scalability, and reliability**. Built on [Apache Lucene](https://lucene.apache.org/), it allows you to store, search, and analyze large volumes of data in near real-time.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/debian-repo-s3" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/debian-repo-s3/debian-logo.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/debian-repo-s3/debian-logo.webp" alt="How we host a Debian repository on AWS S3" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, January 29th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How we host a Debian repository on AWS S3</h3>
      <p className="blog-card-desc">Pretty cool fact about our internal Debian repositories: they’re hosted entirely on AWS S3. Why is that cool? For 2</p>
    </div>
  </a>

  <a href="/posts/how-it-works/using-the-upsun-api" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/using-the-upsun-api/red-background.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/using-the-upsun-api/red-background.webp" alt="Using the Upsun API" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Thursday, September 19th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Using the Upsun API</h3>
      <p className="blog-card-desc">> Anything you can do, API can do better!</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-platformsh-stays-ahead-of-emerging-cybersecurity-threats" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-platformsh-stays-ahead-of-emerging-cybersecurity-threats/terrible_trio_blog.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-platformsh-stays-ahead-of-emerging-cybersecurity-threats/terrible_trio_blog.webp" alt="Semper vigilans: how Platform.sh stays ahead of emerging cybersecurity threats (so you don’t have to)" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Friday, October 13th 2023</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Semper vigilans: how Platform.sh stays ahead of emerging cybersecurity threats (so you don’t have to)</h3>
      <p className="blog-card-desc">Always vigilant is more than a motto. Find out how the Platform.sh Security team monitors vulnerabilities 24x7 to protect customers from cybersecurity threats.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-do-you-manage-ssh-keys-in-your-organization" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-do-you-manage-ssh-keys-in-your-organization/how-do-you-manage-ssh-keys-in-your-organization.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-do-you-manage-ssh-keys-in-your-organization/how-do-you-manage-ssh-keys-in-your-organization.webp" alt="SSH certificates with Platform.sh" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, October 21st 2020</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">SSH certificates with Platform.sh</h3>
      <p className="blog-card-desc">Learn how Platform.sh simplifies provisioning SSH certificates for secure and keyless SSH authentication, enhancing security and making compliance easier.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/installers-that-dont-suck" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/installers-that-dont-suck/installers-that-dont-suck.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/installers-that-dont-suck/installers-that-dont-suck.webp" alt="Installers that don't suck" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Wednesday, August 5th 2020</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Installers that don't suck</h3>
      <p className="blog-card-desc">Learn how to create cloud-friendly web application installers that account for cloud-based environments and optimize the user experience.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/the-platformsh-build-and-deploy-pipeline" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/devcenter.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/devcenter.webp" alt="The Platform.sh build-and-deploy pipeline" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, October 3rd 2017</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">The Platform.sh build-and-deploy pipeline</h3>
      <p className="blog-card-desc">Learn how Platform.sh simplifies the build and deploy pipeline for web applications, ensuring consistency and repeatability with Git-based semantics.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/repeatable-deployments" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/repeatable-deployments/how-repeatable-deployment-work-jpg.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/repeatable-deployments/how-repeatable-deployment-work-jpg.webp" alt="How repeatable deployments work" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, December 13th 2016</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How repeatable deployments work</h3>
      <p className="blog-card-desc">Platform.sh ensures predictable, repeatable deployments by controlling the key inputs to your application and guaranteeing code consistency.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-platform-paas-works" className="blog-card group rounded-xl bg-card border-theme card-hover shadow-sm hover:shadow-md transition-all overflow-hidden flex flex-col">
    {`/images/posts/how-it-works/how-platform-paas-works/Blog_How_Platfromsh_Works.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-it-works/how-platform-paas-works/Blog_How_Platfromsh_Works.webp" alt="How the Platform.sh PaaS works" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-it-works` !== '' && (
                      <span className="text-xs font-semibold uppercase tracking-wider px-2 py-0.5 rounded-md bg-accent-badge border border-accent-soft text-accent">
                        how-it-works
                      </span>
                    )}

        <span className="text-xs text-subtle">Tuesday, March 3rd 2015</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How the Platform.sh PaaS works</h3>
      <p className="blog-card-desc">Discover how Platform.sh simplifies PaaS. Focus on your code; we manage the rest. Explore our second-generation PaaS for seamless application development.</p>
    </div>
  </a>
</ShowMore>