expose more content to cms

weru

02.29.2025 435f1a7a2f2c3ec6924e3ec2c726c23d5453cc25

 exampleSite/content/docs/compose/use-tina-cms.md

@@ -4,58 +4,61 @@
weight = 3
+++

Do you prefer managing your site using a CMS? Or would you like to make it easier for someone (a non-techie, perhaps) in your team to make edits easily? If interested, follow along. Else, skip to the [next section](../organize-content/)
Would you like to make it easier for someone (a non-techie, perhaps) in your team to make edits easily?

You may skip to the [next section](../organize-content/), if not interested.

Let's sync your site with Tina CMS.

## Prerequisites !!
1. Check the root of your site. If you do not have a `tina` folder. Download it using this command. 

Obviously you ought to have __a github account__. This is where your website source will live. Basically, Tina will read from github and write (commit) to your github repo.
    ```
    curl -L https://github.com/onweru/compose/archive/refs/heads/master.zip -o cms.zip && unzip cms.zip "compose-master/exampleSite/tina/*" -d . && rm cms.zip
    ```

{{< tip "warning" >}}
Gitlab or bitbucket will work too. Just check their [implementation here](https://Tina.io/docs/git-sync/gitlab/). Happy fishing.
{{< /tip >}}
    {{< tip >}}
    The exampleSite already comes with prefilled placeholder Tina settings. If you set up your site using [option 2](../install-theme/#option-2-recommended)

### Requirement 1 : A Tina.io account
    {{< /tip >}}

Jump over to [Tina.io](https://tina.io/) and sign up for an account. Consider signing up using your github account. That way, you don't have to deal with passwords.
2. Update `./tina/config.js` & `.env` accordingly

### Requirement 2: A Netlify account _(optional)_
    ```json
      ...
      build: {
        outputFolder: "admin",
        publicFolder: "static",
      },
      media: {
        tina: {
          mediaRoot: "images",
          publicFolder: "static",
        },
      },
      schema: {
        collections: [
          ...
        ],
      },
      search: {
        tina: {
          indexerToken: process.env.TINA_SEARCH_TOKEN!,
          stopwordLanguages: ["deu", "eng", "fra", "ita", "spa", "nld"]
        },
        indexBatchSize: 100,
        maxSearchIndexFieldLength: 100
      }
      ...
    ```

If you intend to host with something other than Netlify _e.g github pages_, please scroll on. Hosting with Netlify is a lot of fun though; I highly recommend it.
3. Run the CMS locally

### Step 1 : Fork or Clone Compose theme
    ```sh
    # you can use `pnpm, yarn or npm` instead of bun
    bun install && bun dev
    # if dependencies are already installed
    bun dev
    ```

First we will fork [this theme's](https://github.com/onweru/compose) template.
4. When in doubt check [tina CMS docs](https://tina.io/docs)

### Step 2 : Add your repository in Tina CMS

{{< tip >}}
The exampleSite already comes with prefilled placeholder Tina settings. If you set up your site using [option 2](../install-theme/#option-2-recommended)

{{< /tip >}}

Update `./tina/config.js` & `.env` accordingly

```json
search: {
  ...
    tina: {
      indexerToken: "977c145439dda036080dd7a33478d2ba385ab5af", // replace
      stopwordLanguages: ["deu", "eng", "fra", "ita", "spa", "nld"] // consider adding or removing languages https://github.com/fergiemcdowall/stopword#language-code
    },
    ...
  }
...
```

Go to your [Tina](https://tina.io/) account

## Use locally

```sh
# you can use `pnpm, yarn or npm` instead of bun
bun install && bun dev
# if dependencies are already installed
bun dev
```