CMS (Content Management System)

Start the static Blog website with Outstatic CMS in 2024

In the article, do you understand what Outstatic CMS is and how to use it with Next.js and Markdown?

Rajdeep Singh

Published in

FrontEnd web

6 min readNov 8, 2023

Outstatic CMS is a new static CMS for Next.js. Outstatic CMS is a markdown-based content management static site.

Outstatic is an open-source self-host CMS; you can deploy it on the vercel, Netlify, etc. You do not need any database for Outstatic CMS.

Outstatic CMS's current version (v0.0.41) only supports the pages router, but you can use the app and pages router together. Outstatic upcoming release is fully compatible with the app router.

Table of content

· How does it work?
∘ What's a Collection?
∘ What's a Document?
· How to use it?
∘ Create a new Next.js app
∘ Installation
∘ Config Outstatic CMS with Next.js
∘ Configure The API
∘ App Router
∘ Pages Router
∘ Configure The Outstatic CMS Dashboard Router
∘ App Router
∘ Pages Router
∘ Environment Variable
· FAQ
∘ How to move x tool to Outstatic CMS?
∘ Is Outstatic CMS production ready?
· Conclusion

Demo Code

I created a demo project to show you how to use it — the source code is available on GitHub.

How does it work?

Outstatic CMS creates an outstatic/content folder directly on your GitHub repository, which pushes every activity, like creating, updating, and deleting collections and documents, directly to the GitHub repository.

When you work with Outstatic CMS, you need an internet connection, even when you work locally.

What's a Collection?

The collection helps to manage content in outstatic CMS. An example of a collection is posts, pages Where we can store and manage data.

The collection is stored inside the outstatic/content folder. You can create a collection as much as you require, and inside the collection, you create a Field. For example, tags, categories, etc.

Tags Fields created in the Posts collection

The tags, or any other Fields you create, that show or are available on the editor page.

Show tags fields inside the posts collection.

What's a Document?

The Document is your markdown file called Document in outstatic CMS. The Document is stored in the following /outstatic/content/{collection}/{document} location.

For example, when we create new posts in outstatic CMS, it stores the /outstatic/content/posts/hello-world.md file. The same goes when we create a new page in outstatic CMS; it is stored /outstatic/content/pages/about.md in the following location.

How to use it?

To work with outstatic CMS, first, install it, configure the API and pages, and lastly, add some environment variables to configure the outstatic CMS.

Steps

Create a new Next.js app
Installation
Config Outstatic CMS with Next.js

Create a new Next.js app.

To create a new application with nextjs, use the create-next-app CLI tool.

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

Installation

You install the outstatic CMS using the NPM, yarn, and pnpm node package management.

# npm
npm install outstatic

# yarn
yarn add outstatic

# pnpm
pnpm install outstatic

Config Outstatic CMS with Next.js

There are three steps to configure Next.js and Outstatic CMS together. Don't worry. Every step that I mention comes with copy and paste of code.

Steps :

Configure The API
Configure The Outstatic CMS Dashboard Page
Environment Variable

Configure The API

Configure the outstatic CMS API in the nextjs app router.

Outstatic CMS API directly communicates with your selected GitHub repository and stores the data as a JSON.

The Outstatic CMS currently drop the page router, and you can not use the page router.

To configure the Outstatic CMS API in the nextjs app router, please copy the following code and paste it into the following /app/api/outstatic/[[...ost]]/route.ts file.

// app/api/outstatic/[[...ost]]/route.ts (outstatic:1.0.0-canary.4)

export const GET = OutstaticApi.GET

export const POST = OutstaticApi.POST

import { OutstaticApi } from 'outstatic'

export const GET = OutstaticApi.GET

export const POST = OutstaticApi.POST

Configure The Outstatic CMS Dashboard Router

Configure the Outstatic CMS router to open login, dashboard, editor, etc.

To configure the page router, you need to paste the following code into the /app/outstatic/[[...ost]]/page.tsx file.

// app/outstatic/[[...ost]].tsx

import 'outstatic/outstatic.css'
import { Outstatic } from 'outstatic'
import { OstClient } from 'outstatic/client'

export default async function Page({ params }: { params: { ost: string[] } }) {
  const ostData = await Outstatic()
  return <OstClient ostData={ostData} params={params} />
}

Environment Variable

The last is to add or configure some additional environmental variables. The first time you visit localhost:3000/outstatic URL, you see the following error page.

We need some Environment variables to add to your .env.local file to fix this error. You require a GitHub repository where you can store data. Make sure to create a GitHub repository if you have already used it.

# .env.local

OST_GITHUB_ID=c04****************e45 # YOUR_GITHUB_OAUTH_ID
OST_GITHUB_SECRET="20by**************************4035" # YOUR_GITHUB_OAUTH_SECRET

# random string min 32 chars
OST_TOKEN_SECRET=LooFw9k***********************Make7Z8 # A_32CHAR_RANDOM_STRING_FOR_YOUR_TOKEN_SECRET

OST_REPO_SLUG="outstatic-demo" # THE_REPOSITORY_SLUG
# If empty AND on Vercel, your OST_REPO_SLUG defaults to VERCEL_GIT_REPO_SLUG

# OPTIONAL Environment variables

# If empty this will default to main
OST_REPO_BRANCH=master

# For more information visit: https://outstatic.com/docs/environment-variables

OST_TOKEN_SECRET: you generate the random string using this website.
OST_REPO_SLUG: add your github repository slug, where you store data.
OST_REPO_BRANCH: The default is the main branch, even if you can change it to the master branch.

For the Github environment OST_GITHUB_ID and OST_GITHUB_SECRET variables, follow these steps.

Go to your GitHub dashboard > settings > applications > click on OAuth Apps > click new OAuth Apps and then fill out the registration form.

Callback URL: production.com/api/outstatic/callback or http://localhost:3000/api/outstatic/callback
Homepage URL: Your.com or http://localhost:3000

When your form fills in the information. Then copy OST_GITHUB_ID and OST_GITHUB_SECRET ID paste into .env.local file.

FAQ

How to move x tool to Outstatic CMS?

If you already have some content in the form of a markdown file. You can easily move on to Outstatic CMS.

Copy all markdown posts and paste collection directories inside theoutstatic/content folder.

Then, the next step is to rebuild metadata.

Rebuild Metadata in Outstatic CMS — Rebuild Metadata

Is Outstatic CMS production ready?

Yes, Outstatic CMS is production-ready; you can use it right now without any difficulty.

Outstatic CMS directly stores data on the github repository.

Conclusion

I have used various static CMSs in my life. Outstatic CMS gives me more freedom than other CMSs, like Static CMS.

The best part is the Editor and dashboard UI, which I like; everybody uses it without a problem.

Combining the Front Matter Headless CMS VS Code plugin and Outstatic CMS is a great choice. You can build small or large personal and documentation websites with both tools.

You can share and follow me on Twitter and LinkedIn. I write tons of articles related to frontend development and Linux.

If you are interested in those topics, follow me on Medium, officialrajdeepsingh.dev, join the Linux and frontend web publication, and sign up for my free newsletter.