{"id":24427707,"url":"https://github.com/makerkit/next-tinacms-blog-kit","last_synced_at":"2025-04-12T09:50:40.644Z","repository":{"id":38381886,"uuid":"500155630","full_name":"makerkit/next-tinacms-blog-kit","owner":"makerkit","description":"Blog Starter for your next blog, portfolio or online publication using Next.js, Tina CMS and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2022-09-02T11:59:34.000Z","size":794,"stargazers_count":36,"open_issues_count":1,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T04:41:33.428Z","etag":null,"topics":["blog-boilerplate","blog-starter","nextjs","react-blog","tinacms"],"latest_commit_sha":null,"homepage":"https://makerkit.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/makerkit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-05T16:48:58.000Z","updated_at":"2025-01-26T19:43:44.000Z","dependencies_parsed_at":"2022-08-24T14:27:53.215Z","dependency_job_id":null,"html_url":"https://github.com/makerkit/next-tinacms-blog-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Fnext-tinacms-blog-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Fnext-tinacms-blog-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Fnext-tinacms-blog-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makerkit%2Fnext-tinacms-blog-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makerkit","download_url":"https://codeload.github.com/makerkit/next-tinacms-blog-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248550633,"owners_count":21122932,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog-boilerplate","blog-starter","nextjs","react-blog","tinacms"],"created_at":"2025-01-20T12:12:35.084Z","updated_at":"2025-04-12T09:50:40.610Z","avatar_url":"https://github.com/makerkit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A free and open-source starter by MakerKit.\n\n# Blog Starter Template with Next.js, Tina CMS, MDX and Tailwind CSS\n\nThis Blog Starter is the perfect foundation for writing your next blog, portfolio or online publication using Next.js, Tina CMS and Tailwind CSS.\n\n## Features\n\n- ✅ **Responsive, fast and ready-to-deploy Next.js Blog Starter**\n- 📄 **Write your articles with all the power of Tina CMS and MDX**\n-  ⚡ **Live-reloading MDX content**\n- 🚀 **Search Engine Optimized (SEO) out-of-the-box**\n- 📂 **Sitemap and RSS generated automatically**\n- 🎨 **Dark and Light themes**\n- ✨ **Written with strict Typescript, validated with EsLint, formatted with Prettier**\n- 👨‍💻 **Developed, maintained and used by [Makerkit](https://makerkit.dev)**\n\n## Getting Started\n\nClone the repository:\n\n```\ngit clone https://github.com/makerkit/next-tinacms-blog-kit\n```\n\nRename your project and jump into the folder.\n\n### Install Node dependencies\nInstall the Node dependencies:\n\n```\nnpm i\n```\n\n### Initialize Tina CMS\n\nInitialize [Tina CMS](https://tina.io/) with the following command:\n\n```\nnpx @tinacms/cli@latest init\n```\n\nWhen Tina prompts to override your App component, reject by typing \"n\" (it's already set up):\n```\n✔ do you want us to override your _app.tsx? … no\n```\n\nThis command will generate some redundant files; feel free to remove them.\n\nDecorate the following commands with `--experimentalData` to enable querying and filtering your graphql content with Tina:\n\n```\n\"dev\": \"NODE_ENV=development tinacms server:start -c \\\"next dev\\\" --experimentalData\",\n\"build\": \"tinacms server:start -c \\\"next build\\\" --experimentalData\",\n\"start\": \"tinacms server:start -c \\\"next start\\\" --experimentalData\",\n```\n\nNB: do not forget to prefix the `dev` command with `NODE_ENV=development`.\n\n#### Setting up the Tina CMS schema\n\nCopy the contents of the file `schema.template` and override the content of `schema.ts`. Tina CMS will initialize the correct GraphQL schema based on the schema we provided.\n\n### Run the application\n\nThen, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n1. Visit [http://localhost:3000](http://localhost:3000) to see your blog\n2. Visit [http://localhost:3000/admin](http://localhost:3000/admin) to access the Tina CMS admin\n3. Visit [http://localhost:4001/altair](http://localhost:4001/altair) to access the GraphqQL playground\n\nRemove `.tina` from the `.gitignore` file, and remember to check it in, so that your builds will be able to use the folder.\n\n#### Inline Tina Editor\n\nBecause Tina lazy-loads the inline editor in production mode, **but does not disable it**, I thought the best compromise was to dynamicaly add the editor based on a variable.\n\nBy default, the editor is loaded only if the URL contains a query parameter named `tina`. You can change this logic as you prefer in `_app.tsx`.\n\n#### Using Tina Cloud? \n\nIf you're also using Tina Cloud, remember to add the `NEXT_PUBLIC_TINA_CLIENT_ID` environment variable, either from a `.env` file or from your Vercel console (or other provider).\n\nYou will find the Client ID environment variable in the [Tina CMS Dashboard](https://tina.io/docs/tina-cloud/dashboard/).\n\n### Setting the upstream folder\n\nIf you want, reinitialize the git repository and set this repository as your upstream, so you can continue getting updates:\n\n```\nrm -rf .git\ngit init\ngit remote add upstream https://github.com/makerkit/next-tinacms-blog-kit\n```\n\nTo keep your repository up-to-date with this, use `git pull`:\n\n```\ngit pull upstream main \n```\n\nSolve the eventual conflicts and merge 😃\n\n### Configuration\n\nOpen the configuration file at `./configuration.ts`. It will have the following content:\n\n```tsx\nconst configuration = {\n  site: {\n    name: '',\n    description: '',\n    themeColor: '',\n    siteUrl: '',\n    siteName: '',\n    twitterHandle: '',\n    githubHandle: '',\n    language: 'en',\n  },\n  blog: {\n    maxReadMorePosts: 6,\n  },\n  production: process.env.NODE_ENV === 'production',\n};\n```\n\nUpdate it with your own data, or leave as is to begin with.\n\n### Enter the Tina CMS Admin\n\nAfter starting the development server, access the following URL: https://localhost:3000/admin.\n\nTime to get writing!\n\n### Add Articles, Categories and Authors manually\n\nBefore creating a blog post, we define which collection it belongs to and the author of the post.\n\nTo define a category, create a JSON file at `content/categories`:\n\n```json\n{\n  \"name\": \"Tutorials\",\n  \"emoji\": \"🖥️\"\n}\n```\n\nAlternatively, you can choose to assign a picture to each collection (or neither):\n\n```json\n{\n  \"name\": \"Tutorials\",\n  \"picture\": \"/assets/images/tutorials.png\"\n}\n```\n\nNext, we need to add the author of the article. Add a JSON file at `_authors`:\n\n```json\n{\n  \"name\": \"MakerKit\",\n  \"picture\": \"/assets/images/makerkit.png\",\n  \"url\": \"https://twitter.com/makerkit_dev\"\n}\n```\n\nWe can now create a blog post. Add an MDX file at `_posts`:\n\n```yaml\n---\ntitle: 'Dextera Sibi Orbes'\ncategory: 'content/categories/lorem-ipsum.json'\nauthor: 'content/authors/makerkit.json'\ndate: 2022-03-30\nlive: true\nimage: ''\ndescription: \"Lorem markdownum ictu; leti quae, paenituisse venere. Liquet praemia omne di\namarunt dicta.\"\n---\n```\n\nAs you can see, the properties `category` and `author` are references to the path of each.\n\n## Deploy on Vercel\n\nThe easiest way to deploy this app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template\u0026filter=next.js\u0026utm_source=create-next-app\u0026utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakerkit%2Fnext-tinacms-blog-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakerkit%2Fnext-tinacms-blog-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakerkit%2Fnext-tinacms-blog-kit/lists"}