How to Integrate Lovable with Ghost

Ghost uses integration-specific API keys rather than user account keys. Creating a custom integration in Ghost Admin generates a pair of keys — a Content API key (read-only, public content) and an Admin API key (read-write, requires JWT signing). To get a Content API key: Log in to your Ghost Admin panel (at yourdomain.com/ghost). Go to Settings (gear icon) → Integrations. Scroll to the bottom of the Integrations page and click 'Add custom integration'. Give it a name like 'Lovable App'. Ghost creates the integration immediately and displays: 1. Content API Key — a hex string like 9fcfdb476936c3e8d74b0f6b8 (what you need for reading content) 2. Admin API Key — for writing content (not needed for a read-only integration) 3. API URL — your Ghost site URL in the format needed for API calls In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Add: - GHOST_URL — your Ghost site URL (e.g., https://yourblog.ghost.io) without trailing slash - GHOST_CONTENT_API_KEY — your Content API key from the integration Ghost Content API keys are safe to use in server-side code and do not provide write access. However, they must still go in Cloud → Secrets (not frontend code) because Lovable routes all external API calls through Edge Functions to prevent CORS issues.

Ghost's Content API is simpler than most CMS APIs to call — authentication is just a key query parameter appended to every request. The Edge Function builds the Ghost API URL by combining the GHOST_URL, the content type path, and the API key, then returns the response. Ghost Content API endpoints: - Posts: /ghost/api/content/posts/ - Pages: /ghost/api/content/pages/ - Tags: /ghost/api/content/tags/ - Authors: /ghost/api/content/authors/ - Tiers: /ghost/api/content/tiers/ - Single by slug: /ghost/api/content/posts/slug/{slug}/ Key query parameters: - key={api_key} — required for all requests - include=authors,tags — embed related resources in response - filter=primary_tag:{slug} — filter by tag - filter=authors.slug:{slug} — filter by author - limit={n} — max items (default 15, max 100) - page={n} — pagination page number - fields=id,title,slug,excerpt — select only specific fields - formats=html,plaintext — include HTML or plaintext content fields The Edge Function below accepts a 'path' parameter (just the query string parameters, without the base URL and key) and constructs the full authenticated URL, keeping the API key server-side.

1// supabase/functions/ghost-proxy/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { resource, slug, params = {} } = await req.json() as {
12      resource: string; slug?: string; params?: Record<string, string>;
13    };
14
15    const allowedResources = ['posts', 'pages', 'tags', 'authors', 'tiers'];
16    if (!allowedResources.includes(resource)) {
17      return new Response(JSON.stringify({ error: `resource must be one of: ${allowedResources.join(', ')}` }), {
18        status: 400,
19        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
20      });
21    }
22
23    const ghostUrl = Deno.env.get('GHOST_URL')!.replace(/\/$/, '');
24    const apiKey = Deno.env.get('GHOST_CONTENT_API_KEY')!;
25
26    let apiPath = `/ghost/api/content/${resource}/`;
27    if (slug) apiPath += `slug/${encodeURIComponent(slug)}/`;
28
29    const queryParams = new URLSearchParams({ ...params, key: apiKey });
30    const url = `${ghostUrl}${apiPath}?${queryParams.toString()}`;
31
32    const ghostResponse = await fetch(url);
33
34    if (!ghostResponse.ok) {
35      console.error(`Ghost API error ${ghostResponse.status} for ${resource}${slug ? '/' + slug : ''}`);
36      return new Response(JSON.stringify({ error: `Ghost API returned ${ghostResponse.status}` }), {
37        status: ghostResponse.status,
38        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
39      });
40    }
41
42    const result = await ghostResponse.json();
43    return new Response(JSON.stringify({
44      data: result[resource] ?? result,
45      meta: result.meta ?? null,
46    }), {
47      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48    });
49  } catch (error) {
50    console.error('ghost-proxy error:', error);
51    return new Response(JSON.stringify({ error: String(error) }), {
52      status: 500,
53      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
54    });
55  }
56});

With the Edge Function deployed, build the Ghost-powered blog frontend in Lovable. Ghost post objects have a clean, well-documented structure: - post.title — post title string - post.slug — URL-friendly slug - post.excerpt — short auto-generated preview text - post.feature_image — URL of the featured image (can be null) - post.published_at — ISO 8601 publish date string - post.reading_time — estimated reading time in minutes (integer) - post.html — full rendered HTML content (requires formats=html param) - post.primary_author — first author object (with name, profile_image, slug) - post.primary_tag — first tag object (with name, slug, accent_color) - post.tags — array of all tag objects - post.visibility — 'public', 'members', or 'paid' For the listing page, use title, excerpt, feature_image, primary_author, primary_tag, reading_time, and published_at. For the detail page, additionally include html (rendered HTML content) and the full tags array. Ghost's HTML content is generated from its Lexical editor and is clean, semantic HTML. Use dangerouslySetInnerHTML with DOMPurify sanitization to render it. Ghost also provides post.custom_excerpt (editor-written excerpt) and post.plaintext for non-HTML contexts. Ask Lovable to generate the blog listing and single post components with these Ghost-specific field names: