> ## 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.

# Florian Margaine

> Articles written by Florian Margaine.

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>;
};

<div className="flex items-center gap-4 mb-8 not-prose">
  <img src="https://github.com/ralt.png?size=128" alt="Florian Margaine" className="w-16 h-16 rounded-full" />

  <div className="flex flex-wrap gap-3">
    <a href="https://github.com/ralt" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gray-200 dark:border-white/10 text-sm text-gray-700 dark:text-gray-300 hover:border-primary dark:hover:border-primary-light transition-colors">GitHub</a>
    <a href="https://www.linkedin.com/in/florian-margaine-43971136" target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-gray-200 dark:border-white/10 text-sm text-gray-700 dark:text-gray-300 hover:border-primary dark:hover:border-primary-light transition-colors">LinkedIn</a>
  </div>
</div>

<ShowMore id="author-ralt-articles" className="blog-card-grid">
  <a href="/posts/how-it-works/cloning-a-terabyte-in-a-minute-and-the-limit-hiding-behind-it" 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="Cloning a terabyte in a minute, and the limit hiding behind it" 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, June 23rd 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Cloning a terabyte in a minute, and the limit hiding behind it</h3>
      <p className="blog-card-desc">Upsun clones a terabyte production environment in under a minute using Ceph copy-on-write. Here is the 16-level clone-depth limit behind it, why flattening is the price you pay, and what it says about engineering trade-offs.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/how-redundancy-and-failover-work-on-upsun" 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 redundancy and failover work on 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">Tuesday, June 16th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How redundancy and failover work on Upsun</h3>
      <p className="blog-card-desc">Upsun handles redundancy and failover inside your region, at the compute, storage, and network layers. Here's where it happens, how fast it is, and the trade-offs behind it.</p>
    </div>
  </a>

  <a href="/posts/insights/code-matters-less-than-ever-and-more-than-ever" 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="Code matters less than ever, and more than ever" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Code matters less than ever, and more than ever</h3>
      <p className="blog-card-desc">AI made code cheap to write and cheap to throw away, so it matters less than ever. It also matters more, because debugging, reviews, and velocity all depend on it.</p>
    </div>
  </a>

  <a href="/posts/how-it-works/upsun-deployment-hooks-and-commands-which-one-to-use-and-when" 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="Upsun deployment hooks and commands: which one to use, and when" 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, June 4th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Upsun deployment hooks and commands: which one to use, and when</h3>
      <p className="blog-card-desc">Build hooks, deploy hooks, pre\_start, start, and post\_start all shape how Upsun deploys your app. Learn what each one does and when to reach for it.</p>
    </div>
  </a>

  <a href="/posts/insights/ddev-is-in-good-hands" 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="DDEV is in good hands" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">DDEV is in good hands</h3>
      <p className="blog-card-desc">DDEV is alive, actively maintained, and back with its foundation. A look at our chapter in the project, why we got involved, and why we are happy to step out of the way.</p>
    </div>
  </a>

  <a href="/posts/insights/the-not-so-hidden-cost-of-ai-scrapers" 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 (not so) hidden cost of AI scrapers" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">The (not so) hidden cost of AI scrapers</h3>
      <p className="blog-card-desc">AI scrapers drive up your hosting cost while real users wait. Use robots.txt, cache normalization, and sane application limits to take the pressure off.</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/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/discussions/governance-is-a-contract-chain-and-youre-in-it" 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/discussions/governance-is-a-contract-chain-and-youre-in-it/governance-is-a-contract-chain.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/discussions/governance-is-a-contract-chain-and-youre-in-it/governance-is-a-contract-chain.webp" alt="Governance is a contract chain, and you're in it" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`discussions` !== '' && (
                      <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">
                        discussions
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Governance is a contract chain, and you're in it</h3>
      <p className="blog-card-desc">Governance is a chain of contracts from certification bodies to you. AI didn't change the chain, but it produces code faster than humans can review it.</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-tos/replicate-your-production-outage-on-staging" 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-tos/replicate-your-production-outage-on-staging/replicate-your-production-outage-on-staging.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/replicate-your-production-outage-on-staging/replicate-your-production-outage-on-staging.webp" alt="Replicate your production outage on staging" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-tos` !== '' && (
                      <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-tos
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Replicate your production outage on staging</h3>
      <p className="blog-card-desc">After fixing a production outage, you need to prove the fix works under the same traffic. Here's how to replicate real production traffic on an Upsun staging environment using the observability API and k6.</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/hands-on/scriberr-on-upsun" 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/hands-on/scriberr-on-upsun/scriberr-on-upsun.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/hands-on/scriberr-on-upsun/scriberr-on-upsun.webp" alt="Scriberr on Upsun" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`hands-on` !== '' && (
                      <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">
                        hands-on
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Scriberr on Upsun</h3>
      <p className="blog-card-desc">Learn how to deploy Scriberr, an AI-powered transcription tool, on Upsun for self-hosted audio and video transcription.</p>
    </div>
  </a>

  <a href="/posts/insights/the-only-correct-way-to-git-pull-and-merge" 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/insights/the-only-correct-way-to-git-pull-and-merge/the-only-correct-way-to-git-pull-and-merge.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/insights/the-only-correct-way-to-git-pull-and-merge/the-only-correct-way-to-git-pull-and-merge.webp" alt="The only correct way to git pull and merge" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">The only correct way to git pull and merge</h3>
      <p className="blog-card-desc">A strongly opinionated guide to git pull and merge strategies that will make your commit history actually useful. Learn when to rebase, when to merge, and why the defaults are lying to you.</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/insights/the-third-way-to-scale-that-nobody-talks-about" 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/insights/the-third-way-to-scale-that-nobody-talks-about/the-third-way-to-scale-that-nobody-talks-about.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/insights/the-third-way-to-scale-that-nobody-talks-about/the-third-way-to-scale-that-nobody-talks-about.webp" alt="The third way to scale that nobody talks about" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">The third way to scale that nobody talks about</h3>
      <p className="blog-card-desc">Beyond vertical and horizontal scaling lies a third approach that most scaling discussions ignore. Learn about natural scaling, where you sidestep the problem entirely.</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/hands-on/stop-testing-jcr-apps-in-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/hands-on/stop-testing-jcr-apps-in-production/stop-testing-jcr-apps-in-production.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/hands-on/stop-testing-jcr-apps-in-production/stop-testing-jcr-apps-in-production.webp" alt="Stop testing JCR apps in production" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`hands-on` !== '' && (
                      <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">
                        hands-on
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Stop testing JCR apps in production</h3>
      <p className="blog-card-desc">Learn why JCR-based applications benefit from fast, production-grade environment cloning. Discover how Upsun removes one of JCR's biggest operational challenges through instant repository duplication.</p>
    </div>
  </a>

  <a href="/posts/hands-on/migration-day-executing-your-upsun-cutover" 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/hands-on/migration-day-executing-your-upsun-cutover/migration-day-executing-your-upsun-cutover.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/hands-on/migration-day-executing-your-upsun-cutover/migration-day-executing-your-upsun-cutover.webp" alt="Migration day: executing your Upsun cutover" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`hands-on` !== '' && (
                      <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">
                        hands-on
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Migration day: executing your Upsun cutover</h3>
      <p className="blog-card-desc">A step-by-step guide to migration day: maintenance windows, cutover sequences, verification, and post-migration monitoring strategies.</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-tos/planning-your-upsun-migration-the-6-9-week-roadmap" 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-tos/planning-your-upsun-migration-the-6-9-week-roadmap/planning-your-upsun-migration-the-6-9-week-roadmap.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/planning-your-upsun-migration-the-6-9-week-roadmap/planning-your-upsun-migration-the-6-9-week-roadmap.webp" alt="Planning your Upsun migration: the 6-9 week roadmap" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`how-tos` !== '' && (
                      <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-tos
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Planning your Upsun migration: the 6-9 week roadmap</h3>
      <p className="blog-card-desc">Learn why 6-9 weeks is the ideal timeline for Upsun migrations, with expert insights on planning, testing, and avoiding common pitfalls.</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/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/insights/build-time-environment-variables-considered-harmful" 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/insights/build-time-environment-variables-considered-harmful/build-time-environment-variables-considered-harmful.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/insights/build-time-environment-variables-considered-harmful/build-time-environment-variables-considered-harmful.webp" alt="Build-time environment variables considered harmful" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Build-time environment variables considered harmful</h3>
      <p className="blog-card-desc">Build-time environment variables break deployment caching, compromise security, and force unnecessary rebuilds. Learn why runtime configuration is the better alternative.</p>
    </div>
  </a>

  <a href="/posts/insights/why-you-should-replace-postgresql-with-git-for-your-next-project" 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/insights/why-you-should-replace-postgresql-with-git-for-your-next-project/why-you-should-replace-postgresql-with-git-for-your-next-project.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/insights/why-you-should-replace-postgresql-with-git-for-your-next-project/why-you-should-replace-postgresql-with-git-for-your-next-project.webp" alt="Why you should replace PostgreSQL with Git for your next project" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`insights` !== '' && (
                      <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">
                        insights
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Why you should replace PostgreSQL with Git for your next project</h3>
      <p className="blog-card-desc">Explore how Git's internal architecture makes it a surprisingly capable database alternative. Learn Git's data structures through a practical todo app implementation that might make you reconsider your database choices.</p>
    </div>
  </a>

  <a href="/posts/hands-on/run-tailscale-on-upsun-secure-vpn-connections" 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/hands-on/run-tailscale-on-upsun-secure-vpn-connections/run-tailscale-on-upsun-secure-vpn-connections.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/hands-on/run-tailscale-on-upsun-secure-vpn-connections/run-tailscale-on-upsun-secure-vpn-connections.webp" alt="Run Tailscale on Upsun: Create secure VPN connections for your applications" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`hands-on` !== '' && (
                      <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">
                        hands-on
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Run Tailscale on Upsun: Create secure VPN connections for your applications</h3>
      <p className="blog-card-desc">Learn how to integrate Tailscale VPN with your Upsun applications to create secure, private network connections between your containers and infrastructure.</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/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/unknown/gitflow-is-now-supported" 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="GitFlow is now supported on Platform.sh!" className="blog-card-img" />
          </div>
        )}

    <div className="blog-card-body">
      <div className="flex items-center gap-2">
        {`platformsh-blog` !== '' && (
                      <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">
                        platformsh-blog
                      </span>
                    )}

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

      <h3 className="blog-card-title group-hover:text-accent transition-colors">GitFlow is now supported on Platform.sh!</h3>
      <p className="blog-card-desc">Learn about our recent infrastructure update with bug fixes and GitFlow branch name support. Enjoy the new features on Platform.sh!</p>
    </div>
  </a>
</ShowMore>
