Quick Start
Get your Fireship AI Blog up and running in under 5 minutes.
Installation
bash
npm install fireship-ai-blog remark remark-gfm remark-html unified lucide-react @tailwindcss/typographyEnvironment Setup
Add to your .env.local:
bash
NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY=fs_your_api_key_hereCreate Blog Page
Create app/blog/page.tsx:
tsx
'use client';
import { FireshipBlog } from 'fireship-ai-blog';
export default function BlogPage() {
return (
<div className="min-h-screen bg-gradient-to-br from-zinc-50 to-zinc-100 dark:from-zinc-900 dark:to-zinc-950">
<div className="container mx-auto px-4 py-12">
<FireshipBlog className="max-w-6xl mx-auto" />
</div>
</div>
);
}Create API Route
Create app/api/fireship-blog/[...path]/route.ts:
typescript
import { createFireshipProxyHandler } from 'fireship-ai-blog';
const base = createFireshipProxyHandler({
apiBase: 'https://fireship.ai/api/blog',
getApiKey: () => process.env.NEXT_PUBLIC_FIRESHIP_BLOG_PUBLISHABLE_KEY,
allowOrigin: 'http://localhost:3000',
domain: 'your-domain.com' // Your website domain for filtering
});
export async function GET(req: Request, ctx: { params: Promise<{ path?: string[] }> }) {
const resolved = ctx?.params ? await ctx.params : undefined;
return base.GET(req, { params: resolved });
}
export function OPTIONS() {
return base.OPTIONS();
}Domain Filtering: The domain parameter filters blog posts to only show content from campaigns matching your website domain. This ensures users only see relevant posts across multiple campaigns.
Update Tailwind Config
Update tailwind.config.js:
javascript
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/fireship-ai-blog/**/*.{js,ts,jsx,tsx}',
],
plugins: [
require('@tailwindcss/typography'),
],
}Start Development Server
bash
npm run devVisit http://localhost:3000/blog to see your blog!
What You Get
📝Blog post listing with beautiful cards
📖Individual post pages with full content
🎨Glass morphism design with dark/light mode
📱Responsive layout for all devices
🔗URL navigation with shareable links
⚡Fast loading with optimized performance
🔍SEO optimized structure
✨Rich markdown content rendering