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

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-tos-articles" className="blog-card-grid">
  <a href="/posts/how-tos/supply-chain-attacks-in-the-ai-era-and-what-to-do-about-them" 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="Supply chain attacks in the AI era, and what to do about them" 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">Thursday, April 30th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Supply chain attacks in the AI era, and what to do about them</h3>
      <p className="blog-card-desc">AI agents are reading code at scale, including your dependencies. Why supply chain risk just changed, plus a build-time fix to add on Upsun.</p>
    </div>
  </a>

  <a href="/posts/how-tos/meta-version-updater-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-tos/meta-version-updater-introduction/red-background.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/meta-version-updater-introduction/red-background.webp" alt="Automating Runtime and Service Tracking with Meta Version Updater" 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">Wednesday, April 1st 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Automating Runtime and Service Tracking with Meta Version Updater</h3>
      <p className="blog-card-desc">Meta is Upsun’s shared reference layer for runtimes, services, regions, and extensions. Learn why we built it, how it works, and how it powers the next generation of Upsun documentation and tooling.</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-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-tos/fastly-cdn-and-waf" 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/fastly-cdn-and-waf/fastly-cdn-and-waf.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/fastly-cdn-and-waf/fastly-cdn-and-waf.webp" alt="Speed vs. Security? Why not both: The Fastly CDN and WAF on Upsun" 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 3rd 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Speed vs. Security? Why not both: The Fastly CDN and WAF on Upsun</h3>
      <p className="blog-card-desc">Learn how to pair Fastly’s CDN for speed with its Next-Gen WAF for security on Upsun. Optimize global performance while protecting your infrastructure from threats.</p>
    </div>
  </a>

  <a href="/posts/how-tos/automated-encrypt-backups-amazon-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-tos/automated-encrypt-backups-amazon-s3/UpsunxSkvare-800x300.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/automated-encrypt-backups-amazon-s3/UpsunxSkvare-800x300.webp" alt="Automated encrypted backups to Amazon S3 | Upsun" 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">Monday, January 12th 2026</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Automated encrypted backups to Amazon S3 | Upsun</h3>
      <p className="blog-card-desc">Learn how to configure Duplicity, GPG keys, and cron on Upsun to send incremental, encrypted backups of your application to AWS S3 for reliable restores</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-tos/creating-custom-reports-using-cli" 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/creating-custom-reports-using-cli/creating-custom-reports-using-cli.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/creating-custom-reports-using-cli/creating-custom-reports-using-cli.webp" alt="Creating Custom Reports using the Upsun CLI" 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">Wednesday, November 12th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Creating Custom Reports using the Upsun CLI</h3>
      <p className="blog-card-desc">Someone recently asked me</p>
    </div>
  </a>

  <a href="/posts/how-tos/fastlycdn-pluginapp-activation" 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/fastlycdn-pluginapp-activation/hero-image.svg` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/fastlycdn-pluginapp-activation/hero-image.svg" alt="Streamline Your CDN Management with Fastly CDN Plugin App [BETA]" 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, October 7th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Streamline Your CDN Management with Fastly CDN Plugin App \[BETA]</h3>
      <p className="blog-card-desc">Managing Content Delivery Network (CDN) configurations alongside your application deployments can be a complex task, often requiring developers to switch between multiple interfaces and tools. The Fastly CDN plugin app bridges this gap by bringing Fastly CDN management directly into your Upsun console, creating a seamless workflow for developers who want to manage their CDN configurations without leaving their primary development environment.</p>
    </div>
  </a>

  <a href="/posts/how-tos/composer1-rip" 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/composer1-rip/composer-migrate-v1-v2.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/composer1-rip/composer-migrate-v1-v2.webp" alt="Composer 1 is dead – Upgrade to Composer 2 now" 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, September 9th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Composer 1 is dead – Upgrade to Composer 2 now</h3>
      <p className="blog-card-desc">Composer 1 has reached end of life and is no longer available on Upsun and Platform.sh. Learn why it’s no longer possible to rely on Composer 1, what errors you’ll see, and how to safely upgrade your project to Composer 2.</p>
    </div>
  </a>

  <a href="/posts/how-tos/handling-well-known-directory" 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/handling-well-known-directory/handle-well-known.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/handling-well-known-directory/handle-well-known.webp" alt="How to manage the `.well-known` directory on Upsun and Platform.sh" 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">Monday, May 26th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How to manage the `.well-known` directory on Upsun and Platform.sh</h3>
      <p className="blog-card-desc">If you have ever tried to enable</p>
    </div>
  </a>

  <a href="/posts/how-tos/validate-yaml-config" 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/validate-yaml-config/logo-yaml.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/validate-yaml-config/logo-yaml.webp" alt="Making .upsun/config.yaml easier to edit with IDE autocomplete and validation" 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, May 6th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Making .upsun/config.yaml easier to edit with IDE autocomplete and validation</h3>
      <p className="blog-card-desc">Boost your productivity and eliminate configuration errors with real-time autocompletion and validation for your .upsun/config.yaml — discover how to enhance your IDE experience in just a few simple steps!</p>
    </div>
  </a>

  <a href="/posts/how-tos/context7-mcp" 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/context7-mcp/context7-mcp.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/context7-mcp/context7-mcp.webp" alt="Upsun documentation is now available via the Context7 MCP" 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">Thursday, May 1st 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Upsun documentation is now available via the Context7 MCP</h3>
      <p className="blog-card-desc">Access Upsun documentation directly from your AI workflows using Context7's Model Context Protocol integration</p>
    </div>
  </a>

  <a href="/posts/how-tos/install-pandoc-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/how-tos/install-pandoc-on-upsun/pandoc.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/install-pandoc-on-upsun/pandoc.webp" alt="Up(sun) and ready with Pandoc" 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">Wednesday, February 12th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Up(sun) and ready with Pandoc</h3>
      <p className="blog-card-desc">With the recent growth in enthusiasm for AI assistants, you may be looking for how these assistants can provide technical information about your product.</p>
    </div>
  </a>

  <a href="/posts/how-tos/no-downtime-postgres-updates" 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/no-downtime-postgres-updates/postgresql.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/no-downtime-postgres-updates/postgresql.webp" alt="How to update your PostgreSQL database without downtime" 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">Thursday, January 9th 2025</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How to update your PostgreSQL database without downtime</h3>
      <p className="blog-card-desc">On paper, releasing a new version of your application that requires upgrading the schema of the database is straightforward. But, changes of code and schema can not be updated in an atomic way, you only need to take care that old code is not performing a query against new schema, and reciprocally.</p>
    </div>
  </a>

  <a href="/posts/how-tos/blackfire-google-alert-markers-interfaces" 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/blackfire-google-alert-markers-interfaces/blackfire-marker-list.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/blackfire-google-alert-markers-interfaces/blackfire-marker-list.webp" alt="Import multiple RSS Feeds on your Blackfire timeline + extra interfaces" 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, November 5th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Import multiple RSS Feeds on your Blackfire timeline + extra interfaces</h3>
      <p className="blog-card-desc">We saw in the [previous episode](/posts/how-tos/blackfire-google-alert-markers) how to automatically add context on your Blackfire timeline from an RSS Feed (Google Alert),</p>
    </div>
  </a>

  <a href="/posts/how-tos/schedule-resource-availability" 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/schedule-resource-availability/red-background.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/schedule-resource-availability/red-background.webp" alt="Scheduling resources" 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">Thursday, October 24th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Scheduling resources</h3>
      <p className="blog-card-desc">As Upsun does purely usage-driven billing,</p>
    </div>
  </a>

  <a href="/posts/how-tos/configuring-an-autoscaler" 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/configuring-an-autoscaler/configuring-an-autoscaler-CPU-propogation.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/configuring-an-autoscaler/configuring-an-autoscaler-CPU-propogation.webp" alt="Adding an autoscaler to Upsun projects" 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">Saturday, October 19th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Adding an autoscaler to Upsun projects</h3>
      <p className="blog-card-desc">In this post we will describe a small configuration that will</p>
    </div>
  </a>

  <a href="/posts/how-tos/blackfire-google-alert-markers" 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/blackfire-google-alert-markers/google-alert-marker.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/blackfire-google-alert-markers/google-alert-marker.webp" alt="Add context on your Blackfire timeline from a Google Alerts RSS Feed" 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">Monday, October 7th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Add context on your Blackfire timeline from a Google Alerts RSS Feed</h3>
      <p className="blog-card-desc">Observing your application is essential to be able to find what needs (and what does not need) to be optimized.</p>
    </div>
  </a>

  <a href="/posts/how-tos/automate-with-gatling-1" 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/automate-with-gatling-1/gatling.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/automate-with-gatling-1/gatling.webp" alt="How to automate load tests with Gatling" 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">Friday, September 20th 2024</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">How to automate load tests with Gatling</h3>
      <p className="blog-card-desc">When I was on your side of the keyboard, developing cool and funny applications (more or less :D), load tests were (most of the time) executed a few days before going live.</p>
    </div>
  </a>

  <a href="/posts/how-tos/help-reduce-resource-consumption-put-your-preview-environments-on-pause" 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/help-reduce-resource-consumption-put-your-preview-environments-on-pause/Help_reduce_resource_consumption_paused_environments.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/help-reduce-resource-consumption-put-your-preview-environments-on-pause/Help_reduce_resource_consumption_paused_environments.webp" alt="Help reduce resource consumption: Put your preview environments on pause" 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">Friday, August 18th 2023</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Help reduce resource consumption: Put your preview environments on pause</h3>
      <p className="blog-card-desc">You can now manually pause your idle preview environments or have them automatically paused after 14 days of being idle to minimize your resource usage.</p>
    </div>
  </a>

  <a href="/posts/how-tos/measuring-the-success-of-a-deployment-with-githubactions" 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/measuring-the-success-of-a-deployment-with-githubactions/cover-github-actions.webp` !== '' && (
          <div className="blog-card-img-wrap">
            <img src="/images/posts/how-tos/measuring-the-success-of-a-deployment-with-githubactions/cover-github-actions.webp" alt="Measuring Deployment Success with GitHub Actions" 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">Thursday, December 23rd 2021</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Measuring Deployment Success with GitHub Actions</h3>
      <p className="blog-card-desc">Learn how GitHub actions can streamline your Platform.sh deployments for faster and more efficient development workflows</p>
    </div>
  </a>

  <a href="/posts/how-tos/get-more-control-over-your-environments-with-build-variables" 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="Get more control over your environments with build variables" 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, August 10th 2021</span>
      </div>

      <h3 className="blog-card-title group-hover:text-accent transition-colors">Get more control over your environments with build variables</h3>
      <p className="blog-card-desc">Discover the visible-build flag on Platform.sh, enabling environment-specific build variables for more control over your development process.</p>
    </div>
  </a>
</ShowMore>