​

Blog System with Sanity CMS

​

Architecture Overview

1. Content Management: Sanity Studio provides a customizable editing interface for content creators
2. Content Storage: Content is stored in Sanity’s cloud database
3. Content Delivery: Content is fetched via Sanity’s CDN and API and rendered in the Next.js frontend

​

Sanity Configuration

// sanity/sanity.config.ts
import { defineConfig } from 'sanity';
import { deskTool } from 'sanity/desk';
import { visionTool } from '@sanity/vision';
import { schemaTypes } from './schemaTypes';

export default defineConfig({
  name: 'only-automator-blog',
  title: 'OnlyAutomator Blog',
  projectId: '####',
  dataset: 'production',
  plugins: [deskTool(), visionTool()],
  schema: {
    types: schemaTypes
  }
});

• Project name and title
• Sanity project ID and dataset
• Plugins for the Sanity Studio interface
• Schema types definition import

​

Content Schema

​

Post Schema

// Post schema defines the structure of blog articles
// Located at: sanity/schemaTypes/post.ts
{
  name: 'post',
  title: 'Post',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'slug', type: 'slug' },
    { name: 'author', type: 'reference', to: { type: 'author' } },
    { name: 'mainImage', type: 'image' },
    { name: 'categories', type: 'array', of: [{ type: 'reference', to: { type: 'category' } }] },
    { name: 'publishedAt', type: 'datetime' },
    { name: 'excerpt', type: 'text' },
    { name: 'body', type: 'array', of: [{ type: 'block' }, { type: 'image' }] }
  ]
}

​

Author Schema

// Author schema defines the structure for blog post authors
// Located at: sanity/schemaTypes/author.ts
{
  name: 'author',
  title: 'Author',
  type: 'document',
  fields: [
    { name: 'name', type: 'string' },
    { name: 'slug', type: 'slug' },
    { name: 'image', type: 'image' },
    { name: 'bio', type: 'array', of: [{ type: 'block' }] }
  ]
}

​

Category Schema

// Category schema for blog post categorization
// Located at: sanity/schemaTypes/category.ts
{
  name: 'category',
  title: 'Category',
  type: 'document',
  fields: [
    { name: 'title', type: 'string' },
    { name: 'description', type: 'text' }
  ]
}

​

Schema Registration

import post from './post';
import author from './author';
import category from './category';

export const schemaTypes = [post, author, category];

​

Integration with Next.js

​

Sanity Client

// Configuration for the Sanity client
const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID || '####';
const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET || 'production';
const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2023-10-01';

export const client = createClient({
  projectId,
  dataset,
  apiVersion,
  useCdn: false,
  token: process.env.SANITY_API_TOKEN
});

​

Data Types

export type BlogPost = {
  _id: string;
  _createdAt: string;
  title: string;
  slug: { current: string };
  excerpt?: string;
  mainImage?: SanityImageSource;
  publishedAt: string;
  categories: string[];
  author: string;
};

export type BlogPostDetail = BlogPost & {
  body: any;
  authorImage?: SanityImageSource;
};

export type Category = {
  _id: string;
  title: string;
  description?: string;
};

​

Data Fetching Functions

// Get all blog posts (for listing page)
export async function getBlogPosts(): Promise<BlogPost[]> {
  const query = `*[_type == "post"] | order(publishedAt desc) {
    _id, _createdAt, title, slug, excerpt, mainImage, publishedAt,
    "categories": categories[]->title, "author": author->name
  }`;
  // Implementation details...
}

// Get a single blog post by slug (for detail page)
export async function getBlogPost(slug: string): Promise<BlogPostDetail | null> {
  const query = `*[_type == "post" && slug.current == $slug][0] {
    _id, _createdAt, title, slug, excerpt, body, mainImage, publishedAt,
    "categories": categories[]->title, "author": author->name, "authorImage": author->image
  }`;
  // Implementation details...
}

// Get all categories
export async function getCategories(): Promise<Category[]> {
  const query = `*[_type == "category"] {
    _id, title, description
  }`;
  // Implementation details...
}

​

Next.js Routes

1. Blog Listing: /blog - Displays all blog posts
2. Blog Detail: /blog/[slug] - Displays a single blog post
3. Sanity Studio: /studio/[[...tool]] - The admin interface for content management

​

Image Handling

​

Using Sanity Studio

​

Accessing Sanity Studio

1. Local Development:
   • Run your Next.js application locally using npm run dev or yarn dev
   • Navigate to http://localhost:3000/studio in your browser
2. Production Environment:
   • Access Sanity Studio at https://onlyautomator.com/studio
   • You will need to log in with your Sanity credentials

​

Authentication

1. Enter your Sanity credentials (email/username and password)
2. If you don’t have credentials, contact the project administrator to receive an invitation
3. Sanity Studio uses secure OAuth authentication and ensures content creators have appropriate permissions

​

Studio Interface Overview

1. Desk Tool: The main content management area where you’ll create and edit content
2. Navigation Bar: Left sidebar showing different content types (Post, Author, Category)
3. Document List: Center area showing a list of existing documents of the selected type
4. Document Editor: Right area for editing the selected document

