Skip to content

Hashnode & Astro

Add content to your Astro project using Hashnode as a CMS

Hashnode is a hosted CMS that allows you to create a blog or publication.

Integrating with Astro

Section titled “Integrating with Astro”

The Hashnode Public API is a GraphQL API that allows you to interact with Hashnode. This guide uses graphql-request, a minimal GraphQL client that works well with Astro, to bring your Hashnode data into your Astro project.

Prerequisites

Section titled “Prerequisites”

To get started you will need to have the following:

  1. An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.

  2. A Hashnode site - You can create free personal site by visiting Hashnode.

Installing dependencies

Section titled “Installing dependencies”

Install the graphql-request package using the package manager of your choice:

Making a blog with Astro and Hashnode

Section titled “Making a blog with Astro and Hashnode”

This guide uses graphql-request, a minimal GraphQL client that works well with Astro, to bring your Hashnode data into your Astro project.

Prerequisites

Section titled “Prerequisites”
  1. A Hashnode Blog
  2. An Astro project integrated with the graphql-request package installed.

This example will create an index page that lists posts with links to dynamically-generated individual post pages.

Fetching Data

Section titled “Fetching Data”

Displaying a list of posts

Section titled “Displaying a list of posts”

Fetching via getAllPosts() returns an array of objects containing the properties for each post such as:

  • title - the title of the post
  • brief - the HTML rendering of the content of the post
  • coverImage.url - the source URL of the featured image of the post
  • slug - the slug of the post

Use the posts array returned from the fetch to display a list of blog posts on the page.

src/pages/index.astro
---
import { getAllPosts } from '../lib/client';


const data = await getAllPosts();
const allPosts = data.publication.posts.edges;


---


<html lang="en">
    <head>
        <title>Astro + Hashnode</title>
    </head>
    <body>


        {
            allPosts.map((post) => (
                <div>
                    <h2>{post.node.title}</h2>
                    <p>{post.node.brief}</p>
                    <img src={post.node.coverImage.url} alt={post.node.title} />
                    <a href={`/post/${post.node.slug}`}>Read more</a>
                </div>
            ))
        }
    </body>
</html>

Generating pages

Section titled “Generating pages”

Publishing your site

Section titled “Publishing your site”

To deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.

Community Resources

Section titled “Community Resources”
← Docs Vault