Hashnode & Astro
Questi contenuti non sono ancora disponibili nella tua lingua.
Hashnode is a hosted CMS that allows you to create a blog or publication.
Integrating with Astro
Section titled Integrating with AstroThe 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 PrerequisitesTo get started you will need to have the following:
-
An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
-
A Hashnode site - You can create free personal site by visiting Hashnode.
Installing dependencies
Section titled Installing dependenciesInstall 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 HashnodeThis 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- A Hashnode Blog
- 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-
To fetch your site’s data with the
graphql-request
package, make asrc/lib
directory and create two new filesclient.ts
&schema.ts
:Directorysrc/
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
- astro.config.mjs
- package.json
-
Initialize an API instance with the GraphQLClient using the URL from your Hashnode Website.
-
Configure
schema.ts
to define the shape of the data returned from the Hashnode API.
Displaying a list of posts
Section titled Displaying a list of postsFetching via getAllPosts()
returns an array of objects containing the properties for each post such as:
title
- the title of the postbrief
- the HTML rendering of the content of the postcoverImage.url
- the source URL of the featured image of the postslug
- the slug of the post
Use the posts
array returned from the fetch to display a list of blog posts on the page.