Hashnode & Astro
هذا المحتوى لا يتوفر بلغتك بعد.
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.
Generating pages
Section titled Generating pages-
Create the page
src/pages/post/[slug].astro
to dynamically generate a page for each post.Directorysrc/
- …
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
Directorypost/
- [slug].astro
- astro.config.mjs
- package.json
-
Import and use
getAllPosts()
andgetPost()
to fetch the data from Hashnode and generate individual page routes for each post. -
Create the template for each page using the properties of each
post
object. The example below shows the post title and reading time, then the full post content:<Fragment />
is a built-in Astro component which allows you to avoid an unnecessary wrapper element. This can be especially useful when fetching HTML from a CMS (e.g. Hashnode or WordPress).
Publishing your site
Section titled Publishing your siteTo deploy your site visit our deployment guide and follow the instructions for your preferred hosting provider.
Community Resources
Section titled Community Resourcesastro-hashnode
on GitHub