#defining collection of markdown files

8 messages · Page 1 of 1 (latest)

shrewd jetty
#

I have a directory of markdown files for my blog posts. I created a src/content.config.ts withtje following content:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blogs = defineCollection({
  loader: glob({ pattern: "*.md", base: "./content/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
  }),
});

export const collections = { blogs };

I am retrieving the collection via:

import { getCollection } from "astro:content";

interface Frontmatter {
  title: string;
  description: string;
}

const posts = await getCollection("blogs");

I'm gettting the error:
The collection "blogs" does not exist or is empty. Please check your content config file for errors.

I'm not sure what went wrong according to documentation I'm referencing.

nimble brookBOT
#

Hi @shrewd jetty. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the knowledge sources, it appears that there might be a few issues with your content collection setup. Let's address them:

  1. File Location:
    Your src/content.config.ts file is in the correct location. However, make sure that your Markdown files are actually located in the ./content/blog directory relative to your project root, not in src/content/blog.

  2. Collection Name:
    In your src/content.config.ts, you've defined the collection as blogs, but the conventional name for a blog collection is usually singular, i.e., blog. This isn't causing your error, but it's worth noting for consistency.

  3. Base Directory:
    The base option in your glob loader should point to the directory containing your Markdown files relative to the project root. If your files are indeed in a content folder at the root of your project, your configuration looks correct.

  4. File Pattern:
    Your glob pattern "*.md" will only match Markdown files in the root of the base directory. If your files are nested in subdirectories, you might want to use "**/*.md" instead.

  5. TypeScript Configuration:
    Ensure that your tsconfig.json includes the necessary compiler options for content collections. Specifically, you need strictNullChecks: true and allowJs: true.

Here's a corrected version of your src/content.config.ts:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./content/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
  }),
});

export const collections = { blog };

And here's how you should retrieve the collection:

import { getCollection } from "astro:content";

const posts = await getCollection("blog");
#

If you've made these changes and are still encountering the error, there are a few more things to check:

  1. Make sure you have at least one Markdown file in your ./content/blog directory.
  2. Verify that your Markdown files have the correct frontmatter matching your schema.
  3. Try restarting your dev server after making changes to the src/content.config.ts file.

If the issue persists, you may need to check for any typos or ensure that your project structure matches what you've defined in your configuration.

For more detailed information on setting up content collections, you can refer to the Content Collections guide in the Astro documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@shrewd jetty Kapa.ai is still learning and improving, please let me know how I did by reacting below.

shrewd jetty
#

@nimble brook thanks. I fixed it my using ./src/content/blog.

nimble brookBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

I'm glad to hear you were able to resolve the issue! Using ./src/content/blog as the base directory for your blog posts is indeed a common and recommended structure in Astro projects.

This change aligns with Astro's conventional project structure, where content is typically stored within the src directory. Your updated src/content.config.ts file should now look something like this:

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
  loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
  schema: z.object({
    title: z.string(),
    description: z.string(),
  }),
});

export const collections = { blog };

This setup should work correctly with the getCollection("blog") function you were using earlier.

Remember that if you make any changes to your src/content.config.ts file in the future, you may need to restart your dev server for the changes to take effect.

If you have any more questions about content collections or other aspects of Astro, feel free to ask!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: