Home
Blog
Showcase
Community
Introduction
Overview
Introduction To TinaCMS
Getting Started
Using the Tina Editor
FAQ
Core Concepts
Content Modeling
Data Fetching
Visual Editing
Querying Content
Overview
Writing custom queries
Editing
Overview
Markdown & MDX
Block-based editing
Single Document Collections
Customizing Tina
Overview
Validation
Custom Field Components
Custom List Rendering
Format and Parse Input
Filename Customization
Before Submit function
Going To Production
Overview
Tina Cloud
Overview
The Dashboard
Deployment Options
Vercel
Netlify
Github Pages
API Versioning
Self-Hosted
Drafts
Overview
Draft Fields
Editorial Workflow
Guides
Overview
Framework Guides
Separate Content Repo
Querying Tina Content at Runtime
Internationalization
Migrating From Forestry
Reference
Overview
Config
Schema
The "tina" folder
The TinaCMS CLI
Media
Search
Content API
Tina's edit state
The "tinaField" helper
Self-Hosted Components

GitHub Pages is a popular hosting option for static sites. GitHub Pages can be configured in <your-repo> > Settings > Pages.

Build Configuration

GitHub Pages offers a few build options:

  • GitHub Actions
  • Deploy from a branch

GitHub Actions

We want to choose "GitHub Actions" so that we can control the build script, and make sure it's also building the TinaCMS admin

By clicking "Configure" on the action it's created for us, we can then tweak the build script to build tinacms along with our site.

Add the following step before your site's build step:

If you are using npm as your package name, you can use the following:

- name: Build TinaCMS
env:
TINA_PUBLIC_CLIENT_ID: ${{ secrets.TINA_PUBLIC_CLIENT_ID }}
TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
run: npx tinacms build

or if you are using yarn:

- name: Build TinaCMS
env:
TINA_PUBLIC_CLIENT_ID: ${{ secrets.TINA_PUBLIC_CLIENT_ID }}
TINA_TOKEN: ${{ secrets.TINA_TOKEN }}
run: yarn build
# This assumes that your "build" script in your
# package.json is "tinacms build"

Your GitHub Action will look something like:

GitHub Action

Common Issues

Common Issue: 'Missing script: "tinacms"'

This error might occur from the following reasons:

1. tinacms dependencies not added to package.json.

Make sure that both the tinacms & @tinacms/cli dependencies are listed in your package.json.

2. Dependencies aren't being installed in CI.

If you are using npm make sure that npm ci is being run before the TinaCMS build command. If you are using yarn, make sure you are running yarn install --frozen-lockfile before running the build command.

3. Needing to define a 'tinacms' script.

If your CI is running something like yarn tinacms build instead of npx tinacms build, you'll need to add a custom script to your package.json:

"scripts": {
"tinacms": "tinacms",
// ...

Common Issue: /admin is giving a 404

This can happen for a number of reasons but here are the most common reasons and fixes:

1. Not providing a custom build workflow

If your site is deploying with GitHub Pages, it may be using GitHub's default build steps. In this case, TinaCMS won't be included in the build.

.

To fix this, you'll need to select the "GitHub Actions" source, and build the tinacms admin along with your site. You can see our doc above for help setting up this GitHub Action.

2. 'tinacms build' is not running in CI

Check to make sure that the build command is running and not failing

Note: If you are using the github pages setup from hugo you will need to make sure that a package-lock.json exists in the root of your repo.

Environment variables

Assuming that your Tina clientID and token are setup as environment variables, you will need to add those to the GitHub Secrets for your project. The secrets we used in the code snippet above were TINA_PUBLIC_CLIENT_ID & TINA_TOKEN.

Previous
Deploying to Netlify
Next
GraphQL API Versioning

Product

Showcase
Tina Cloud
Introduction
How Tina Works
Roadmap

Resources

Blog
Examples
Support
Media

Whats New
TinaCMS
TinaCloud
Use Cases
Agencies
Documentation
Teams
Jamstack CMS
Benefits
MDX
Markdown
Git
Editorial Workflow
Customization
SEO
Comparisons
TinaCMS vs Storyblok
TinaCMS vs Sanity
TinaCMS vs DecapCMS
TinaCMS vs Contentful
TinaCMS vs Builder.io
TinaCMS vs Strapi
Integrations
Astro
Hugo
NextJS
Jekyll