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

# Knowledge base

> Build a knowledge base with ButterCMS and your framework of choice using one of our guided tutorials.

## What you'll build

A complete knowledge base that includes:

* Organized sections and articles
* Hierarchical navigation
* Search functionality
* Article detail pages
* Related articles suggestions

<Tip>
  These tutorials use Page Types for a hierarchical knowledge base with SEO-friendly URLs. For simpler documentation needs, you could also use Collections to store articles in a flat structure. The Page Type approach is recommended for knowledge bases that need search engine visibility and deep linking.
</Tip>

<Card title="Pages core concepts" icon="lightbulb" href="../../../core-concepts/content-types/pages">
  For a deeper look at ButterCMS Pages, check out our core concepts article. Learn about creating Pages,
  choosing between the blog engine and a custom Page Type, the API, and more.
</Card>

## Choose your framework

Choose one of the frameworks below for a tailored guide to building a fully functional knowledge base with ButterCMS.

<Tip>
  Many of these tutorials have their code available on GitHub. [Check if your favorite framework is one of them!](https://github.com/orgs/ButterCMS/repositories?q=knowledge-base)
</Tip>

### JavaScript frameworks

<CardGroup cols={3}>
  <Card title="Angular" icon="js" href="https://buttercms.com/blog/how-to-build-a-knowledge-base-with-angular" />

  <Card title="Astro" icon="js" href="https://buttercms.com/blog/astro-tutorial-knowledge-base" />

  <Card title="Express.js" icon="js" href="https://buttercms.com/blog/expressjs-website-tutorial-effortless-knowledge-base-creation" />

  <Card title="Next.js" icon="js" href="https://buttercms.com/blog/nextjs-knowledge-base-tutorial" />

  <Card title="Nuxt" icon="js" href="https://buttercms.com/blog/nuxt-tutorial-building-a-knowledge-base" />

  <Card title="React" icon="js" href="https://buttercms.com/blog/build-a-knowledge-base-with-react" />

  <Card title="React Native" icon="js" href="https://buttercms.com/blog/building-a-knowledge-base-with-react-native" />

  <Card title="Vanilla js" icon="js" href="https://buttercms.com/blog/javascript-app-tutorial-knowledge-base-creation" />

  <Card title="Vue.js" icon="js" href="https://buttercms.com/blog/vue-knowledge-base" />
</CardGroup>

### Non-JavaScript frameworks

<CardGroup cols={3}>
  <Card title="ASP.Net" icon="microsoft" href="https://buttercms.com/blog/asp-net-website-tutorial-knowledge-base" />

  <Card title="Flutter" icon="flutter" href="https://buttercms.com/blog/flutter-app-tutorial-build-a-knowledge-base" />

  <Card title="Hugo" icon="golang" href="https://buttercms.com/blog/hugo-tutorial-knowledge-base" />

  <Card title="Kotlin" icon="android" href="https://buttercms.com/blog/kotlin-tutorial-knowledge-base" />

  <Card title="Laravel" icon="laravel" href="https://buttercms.com/blog/create-laravel-knowledge-base-app-with-buttercms" />

  <Card title="PHP" icon="php" href="https://buttercms.com/blog/php-knowledge-base-tutorial" />

  <Card title="Ruby + Rails" icon="gem" href="https://buttercms.com/blog/rails-tutorial-creating-a-knowledge-base" />

  <Card title="Ruby + Sinatra" icon="gem" href="https://buttercms.com/blog/create-ruby-knowledge-base-website" />
</CardGroup>