Skip to content

Instantly share code, notes, and snippets.

@atom-tr
Created October 23, 2024 11:49
Show Gist options
  • Save atom-tr/030a51554e7e6b22c06d22bf112db5fc to your computer and use it in GitHub Desktop.
Save atom-tr/030a51554e7e6b22c06d22bf112db5fc to your computer and use it in GitHub Desktop.
Export your Ghost blog content for use with Lunr.js

To export your Ghost blog content for use with Lunr.js, you'll need to:

  • Fetch the content from Ghost (using the Ghost Content API).
  • Format the data to be compatible with Lunr.js.
  • Index and use the content with Lunr.js on your static site.

Steps to Export Ghost Blog Content for Lunr.js

  1. Fetch Ghost Content via API Ghost offers a Content API that allows you to retrieve all your blog posts, pages, and other data. You can make an API request to get this data and then use it to create a search index.

First, get your Content API key:

Go to Ghost Admin → Settings → Integrations → Add custom integration and copy your Content API Key. Now, you can fetch posts with a simple API call. Here’s an example using Python to fetch the blog posts

import requests
import json
# Replace with your Ghost blog URL and Content API Key
GHOST_API_URL = 'http://your-ghost-blog.com/ghost/api/v3/content'
GHOST_CONTENT_API_KEY = 'YourGhostContentAPIKey'
# Function to fetch all posts from Ghost
def fetch_ghost_content(_type):
url = f'{GHOST_API_URL}/{_type}/?key={GHOST_CONTENT_API_KEY}&limit=all'
response = requests.get(url)
response.raise_for_status()
return response.json()[_type]
lunr_data = []
# Fetch all the posts from Ghost
for _type in ['posts', 'pages', 'tags']:
posts = fetch_ghost_content(_type)
# Format the data for Lunr.js
lunr_data += [
{
'id': post['id'],
'title': post['title'] if 'title' in post else post['name'],
'content': post['html'] if 'html' in post else post['description'], # Full HTML content of the post
'url': post['url'] # The URL of the post
}
for post in posts
]
# Save the data as a JSON file
with open('lunr_data.json', 'w', encoding='utf-8') as f:
json.dump(lunr_data, f, ensure_ascii=False, indent=4)
print("Ghost posts have been exported to 'lunr_data.json'")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search</title>
<link rel="stylesheet" href="https://unpkg.com/lunr/lunr.css">
<script src="https://unpkg.com/lunr/lunr.js"></script>
</head>
<body>
<!-- Search Input -->
<input type="text" id="search-input" placeholder="Search..." oninput="search()">
<!-- Search Results -->
<div id="results"></div>
<script>
let lunrIndex;
let lunrData;
// Fetch the JSON data for Lunr.js
fetch('/path/to/lunr_data.json')
.then(response => response.json())
.then(data => {
lunrData = data;
// Initialize Lunr.js index
lunrIndex = lunr(function () {
this.ref('id');
this.field('title');
this.field('content');
lunrData.forEach(function (doc) {
this.add(doc);
}, this);
});
});
// Function to perform the search
function search() {
const query = document.getElementById('search-input').value;
const results = lunrIndex.search(query);
// Display results
const resultsDiv = document.getElementById('results');
resultsDiv.innerHTML = '';
if (results.length > 0) {
results.forEach(function (result) {
const matchedPost = lunrData.find(post => post.id === result.ref);
const resultHTML = `
<div>
<h2><a href="${matchedPost.url}">${matchedPost.title}</a></h2>
<p>${matchedPost.content.substring(0, 200)}...</p>
</div>
`;
resultsDiv.innerHTML += resultHTML;
});
} else {
resultsDiv.innerHTML = '<p>No results found</p>';
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment