Quick Start Guide

Get your blog up and running with BlogNow in under 5 minutes. Follow these simple steps to integrate BlogNow into your project.

What You'll Achieve

Set up your BlogNow account and get API credentials
Install and configure the BlogNow SDK
Fetch and display your first blog post

Create Your BlogNow Account

Go to blognow.tech/sign-up
Complete the registration process
Choose your plan (free trial available)
Create your first organization/workspace

Get Your API Key

Retrieve your public API key from the dashboard

Log in to your BlogNow dashboard
Navigate to Settings → API Keys
Create a new Public API Key
Configure allowed domains
Copy your Public API Key (safe for client-side use)
Store it in your environment variables

Environment Variables

# Next.js / Vite / CRA
NEXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here
VITE_BLOGNOW_API_KEY=your_api_key_here
REACT_APP_BLOGNOW_API_KEY=your_api_key_here

# Nuxt
NUXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here

# Astro
PUBLIC_BLOGNOW_API_KEY=your_api_key_here

Note: The public API key is safe for client-side use and is designed for this purpose. No private keys are needed for basic blog operations.

Install the BlogNow SDK

Add the SDK to your project using your package manager

# npm
npm install @blognow/sdk

# yarn
yarn add @blognow/sdk

# pnpm
pnpm add @blognow/sdk

Initialize the BlogNow Client

Set up the SDK client in your application

Create a file to initialize the BlogNow client (e.g., lib/blognow.ts):

import { BlogNowClient } from "@blognow/sdk";

let blogClient: BlogNowClient | null = null;

// Adjust based on your framework
const apiKey = process.env.NEXT_PUBLIC_BLOGNOW_API_KEY
  || import.meta.env.VITE_BLOGNOW_API_KEY;

export const createBlogNowClient = async () => {
  if (!blogClient) {
    if (!apiKey) {
      throw new Error("BlogNow API key not configured");
    }
    blogClient = new BlogNowClient({
      apiKey,
      baseUrl: "https://api.blognow.tech"
    });
  }
  return blogClient;
};

Fetch and Display Blog Posts

Use the SDK to fetch and display your blog content

Here's a simple example to fetch and display blog posts:

import { createBlogNowClient } from "./lib/blognow";

async function BlogList() {
  const client = await createBlogNowClient();

  // Fetch published posts
  const response = await client.posts.getPublishedPosts({
    page: 1,
    size: 10,
    sort_by: "published_at",
    sort_order: "desc"
  });

  return (
    <div>
      <h1>Our Blog</h1>
      {response.items.map((post) => (
        <article key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.excerpt}</p>
          <a href={`/blog/${post.slug}`}>Read more</a>
        </article>
      ))}
    </div>
  );
}

Next Steps

Framework Guides

Get framework-specific integration guides for Next.js, React, Vue, and more

View Integration Guides

Authentication Guide

Learn about API keys, security best practices, and authentication

Authentication Guide

Need Help?

Having trouble getting started? We're here to help!

Contact Support Community Discussions

# Next.js / Vite / CRA NEXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here VITE_BLOGNOW_API_KEY=your_api_key_here REACT_APP_BLOGNOW_API_KEY=your_api_key_here # Nuxt NUXT_PUBLIC_BLOGNOW_API_KEY=your_api_key_here # Astro PUBLIC_BLOGNOW_API_KEY=your_api_key_here

import { BlogNowClient } from "@blognow/sdk"; let blogClient: BlogNowClient | null = null; // Adjust based on your framework const apiKey = process.env.NEXT_PUBLIC_BLOGNOW_API_KEY || import.meta.env.VITE_BLOGNOW_API_KEY; export const createBlogNowClient = async () => { if (!blogClient) { if (!apiKey) { throw new Error("BlogNow API key not configured"); } blogClient = new BlogNowClient({ apiKey, baseUrl: "https://api.blognow.tech" }); } return blogClient; };

import { createBlogNowClient } from "./lib/blognow"; async function BlogList() { const client = await createBlogNowClient(); // Fetch published posts const response = await client.posts.getPublishedPosts({ page: 1, size: 10, sort_by: "published_at", sort_order: "desc" }); return ( <div> <h1>Our Blog</h1> {response.items.map((post) => ( <article key={post.id}> <h2>{post.title}</h2> <p>{post.excerpt}</p> <a href={`/blog/${post.slug}`}>Read more</a> </article> ))} </div> ); }