Using Hashnode as a Source for Gatsby

Migrating the Blog Posts

Gatsby plugins

GraphQL queries

Blog Feed

query pageQuery($skip: Int!, $limit: Int!) {
site {
siteMetadata {
title
description
}
}
allHashNodePost(
sort: { fields: [dateAdded], order: DESC }
limit: $limit
skip: $skip
) {
edges {
node {
brief
slug
title
coverImage {
childImageSharp {
gatsbyImageData(
width: 920
height: 483
layout: CONSTRAINED
transformOptions: {cropFocus: CENTER}
)
}
}
}
}
}
}

Blog Post

query BlogPostBySlug($slug: String!) {
site {
siteMetadata {
title
author
siteUrl
}
}
hashNodePost(slug: { eq: $slug }) {
_id
brief
childMarkdownRemark {
htmlAst
}
slug
title
dateAdded
coverImage {
publicURL
childImageSharp {
gatsbyImageData(
width: 920
height: 483
layout: CONSTRAINED
transformOptions: {cropFocus: CENTER}
)
}
}
}
}

Automation with GitHub actions

Step 1: Add workflow_dispatch to your GitHub action

name: Deploy Blogon:
workflow_dispatch:
push:
branches:
- main

Step 2: Create a personal access token

Step 3: Add the key as a secret to your backup repository

Step 4: Add a workflow file

---
name: Trigger Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- run: |
curl -X POST \
-H "Authorization: Bearer ${{secrets.ACCESS_TOKEN}}" \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/repos/GITHUB_USERNAME/WEBSITE_REPO/actions/workflows/workflow.yml/dispatches \
-d '{"ref": "main"}'

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store