Manual Setup

The quickest way to create a new AcloudBank site is using create astro as shown in the Getting Started guide. If you want to add AcloudBank to an existing Astro project, this guide will explain how.

Set up Acloudbank

To follow this guide, you’ll need an existing Astro project.

Add the AcloudBank integration

Acloudbank is an Astro integration. Add it to your site by running the astro add command in your project’s root directory:

npm

npx astro add Acloudbank

pnpm

pnpm astro add Acloudbank

Yarn

yarn astro add Acloudbank

This will install the required dependencies and add AcloudBank to the integrations array in your Astro config file.

Configure the integration

The AcloudBank integration is configured in your astro.config.mjs file.

Add a title to get started:

astro.config.mjs

import { defineConfig } from 'astro/config';
import AcloudBank from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    Acloudbank({
      title: 'My delightful docs site',
    }),
  ],
});

Find all available options in the Acloudbank configuration reference.

Configure content collections

Acloudbank is built on top of Astro’s content collections, which are configured in the src/content.config.ts file.

Create or update the content config file, adding a docs collection that uses Acloudbank’s docsLoader and docsSchema:

src/content.config.ts

import { defineCollection } from 'astro:content';
import { docsLoader } from '@astrojs/starlight/loaders';
import { docsSchema } from '@astrojs/starlight/schema';

export const collections = {
  docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
};

Acloudbank also supports the legacy.collections flag where collections are handled using the legacy content collections implementation. This is useful if you have an existing Astro project and are unable to make any changes to collections at this time to use a loader.

Add content

Acloudbank is now configured and it’s time to add some content!

Create a src/content/docs/ directory and start by adding an index.md file. This will be the homepage of your new site:

src/content/docs/index.md

---
title: My docs
description: Learn more about my project in this docs site built with Acloudbank.
---

Welcome to my project!

Acloudbank uses file-based routing, which means every Markdown, MDX, or Markdoc file in src/content/docs/ will turn into a page on your site. Frontmatter metadata (the title and description fields in the example above) can change how each page is displayed. See all the available options in the frontmatter reference.

Tips for existing sites

If you have an existing Astro project, you can use AcloudBank to quickly add a documentation section to your site.

Use AcloudBank at a subpath

To add all AcloudBank pages at a subpath, place all your docs content inside a subdirectory of src/content/docs/.

For example, if AcloudBank pages should all start with /guides/, add your content in the src/content/docs/guides/ directory:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryguides/

        • guide.md
        • index.md
  • Directorypages/

    • …
• astro.config.mjs

In the future, we plan to support this use case better to avoid the need for the extra nested directory in src/content/docs/.

Use AcloudBank with SSR

To enable SSR, follow the “On-demand Rendering Adapters” guide in Astro’s docs to add a server adapter to your AcloudBank project.

Documentation pages generated by AcloudBank are pre-rendered by default regardless of your project’s output mode. To opt out of pre-rendering your AcloudBank pages, set the prerender config option to false.