Here are a few common examples of using the Ghost Content API with a Hexo project.

The flexibility of the Ghost Content API allows you to generate posts, pages and any other pieces of content from a Ghost site and send it to a front-end built with the Node.js based static site generator, Hexo.

Below are a few examples of how various types of content can be sent to your Hexo front-end. All examples assume that the API has already been setup, see the Working with Hexo page for more information.

Generate pages

Pages require a slightly different approach to generating posts as they need to be placed at root level. Use the following code in conjunction with the JavaScript Ghost Content API:

const ghostPages = async () => {

  // Get all pages
  const data = await api.pages
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });

  data.forEach(page => {
    hexo.extend.generator.register(page.slug, function(locals) {
      return {
        path: `${page.slug}/index.html`,
        data: { title: page.title, content: page.html },
        layout: ["page", "index"]
      };
    });
  });
};

ghostPages();

Note the use of hexo.extend.generator.register, which is how scripts inside of a Hexo can generate files alongside the build process.

Generate author pages

Author pages can also be generated using the following method. This also uses the generator extension in Hexo that was used in the pages example above. To prevent URL collisions these author pages are being created under an /authors/ path.

const ghostAuthors = async () => {

  // Get all post authors
  const data = await api.authors
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });

  data.forEach(author => {
    hexo.extend.generator.register(author.slug, function(locals) {
      return {

        // Set an author path to prevent URL collisions
        path: `/author/${author.slug}/index.html`,
        data: {
          title: author.name,
          content: `<p>${author.bio}</p>`
        },
        layout: ["author", "index"]
      };
    });
  });
};

ghostAuthors();

Adding post meta

All the metadata that is exposed by the Ghost Content API is available to use inside of a Hexo site. That includes post meta like authors and tags.

In the example below the posts.browse() API options have been changed to include tags and authors which will be attached to each post object when it is returned. More information on the include API option can be found in our Content API Endpoints documentation.

const data = await api.posts
  .browse({
    // Ensure tags and authors is included in post objects
    include: "tags,authors",
    limit: "all"
  })
  .catch(err => {
    console.error(err);
  });

  data.forEach(post => {
  const postData = {
    title: post.title,
    slug: post.slug,
    path: post.slug,
    date: post.published_at,
    content: post.html,

    // Set author meta
    author: {
      name: post.primary_author.name,
      slug: `/author/${post.primary_author.slug}`,
    },

    // Set tag meta
    tags: post.tags
      .map(tag => {
        return tag.name;
      })
      .join(", ")
  };
  hexo.post.create(postData, true);
});

The author.slug includes /authors/ in the string so it correlates with the previous author pages example. Note as well that some manipulation has been performed on tags so it matches the expected format for Hexo (comma separated tags).

Further reading

We highly recommend reading into the official Hexo documentation for more info on how pages are generated. There's also a handy Troubleshooting page for any common issues encountered.

Additionally there's plenty of themes for Hexo that might be a good place to start when creating a custom Hexo site.