Hashnode & Astro
Hashnode는 블로그나 출판물을 만들 수 있는 호스팅 CMS입니다.
Astro와 통합
섹션 제목: Astro와 통합Hashnode Public API는 Hashnode와 상호 작용할 수 있는 GraphQL API입니다. 이 가이드에서는 Astro와 잘 작동하는 최소 GraphQL 클라이언트인 graphql-request
를 사용하여 Hashnode 데이터를 Astro 프로젝트로 가져옵니다.
전제조건
섹션 제목: 전제조건시작하려면 다음이 필요합니다.
-
Astro 프로젝트 - 아직 Astro 프로젝트가 없다면 설치 가이드를 참조하여 즉시 설치하고 실행할 수 있습니다.
-
Hashnode 사이트 - Hashnode에 접속하면 무료로 개인 사이트를 생성할 수 있습니다.
종속성 설치
섹션 제목: 종속성 설치선택한 패키지 관리자를 사용하여 graphql-request
패키지를 설치합니다.
Astro와 Hashnode로 블로그 만들기
섹션 제목: Astro와 Hashnode로 블로그 만들기이 가이드에서는 Astro와 잘 작동하는 최소 GraphQL 클라이언트인 graphql-request
를 사용하여 Hashnode 데이터를 Astro 프로젝트로 가져옵니다.
전제조건
섹션 제목: 전제조건- Hashnode 블로그
- graphql-request 패키지와 통합된 Astro 프로젝트
이 예시에서는 동적으로 생성된 개별 게시물 페이지에 대한 링크가 포함된 게시물을 나열하는 인덱스 페이지를 생성합니다.
데이터 가져오기
섹션 제목: 데이터 가져오기-
graphql-request
패키지를 사용하여 사이트의 데이터를 가져오려면src/lib
디렉터리를 생성하고 두 개의 새 파일client.ts
및schema.ts
를 생성합니다.Directorysrc/
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
- astro.config.mjs
- package.json
-
Hashnode 웹사이트의 URL을 사용하여 GraphQLClient로 API 인스턴스를 초기화합니다.
-
Hashnode API에서 반환된 데이터의 형태를 정의하려면
schema.ts
를 구성하세요.
게시물 목록 표시
섹션 제목: 게시물 목록 표시getAllPosts()
를 통해 가져오면 다음과 같은 각 게시물의 속성을 포함하는 객체 배열이 반환됩니다.
title
- 게시물의 제목brief
- 게시물 내용의 HTML 렌더링coverImage.url
- 게시물의 추천 이미지 소스 URLslug
- 게시물의 슬러그
가져오기에서 반환된 posts
배열을 사용하여 페이지에 블로그 게시물 목록을 표시합니다.
페이지 생성
섹션 제목: 페이지 생성-
각 게시물에 대해 동적으로 페이지를 생성하려면
src/pages/post/[slug].astro
페이지를 생성하세요.Directorysrc/
- …
Directorylib/
- client.ts
- schema.ts
Directorypages/
- index.astro
Directorypost/
- [slug].astro
- astro.config.mjs
- package.json
-
getAllPosts()
및getPost()
를 가져와 사용하여 Hashnode에서 데이터를 가져오고 각 게시물에 대한 개별 페이지 경로를 생성합니다. -
각
post
객체의 속성을 사용하여 각 페이지에 대한 템플릿을 만듭니다. 아래 예시는 게시물 제목과 읽기 시간, 그리고 전체 게시물 내용을 보여줍니다.<Fragment />
는 불필요한 래퍼 요소를 방지할 수 있는 Astro 내장 컴포넌트입니다. 이는 CMS (예: Hashnode 또는 WordPress)에서 HTML을 가져올 때 특히 유용할 수 있습니다.
사이트 게시
섹션 제목: 사이트 게시사이트를 배포하려면 배포 가이드를 방문하여 선호하는 호스팅 제공업체의 지침을 따르세요.
커뮤니티 자료
섹션 제목: 커뮤니티 자료astro-hashnode
- GitHub