Nextjs(Vercel에서) + Ghost(렌더링에서)로 내 JAMstack 블로그 구축
4076 단어 ghostjavascriptjamstacknextjs
가장 먼저 할 일은 Up-To-Date Tech를 사용하여 학습 블로그를 설정하는 것입니다. (내가 만든 마지막 블로그는 10년 전 워드프레스였습니다 :) ) 나에게 이 미니 프로젝트는 코딩에 너무 깊이 들어가지 않으면서 다시 손을 더럽히고 실행 가능한 것을 설정하는 것을 의미합니다.
Jamstack은 웹을 위한 새로운 표준 아키텍처입니다. Git 워크플로 및 최신 빌드 도구를 사용하여 사전 렌더링된 콘텐츠가 CDN에 제공되고 API 및 서버리스 기능을 통해 동적으로 만들어집니다. 스택의 기술에는 JavaScript 프레임워크, 정적 사이트 생성기, 헤드리스 CMS 및 CDN이 포함됩니다.
[프런트엔드] Vercel의 NextJS
요즘 Vercel 얘기를 많이 들어서 제일 먼저 카운트에 들어갔어요. Vercel 대시보드에서 1순위는 Nextjs인데, Reactjs를 배운 적은 없지만 그래도 선택하기로 했어요.
내 Github 계정으로 승인을 받은 후 Vercel은 Nextjs 템플릿을 내 새 리포지토리에 복제하고 Vercel 서버에 배포했습니다. 이제 방문자가 내 사이트를 직접 볼 수 있습니다.
이전 수동 방식과 비교
Vercel은 클릭 한 번으로 압축합니다. 매우 깔끔합니다!
[백엔드] 고스트 온 렌더
이제 백엔드를 위해 바로 사용할 수 있는 CMS가 필요합니다. Ghost는 오픈 소스, 자체 호스팅 가능, 헤드리스 CMS입니다.
고스트 서비스를 직접 이용하면 가격도 괜찮지만 좀 더 융통성을 갖고 더 많은 제품을 가지고 놀고 싶어요.
Render에는 무료로 시작할 계획이 있습니다.
또한 렌더에는 단계별 고스트 배포에 대한 세부 정보 페이지가 있습니다https://render.com/docs/deploy-ghost.
절반 완료! 이제 작동하는 CMS가 있고 API로 콘텐츠를 가져와서 Nextjs 페이지에 표시할 것입니다.
Ghost 설정에서 하나의 새 통합을 추가하고 API URL 및 Content API 키를 복사하십시오.
환경 변수로 Vercel 설정에 붙여넣습니다.
Nextjs 프로젝트에 API를 추가합니다.
import GhostContentAPI from "@tryghost/content-api";
// Create API instance with site credentials
const api = new GhostContentAPI({
url: process.env.GHOST_URL,
key: process.env.GHOST_API_KEY,
version: "v4",});
// Grab all posts from Ghost
export async function getPosts() {
return await api.posts
.browse({
limit: "all",
})
.catch((err) => {
console.error(err);
});}
만세! 데이터를 성공적으로 가져올 수 있습니다.
스타일을 코딩하는 동안(tailwind 사용) 내 유령 계정이 약 30분마다 쫓겨나고 콘텐츠 API 키를 다시 생성해야 한다는 것을 알았습니다.
동료의 도움으로 *무료 계정 CPU가 공유되기 때문이라는 것을 깨달았습니다.
https://render.com/docs/free#free-web-services에 따르면
"Free web services can be restarted at any time."
예, 업그레이드했습니다! 그리고 모든 것이 잘 작동합니다! 미션 완료!
여기에서 내 소스 코드를 찾을 수 있습니다https://github.com/adela-bytebase/nextjs-adela-fun-blog.
Reference
이 문제에 관하여(Nextjs(Vercel에서) + Ghost(렌더링에서)로 내 JAMstack 블로그 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/adela_bytebase/build-my-jamstack-blog-with-nextjs-on-vercel-ghost-on-render-47jh텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)