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

# Blog Tags — Aspect Build

> Browse the Aspect Build blog by topic: Bazel, rules_js, Gazelle, CI/CD, remote execution, and more.

export const MarketingPage = () => <div className="marketing-page-marker" style={{
  display: "none"
}} />;

export const Section = ({children, className = "", gray = false, dark = false, id}) => <section id={id} className={`w-full flex justify-center px-4 py-16 md:py-24 ${gray ? "bg-gray-50 dark:bg-zinc-900" : dark ? "bg-zinc-900 dark:bg-zinc-950" : ""} ${className}`}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {children}
    </div>
  </section>;

export const Hero = ({title, subtitle, badge, eyebrow, heroImageClassName = "", primaryCta, primaryHref = "#", secondaryCta, secondaryHref = "#", centered = true, children}) => <section className="w-full flex justify-center px-4 pt-16 pb-16 md:pt-24 md:pb-24" style={{
  background: "linear-gradient(180deg, var(--hero-gradient-start, #f8fafc) 0%, var(--hero-gradient-end, #ffffff) 100%)"
}}>
    <div className="w-full" style={{
  maxWidth: "1140px"
}}>
      {centered && !children ? <div className="flex flex-col items-center text-center">
          {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
              {badge}
            </div>}
          {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
              {eyebrow}
            </div>}
          <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight" style={{
  maxWidth: "820px"
}}>
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
          {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem",
  maxWidth: "600px"
}}>
              {subtitle}
            </div>}
          <div className="flex flex-wrap gap-3 mt-10 justify-center">
            {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                {primaryCta}
              </a>}
            {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                {secondaryCta}
              </a>}
          </div>
        </div> : <div className="flex flex-col md:flex-row items-center gap-10 md:gap-16">
          <div className="flex-1 min-w-0">
            {badge && <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 text-blue-700 dark:text-blue-300 text-sm font-medium mb-6">
                {badge}
              </div>}
            {eyebrow && <div className="text-xs font-semibold tracking-widest uppercase text-blue-600 dark:text-blue-400 mb-4">
                {eyebrow}
              </div>}
            <h1 className="text-4xl md:text-5xl font-semibold text-zinc-900 dark:text-white leading-tight tracking-tight">
            {String(title).split(/\\n|\n/).map((line, i) => i ? [<br key={i} />, line] : line)}
          </h1>
            {subtitle && <div className="subtitle-gap text-lg md:text-xl text-zinc-500 dark:text-zinc-300 leading-relaxed" style={{
  marginTop: "1rem"
}}>
                {subtitle}
              </div>}
            <div className="flex flex-wrap gap-3 mt-8">
              {primaryCta && <a href={primaryHref} className="inline-flex items-center px-6 py-3 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 transition shadow-sm">
                  {primaryCta}
                </a>}
              {secondaryCta && <a href={secondaryHref} className={`inline-flex items-center px-6 py-3 rounded-lg border border-zinc-300 dark:border-zinc-600 text-zinc-700 dark:text-zinc-200 font-semibold hover:bg-zinc-50 dark:hover:bg-zinc-800 transition ${secondaryHref === "/request-demo" ? "demo-gradient-btn" : ""}`}>
                  {secondaryCta}
                </a>}
            </div>
          </div>
          {children && <div className={`flex-1 min-w-0 hero-image ${heroImageClassName}`}>
              {children}
            </div>}
        </div>}
    </div>
  </section>;

<MarketingPage />

<Hero title="Browse by tag" subtitle="Every post on the Aspect blog, organized by topic." centered={true} />

<Section>
  <div className="mb-8">
    <a href="/blog" className="text-blue-600 dark:text-blue-400 font-semibold hover:underline">← All posts</a>
  </div>

  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
    <a href="/blog/tags/bazel" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Bazel</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">71</span>
    </a>

    <a href="/blog/tags/ci-cd" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">CI/CD</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">14</span>
    </a>

    <a href="/blog/tags/releases" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Releases</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">13</span>
    </a>

    <a href="/blog/tags/javascript" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">JavaScript</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">11</span>
    </a>

    <a href="/blog/tags/company" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Company</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">10</span>
    </a>

    <a href="/blog/tags/monorepo" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Monorepo</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">10</span>
    </a>

    <a href="/blog/tags/performance" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Performance</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">9</span>
    </a>

    <a href="/blog/tags/migration" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Migration</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">8</span>
    </a>

    <a href="/blog/tags/aspect-cli" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Aspect CLI</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">6</span>
    </a>

    <a href="/blog/tags/containers-oci" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Containers & OCI</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">5</span>
    </a>

    <a href="/blog/tags/typescript" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">TypeScript</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">5</span>
    </a>

    <a href="/blog/tags/gazelle" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Gazelle</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">3</span>
    </a>

    <a href="/blog/tags/linting" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Linting</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">3</span>
    </a>

    <a href="/blog/tags/python" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Python</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">3</span>
    </a>

    <a href="/blog/tags/remote-execution" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Remote Execution</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">3</span>
    </a>

    <a href="/blog/tags/remote-cache" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Remote Cache</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">2</span>
    </a>

    <a href="/blog/tags/selective-delivery" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Selective Delivery</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">2</span>
    </a>

    <a href="/blog/tags/supply-chain-security" className="flex items-center justify-between rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-5 py-4 hover:shadow-lg hover:border-blue-400 transition group">
      <span className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition">Supply Chain Security</span>
      <span className="text-sm text-zinc-500 dark:text-zinc-400">1</span>
    </a>
  </div>
</Section>