TinaCMS Setup Guide on a HUGO site

Requirements

  • A Hugo Site on your local machine
  • A Github repository hosting your website files
  • A Netlify account hosting your website

Step 1 : open a Tina Cloud account

You should have one Tina Cloud account for all your projects. Users are granted on a per-project basis so don’t worry about account limits.

  1. Create a Tina Cloud account : https://app.tina.io/projects/new (use your Github account to do it)

In your account you’ll find a Client ID for each project and you will be able to create a Read-Only Token. Both will be required in step 2.

Step 2 : installing TinaCMS

  1. Open the terminal (use Spotlight on Mac and search “terminal”)

  2. Go to the folder where your site is :

    1. Move down : cd /folder/my-site
    2. Move up : cd
  3. Type this to install the latest version of TinaCMS : npx @tinacms/cli@latest init

  4. Ok to proceed? (y) type “y” and press Enter

  5. What is your Tina Cloud Client ID? It refers to the Project ID that you can find in your TinaCloud account. Open your project to see the Client ID. Hit enter to skip and set up yourself later

  6. What is your Tina Cloud Read Only Token? Go to your Tina Cloud account and get it from your project.

  7. Choose your package manager › - Use arrow-keys. Return to submit. ❯ PNPM (prefer this option but any of them will work) Yarn NPM

  8. What framework are you using? › - Use arrow-keys. Return to submit. Next.js ❯ Hugo (Chose this option) Jekyll Other (SSG frameworks like gatsby, etc.)

  9. Would you like to use Typescript for your Tina Configuration (Recommended)? › (Y/n)

Updating TinaCMS to the latest version

To update TinaCMS, follow these steps :

Ecrit par

Fabien Paupier

Fabien est le directeur général de Moodora. Il a fondé les média appvizer.fr ainsi que spendways.com et à assuré la direction marketing de Greenkub.