소개

이번에는 Gatsby.js를 사용하여 멋지고 멋진 포트폴리오를 만드는 방법을 공유하고 싶습니다.

여기 가 완성형의 예입니다.

원래 Gatsby란?

Gatsby는 React를 기반으로 한 무료 오픈 소스 프레임 워크이며 개발자가 매우 빠른 웹 사이트 및 앱을 구축하는 데 도움이됩니다.

* 공식 문서(영어)

절차

1 . 먼저 Gatsby에서 개발하는 데 필요한 다음 도구를 정렬합시다.

Git

Node.js (npm을 사용할 수 있다면 들어있을 것)

Gatsby CLI

설치 방법을 모르는 경우 이 기사을 참조하십시오.

2 . 여기 Gatsby 공식 사이트에서 원하는 템플릿을 찾으십시오.

이번에는이 gatsby-starter-portfolio-cara이라는 템플릿을 사용합니다.



3. 작업 디렉터리로 cd 開発をするディレクトリ名 로 이동한 다음 gatsby new
방금전의 템플릿 상세 페이지로 아래로 스크롤 받으면 사용법이 영어로 실려 있습니다.

거기에, gatsby new 의 커멘드가 실려 있으므로, 그것을 작업하는 디렉토리에 이동해 실행합니다.

cd ディレクトリ名
gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara

그런 다음 gatsby new 에서 생성된 디렉터리로 cd 로 이동한 다음 gatsby develop 합니다.

cd gatsby-starter-portfolio-cara
gatsby develop

네, 일단 완성입니다! !gatsby develop가 성공하면 브라우저에서 탭을 열고 localhost:8000로 이동하십시오.

세련되고 멋진 사이트가 완성되고 있지요! !



사용하는 템플릿에 따라 다르지만 물론 내용 편집도 간단하게 할 수 있습니다!

이번 gatsby-starter-portfolio-cara 이라는 템플릿의 경우 만든 폴더 안에 src 안에 intro.mdx 되어 있습니다. 톱 이외의 부분도, projects.mdx , about.mdx , contact.mdx 라는 바람에 각각 파일을 src 안에 작성해 마크다운식으로 편집 가능합니다.

마지막으로

이번에는 Gatsby.js를 사용하여 쉽게 멋진 멋진 포트폴리오 사이트를 만드는 방법을 공유했습니다!
매우 간단하기 때문에, 꼭 여러분 시험해 보세요!