> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/setup/content.md.
> Making your own content

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/setup/content

# Authoring Content

Astro helps you [author and present your content](https://docs.astro.build/en/guides/content/). You can write a blog post directly in Astro using Markdown/MDX, or fetch your content from a headless CMS. Astro lets you build a site around your content: you can add a layout to your pages, create an index of posts, and set up an RSS feed to allow readers to subscribe.

## Writing Content

In Astro, you can author your content in a variety of ways:

- In Markdown files (`.md` or [alternative extensions](https://docs.astro.build/en/guides/markdown-content/)), designed to make it easy to write rich text content.
- In MDX (`.mdx`) or Markdoc (`.mdoc`) files with [an official integration](https://docs.astro.build/en/guides/integrations-guide/), which can include components and dynamic expressions in your document.
- Using a [third-party content management system (CMS)](https://docs.astro.build/en/guides/content/#headless-cms-authoring), then pulling that content into a `.astro` page.
- Other options (less commonly used for content-heavy pages) include [`.astro` files](https://docs.astro.build/en/basics/astro-pages/#astro-pages) and [`.html` files](https://docs.astro.build/en/basics/astro-pages/#html-pages).

For this theme, `.md` and `.mdx` is suopported by default.

### Markdown Authoring

Markdown is a convenient syntax for writing rich text with basic formatting and common elements like headers, lists, and images. Astro has built-in support for Markdown files in your project.

Create and write a new `.md` file in your code editor or bring in an existing file written in your favorite Markdown editor. Some online Markdown editors like [StackEdit](https://stackedit.io/) and [Dillinger](https://dillinger.io) will even allow you to edit and sync your work with your Astro repository stored on GitHub.

Let's give you example of [writing Markdown content in Astro](https://docs.astro.build/en/guides/markdown-content/):

```markdown title="src/content/blog/first-article.md"
---
title: 'First Article' # (Required, max 60)
description: 'I like writing articles.' # (Required, 10 to 160)
publishDate: '2024-11-30 00:08:00' # (Required, Date)
tags:
  - Markdown # (Also can write format like next line)
heroImage: { src: './thumbnail.jpg', alt: 'an image targetting my article', color: '#B4C6DA' }
# thumbnail.jpg should be in the same folder as the article
draft: false # (set true will only show in development)
language: 'English' # (String as you like)
comment: true # (set false will disable comment, even if you've enabled it in site-config)
---

## This is a title

This is a paragraph.
```

If you have a lot of assets, you can create a folder for title like `src/content/blog/first-article/` and put all your assets in there. Of course, your content should be renamed to `index.md` or `index.mdx` and also be contained in this folder.

**tip:**

If you want to use remote image for `heroImage`, please add `inferSize: true` or specificed `width` and `height` to the object `heroImage`. Example:

```yaml
heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', inferSize: true }
# Or specificed width and height
heroImage:
  { src: 'https://img.tukuppt.com/ad_preview/00/15/09/5e715a320b68e.jpg!/fw/980', width: 980, height: 551 }
```

Too complex? Simple example just need these:

```markdown title="src/content/blog/simple-article.md"
---
title: Simple Article
description: Just another simple article.
publishDate: 2024-07-26
---

I like writing simple articles.
```

**tip:**

This theme has a quick script to create a new article for you. Just run `bun new <post-slug>` in your terminal.

### MDX Authoring

This allows you to include UI elements such as a banner or an interactive carousel along with your text content.

Write and edit `.mdx` files directly in your code editor, alongside your project files. MDX files are a [supported page file type](https://docs.astro.build/en/basics/astro-pages/#supported-page-files) in Astro, and may also be used as [content collection entries](https://docs.astro.build/en/guides/content/#content-collections).

For integrated components, checkout [User Components](/docs/integrations/components) and [Advanced Components](/docs/integrations/advanced).

### Connect a CMS

See [Astro: Use a CMS with Astro](https://docs.astro.build/en/guides/cms/)

## Pages

Astro uses **file-based routing** to [generate your build URLs](https://docs.astro.build/en/guides/routing/) based on the file layout of your project `src/pages/` directory.

### Routes

`.astro` [page components](https://docs.astro.build/en/basics/astro-pages/) as well as Markdown and MDX Files (`.md`, `.mdx`) within the `src/pages/` directory **automatically become pages on your website**. Each page’s route corresponds to its path and filename within the `src/pages/` directory.

```diff
# Example: Static routes
src/pages/index.astro        -> mysite.com/
src/pages/about.astro        -> mysite.com/about
src/pages/about/index.astro  -> mysite.com/about
src/pages/about/me.astro     -> mysite.com/about/me
src/pages/posts/1.md         -> mysite.com/posts/1
```

**tip:**

There is no separate "routing config" to maintain in an Astro project! When you add a file to the `src/pages/` directory, a new route is automatically created for you. In static builds, you can customize the file output format using the [`build.format`](https://docs.astro.build/en/reference/configuration-reference/#buildformat) configuration option.

### Astro Pages

Astro pages use the `.astro` file extension and support the same features as [Astro components](https://docs.astro.build/en/basics/astro-components/).

```astro title="src/pages/index.astro"
---

---

<html lang='en'>
  <head>
    <title>My Homepage</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>
```

A page must produce a full HTML document. If not explicitly included, Astro will add the necessary `<!DOCTYPE html>` declaration and `<head>` content to any `.astro` component located within `src/pages/` by default. You can opt-out of this behavior on a per-component basis by marking it as a [partial](#page-partials) page.

To avoid repeating the same HTML elements on every page, you can move common `<head>` and `<body>` elements into your own [layout components](/en/basics/layouts/). You can use as many or as few layout components as you'd like.

And in this theme, luckly you can use `BaseLayout.astro` as your layout component.

```astro title="src/pages/mypage.astro"
---
import PageLayout from '@/layouts/BaseLayout.astro' // [!code highlight]

const meta = {
  title: 'My Page',
  description: 'My fav page'
}
const highlightColor = '#44AEF6' // Optional
---

<PageLayout {meta} {highlightColor}>
  <!-- [!code highlight] -->
  <p>My page content, wrapped in a layout!</p>
</PageLayout>
<!-- [!code highlight] -->
```

**tip:**

  Read more about [layout components](https://docs.astro.build/en/basics/layouts/) in Astro.

### Markdown/MDX Pages

While `.astro` pages have some flexsible features and be friendly to inline / module scripts, `.md` and `.mdx` pages are more suitable for content-focused pages.

Astro also treats any Markdown (`.md`) files inside of `src/pages/` as pages in your final website. If you have the [MDX Integration installed](https://docs.astro.build/en/guides/integrations-guide/mdx/#installation), it also treats MDX (`.mdx`) files the same way.

**caution:**

Consider creating [content collections](/en/guides/content-collections/) instead of pages for directories of related Markdown files that share a similar structure, such as blog posts or product items.

Markdown files can use the special `layout` frontmatter property to specify a [layout component](https://docs.astro.build/en/basics/layouts/) that will wrap their Markdown content in a full `<html>...</html>` page document.

This theme supports a good layout for `.md` and `.mdx` files:

```markdown title="src/pages/terms/privacy.md"
---
layout: '@/layouts/IndividualPage.astro'

title: 'Privacy Policy'
description: 'Effective date: 2024-11-26'
language: 'En' # optional
back: '/terms' # optional, default to '/'
heroImage: { src: './thumbnail.jpg' } # will used to social-image
---

## Privacy Policy 1

This is the first section of the privacy policy.
```

### HTML Pages

Files with the `.html` file extension can be placed in the `src/pages/` directory and used directly as pages on your site. Note that some key Astro features are not supported in [HTML Components](https://docs.astro.build/en/basics/astro-components/#html-components).