​

Managing Blog Content

​

Creating a New Blog Post

1. Start a New Post:
   • In Sanity Studio, select “Post” from the left navigation bar
   • Click the “Create new document” button (+ icon) in the top right of the document list
2. Add Basic Information:
   • Title: Enter the post title
   • Slug: The URL-friendly version of the title will be auto-generated, but you can edit it if needed
   • Author: Select an existing author from the dropdown (you must create an author first if none exist)
3. Add Content:
   • Main Image: Upload a featured image for the post
   • Categories: Select one or more categories for the post
   • Published At: Set the publication date and time
   • Excerpt: Write a short summary of the post (used for SEO and previews)
4. Write the Post Body:
   • Use the rich text editor to create the post content
   • Format text using the toolbar (headings, bold, italic, lists, etc.)
   • Add images by clicking the ”+” button in the editor
   • Use the “Style” dropdown to apply different text styles
5. Preview your Post:
   • Click the “Preview” button in the top right to see how the post will look on the website
   • This opens a new tab with a live preview of your content
6. Publish the Post:
   • Click the “Publish” button in the bottom right when you’re ready to make the post live
   • You can also save drafts without publishing by clicking “Save draft”

​

Editing an Existing Blog Post

1. Find the Post:
   • Select “Post” from the left navigation
   • Browse the list or use the search bar to find the post you want to edit
2. Make Changes:
   • Click on the post to open it in the editor
   • Make your changes to any field
   • Use the history panel (clock icon) to view previous versions if needed
3. Save Changes:
   • Click “Publish” to update the live post
   • Or “Save draft” to save changes without publishing

​

Creating and Managing Authors

1. Access Authors:
   • Select “Author” from the left navigation
2. Create a New Author:
   • Click the ”+” button to create a new author
   • Fill in the required fields:
     • Name: The author’s full name
     • Slug: Auto-generated from the name
     • Image: Upload an author photo
     • Bio: Write a short biography using the rich text editor
3. Edit Authors:
   • Select an existing author from the list
   • Make changes and publish to update

​

Managing Categories

1. Access Categories:
   • Select “Category” from the left navigation
2. Create a New Category:
   • Click the ”+” button
   • Enter the category title and optional description
   • Publish to create the category
3. Edit Categories:
   • Select an existing category
   • Make changes and publish to update

​

Advanced Features

​

Scheduling Posts

1. To schedule a post for future publication:
   • Create or edit a post as normal
   • Set the “Published At” date to a future date and time
   • Click “Publish”
   • The post will only appear on the website after the scheduled date/time

​

Managing Drafts

1. View Drafts:
   • In each content type section, you can filter to show only drafts
   • Drafts are indicated with a special badge
2. Working with Drafts:
   • You can continue editing drafts until they’re ready
   • Drafts are not visible to visitors on the website

​

Collaborative Editing

1. Sanity Studio supports real-time collaborative editing:
   • Multiple editors can work on the same document simultaneously
   • You’ll see other editors’ cursors and changes in real-time
   • The system handles conflict resolution automatically

​

Best Practices for Blog Content

1. Consistent Formatting:
   • Use headings (H2, H3) to organize content
   • Keep paragraphs concise for readability
   • Use lists where appropriate
2. Images:
   • Use high-quality images (recommended size: 1200x630px for main images)
   • Always include alt text for accessibility
   • Compress images before uploading for better performance
3. SEO Optimization:
   • Write descriptive, keyword-rich titles
   • Create detailed excerpts that summarize the content
   • Use categories effectively to organize content
4. Content Planning:
   • Use drafts to prepare content in advance
   • Schedule posts strategically for consistent publication
   • Maintain a content calendar outside of Sanity

​

Environment Variables

NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
NEXT_PUBLIC_SANITY_API_VERSION="2023-10-01"
SANITY_API_TOKEN="your-api-token" # For write operations

​

Working with the Blog System

​

Creating/Editing Content

1. Navigate to /studio and log in with Sanity credentials
2. Create or edit posts, authors, and categories
3. Use the rich text editor for post content
4. Preview changes before publishing

​

Fetching Content in Components

// Example: Fetching a blog post in a page component
import { getBlogPost } from '@/lib/sanity';

export default async function BlogPostPage({ params }) {
  const post = await getBlogPost(params.slug);
  
  if (!post) return <div>Post not found</div>;
  
  return (
    <article>
      <h1>{post.title}</h1>
      {/* Render other post content */}
    </article>
  );
}

​

Rendering Rich Text Content

// Use the @portabletext/react library to render rich text content
import { PortableText } from '@portabletext/react';

// In your component:
<PortableText value={post.body} components={myPortableTextComponents} />

​

Extending the Blog System

1. Add a new schema file in sanity/schemaTypes/
2. Register the schema in sanity/schemaTypes/index.ts
3. Update the appropriate TypeScript types in lib/sanity.ts
4. Add or modify data fetching functions as needed
5. Implement the UI components for displaying the new content