If you have a serious project, you certainly have a blog. If you use ghost as a platform to host your blog, I will show you in this article how to easily integrate your posts on your web page. You will also learn about the html template tag, the JavaScript methods cloneNode() and appendChild() and how they work together.

Template tag

Let's create our document. I will be working in only one html file and will write the JavaScript code in a <script> tag. I will also use Bootstrap to speed up styling.

First, we create a DOM element with id "blog-posts" that will hold the ghost posts in the future.

<div class="container">
  <div id="blog-posts" class="row">
  </div>
</div>

Then we need to create our template. The template tag lets you to add HTML code to the page without rendering it. Its content is therefore hidden. You can later display it in the page using JavaScript. Let's create a template that represents a post. We want to display the post's title, excerpt, image and link on the page. 

<template>
      <div class="col-md-4">
        <div class="card">
            <!--Post Image-->
          <img src="" class="card-img-top" alt="">
          <div class="card-body">
            <h5 class="card-title"><!--Post Title--></h5>
            <p class="card-text"><!--Post Description--></p>
              <!--Post Link-->
            <a href="" class="btn btn-primary">Read more</a>
          </div>
        </div>
      </div>
    </template>

Ghost Content API Library

To fetch data from your ghost blog, you need to use the content API. Ghost provides a JavaScript library for accessing this API. To authenticate each request, we need to retrieve a token from the admin section of your ghost blog. Go to the admin panel and in the Settings tab, choose Integrations then Add custom integration.

Here you will see your authentication keys: Content API Key, Admin API Key and API URL.

Let's code

To install the library to access the content API I will be using the standalone UMD build as I will be working in my html file.

<script src="https://unpkg.com/@tryghost/content-api@1.2.6/umd/content-api.min.js"></script>

You can also install it with yarn or npm:

yarn add @tryghost/content-api
npm install @tryghost/content-api

First of all, we need to get our posts. For this in our js file or in script tag we need to create a new instance of Ghost Content API:

const api = new GhostContentAPI({
      url: 'https://your-api-url.com',
      key: 'your_content_api_key',
      version: 'v2'
    });

Don't forget to change the values accordingly.

Then we browse our posts and manipulate the content.

api.posts
    .browse({limit: 6, include: 'tags'})
    .then((posts) => {
        //code that inserts the blog posts to the page 
    })
    .catch((err) => {
        console.error(err);
    });

For every post we need to get the title, preview image and excerpt and put it at the right place in our template and finally append it to our page.

  1. We need to find our template tag in the DOM;
  2. Take its content and clone it to be able to modify a copy of the node and not to reference the node itself;
  3. Place our data in the right place in the template's copy;
  4. Append the template's copy to our page.

Let's do it.

api.posts
    .browse({limit: 6, include: 'tags'})
    .then((posts) => {
       var temp = document.getElementsByTagName("template")[0]; // reference of template tag in DOM;
       posts.forEach((post) => {
            var card = temp.content.cloneNode(true); // copy of template's content  
            var image = card.querySelector(".card-img-top");
            var title = card.querySelector(".card-title");
            var subtitle = card.querySelector(".card-text");
            var button = card.querySelector(".btn-primary")
            button.href=post.url;
            image.alt=post.title;
            image.src = post.feature_image;
            subtitle.textContent = post.custom_excerpt;
            title.textContent = post.title;
            var cardContainer = document.getElementById("blog-posts"); // place on the page where we want to append our template
            cardContainer.appendChild (card); // append the template's copy to the page 
       });

})

Voilà! It should work. Now you can integrate your blog's articles on your landing page.

Why do we need to use cloneNode(true)?

Why do we need to create a copy of the template's content and not just modify the content directly? It will work with the first post, however it won't work for the next ones. The method .appendChild() works like CUT/paste and not like COPY/paste. It means that after appending the template's content the first time, the template's content becomes empty as it was cut and pasted in the element with id "blog-posts". So for second post when we will try to get template's content it will be empty.

Here's the Blog Section I created for our personal web-page.

I hope this article was helpful. If so don't forget to subscribe to get fresh tips on coding and freelance life.