Hashnode를 Gatsby의 소스로 사용
정적 사이트 생성 여정에서 저는 Gatsby.js를 발견하고 이를 중심으로 웹사이트를 완전히 재설계했습니다. 그러나 Markdown에서 로컬로 게시물을 작성하는 것은 고유한 단점이 있으며 Hashnode에서 블로그를 작성하여 얻을 수 있는 검색 가능성이 부족합니다.
그래서 내 블로그 게시물을 Hashnode로 옮기기로 결정했지만 여전히 내 게시물이 내 main blog에 표시되기를 원했습니다.
블로그 게시물 마이그레이션
The first step was to import all my blog posts to Hashnode. There are a few methods you can use to import your blog posts.
어쨌든 dev.to에 모든 게시물을 다시 게시할 때 Dev.to 임포터를 사용하기로 결정했습니다. 아쉽게도 대량 가져오기가 작동하지 않아 한 번에 하나씩 게시물을 가져와야 했습니다.
각 게시물에 대해 다음을 수동으로 설정해야 하므로 편리했습니다.
내 게시물을 모두 가져오면 내 Gatsby 웹사이트를 편집하여 게시물을 끌어내릴 차례입니다.
개츠비 플러그인
If you do a search for gatsby-source-hashnode you will find a couple of plugins on the Gatsby website.
첫 번째(gatsby-source-hashnode)를 사용하기로 결정했습니다. 다운로드 수가 훨씬 더 많고 여전히 유지 관리되는 것 같기 때문입니다.
그러나 플러그인을 테스트할 때 플러그인이 내 Hashnode 블로그에서 처음 6개의 게시물만 가져오고 있다는 것을 금방 알아차렸습니다. 이는 플러그인에서 아직 선택하지 않은 API의 최근 변경 사항일 수 있습니다.
운 좋게도 플러그인은 오픈 소스이므로 플러그인 소유자가 검토할 수 있도록 저raised a PR가 있습니다.
그동안 수정된 코드를
plugins/gatsby-source-hashnode라는 gatsby 저장소의 폴더에 복사했습니다. 그런 다음 문서에 설명된 대로 플러그인을 사용했습니다.GraphQL 쿼리
I am using GraphQL queries in a few places to pull down posts:
- Blog Feed
- Blog Post
- Latest Posts
- RSS Feed
For reference, this is what a couple of my queries look like for pulling from Hashnode.
블로그 피드
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}
)
}
}
}
}
}
}
블로그 게시물
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}
)
}
}
}
}
I am not yet pulling down tags or reading time from the API. That is something I will try out later.
GitHub 작업을 통한 자동화
I already have GitHub actions set up for my website so that any new commits to themain branch trigger a website build and push to S3. I wrote a post 그것에 대해 알고 싶다면 방법을 알아보십시오.그러나 이제 해당 리포지토리에 기사를 커밋하지 않으므로 Hashnode에 새 게시물을 게시할 때 자동으로 빌드를 트리거하는 방법이 필요했습니다.
운 좋게도 Hashnode에는 블로그 게시물을 트리거 포인트로 사용할 수 있는 GitHub에 백업할 수 있는 옵션이 있습니다.
1단계: GitHub 작업에 workflow_dispatch 추가
To be able to remotely trigger a build on GitHub you need to add workflow_dispatch to the on: section of your workflow file.
This is what the top of mine looks like:
name: Deploy Blog
on:
workflow_dispatch:
push:
branches:
- main
2단계: 개인 액세스 토큰 생성
Next, we need to create a personal access token that we will use as the API Key for triggering the remote build.
You can do this in GitHub under Settings > Developer Settings > Personal Access Tokens다음 권한으로 액세스 토큰을 설정했습니다.
만료 날짜도 설정하고 만료되기 전에 새 토큰을 생성하도록 미리 알림을 설정해야 합니다.
다시 기회를 얻을 수 없으므로 액세스 키를 복사했는지 확인하십시오!
3단계: 키를 백업 리포지토리에 비밀로 추가
To be able to use this access key we need to add it as a secret to the repository where Hashnode is backing up your posts.
On the backup repository go to Settings > Secrets and add a new repository secret called ACCESS_TOKEN and put in the key from the previous step.
4단계: 워크플로 파일 추가
Next, we need to add a workflow that gets triggered every time a commit is added to this repository. In our case, this will be whenever we publish a post on Hashnode (Note: Drafts aren’t saved in GitHub).
Add the following file to your backup repository .github/workflows/workflow.yml
--------
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"}'
Make sure you change GITHUB_USERNAME to match your GitHub username, WEBSITE_REPO to the repository with your Gatsby.js website and workflow.yml to match the name of your deploy workflow file.
To test, try updating one of your posts in Hashnode and you see this workflow get triggered then followed by your website workflow.
Reference
이 문제에 관하여(Hashnode를 Gatsby의 소스로 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/alexhyettdev/using-hashnode-as-a-source-for-gatsby-hk8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
