# Creating a "home" page

https://www.sanity.io/learn/course/page-building/creating-a-home-page.md

Create a "singleton" document to store distinct content that is globally relevant to the application.

A quick side mission before going further. A website's "home" page is typically used to show the same sort of content that our page builder can generate. So it makes sense to reuse this content structure on the home page like we would any other page.

For any editable piece of content that has global relevance to an application—like site name, navigation, footer text, etc—most often you will use a "singleton" document. That is, a document type of which there should only ever be one in a dataset and it likely has a distinct `_id` value.

## Site settings schema type

We'll keep the site settings simple for now. A new document type with just a single field—a reference to a page, which will be used as the home page on the site.

1. **Create** the `siteSettings` schema type

```typescript:src/sanity/schemaTypes/siteSettingsType.ts
import { defineField, defineType } from "sanity";
import { ControlsIcon } from "@sanity/icons";

export const siteSettingsType = defineType({
  name: "siteSettings",
  title: "Site Settings",
  type: "document",
  icon: ControlsIcon,
  fields: [
    defineField({
      name: "homePage",
      type: "reference",
      to: [{ type: "page" }],
    }),
  ],
  preview: {
    prepare() {
      return {
        title: "Site Settings",
      };
    },
  },
});
```

1. **Register** `siteSettings` to your Studio schema types

```typescript:src/sanity/schemaTypes/index.ts
// ...all other imports
import { siteSettingsType } from "./siteSettingsType";

export const schema: { types: SchemaTypeDefinition[] } = {
  types: [
    // ...all other types
    siteSettingsType,
  ],
};
```

Singleton documents can be invoked with a distinct `_id` value by configuring it in your structure builder configuration.

**Update** the structure builder configuration to include a singleton siteSettings document.

```typescript:src/sanity/structure.ts
export const structure: StructureResolver = (S) =>
  S.list()
    .title("Blog")
    .items([
      // ...all other items
      S.listItem()
        .id("siteSettings")
        .schemaType("siteSettings")
        .title("Site Settings")
        .child(
          S.editor()
            .id("siteSettings")
            .schemaType("siteSettings")
            .documentId("siteSettings")
        ),
      ...S.documentTypeListItems().filter(
        (item) =>
          item.getId() &&
          ![
            // ...all other ignored types
            "siteSettings",
          ].includes(item.getId()!)
      ),
    ]);
```

1. See more examples of what you can do in the [Structure Builder cheat sheet](https://www.sanity.io/learn/studio/structure-builder-cheat-sheet)

You should now see the Site Settings document on the left hand side of your Structure tool. Instead of opening a list of documents, it opens a single one.

1. **Select** a "Home Page" reference, and **publish** the Site Settings

### There can only be one

To prevent the creation of any more site settings documents, the type can be removed from the "Create" menu at the top left of your Studio.

1. **Update** your Studio config to remove this document type from the list 

```typescript:sanity.config.ts
export default defineConfig({
  // ...all other settings
  document: {
    newDocumentOptions: (prev) => prev.filter((item) => item.templateId !== "siteSettings"),
  },
});

```

## Query the home page

The current "page" document type query relies on a page slug, so you'll need a different query for this site settings document first, and then query that page.

1. **Update** your `queries.ts` file to include this home page query

```typescript:src/sanity/lib/queries.ts
// ...all other queries

export const HOME_PAGE_QUERY = defineQuery(`*[_id == "siteSettings"][0]{
    homePage->{
      ...,
      content[]{
        ...,
        _type == "faqs" => {
          ...,
          faqs[]->
        }
      }      
    }
  }`);
```

1. **Run** the following command to update your schema extraction and generated types

```sh:Terminal
pnpm run typegen
```

1. This command was setup in the [Generate TypeScript Types](https://www.sanity.io/learn/course/content-driven-web-application-foundations/generate-typescript-types) lesson of the [Content-driven web application foundations](https://www.sanity.io/learn/course/content-driven-web-application-foundations) course.

Then update your home page route file similar to the dynamic route for individual pages, but for just this distinct home page.

1. **Update** the home page route

```typescript:src/app/(frontend)/page.tsx
import { PageBuilder } from "@/components/page-builder";
import { sanityFetch } from "@/sanity/lib/live";
import { HOME_PAGE_QUERY } from "@/sanity/lib/queries";

export default async function Page() {
  const { data: page } = await sanityFetch({
    query: HOME_PAGE_QUERY,
  });

  return page?.homePage?.content ? (
    <PageBuilder content={page?.homePage.content} />
  ) : null;
}
```

The front page of your application at [http://localhost:3000](http://localhost:3000) should now show the page selected in your Site Settings document.

Excellent! You might now imagine how you would build other global content like your heading, footer and navigation menus into this same Site Settings document.

Let's keep enhancing the editing experience in the next lesson.