개츠비 시작하기

그래서 얼마 전에 사이트 시작의 기본 사항에 대해 썼습니다. Jekyll을 사용하여 첫 번째 개인 사이트를 만들었습니다! 심플함이 정말 마음에 들었습니다.

그러나 시대가 바뀌었습니다. 취향이 바뀌었습니다. 내 사이트를 다시 구축하고 있는데 이번에는 Gatsby를 사용하고 있습니다!

Jekyll과 마찬가지로 Gatsby는 정적 사이트 생성기로 사용할 수 있습니다. 포트폴리오 사이트, 블로그, 개인 사이트 등에 적합합니다. 정적 사이트는 Github 페이지, Netlify, Surge 등을 사용하여 쉽게 배포할 수 있습니다. 하지만 Gatsby를 특히 흥미롭게 만드는 것은 React용 사이트 생성기입니다.

React를 알고 있고 React를 사용하여 동적 웹 애플리케이션을 구축했다면 이미 사업을 하고 있는 것입니다. Gatsby는 React 라이브러리를 사용하고 있습니다.

이전에 Jekyll에서 했던 것처럼 Gatsby를 시작하기 위해 빠르게 실행해 보겠습니다.

노드 및 노드 패키지 관리자가 모두 설정되고 컴퓨터에서 사용할 준비가 되었다고 가정하고 명령줄로 이동하여 Gatsby의 CLI 도구를 설치하고 새 사이트를 생성해 보겠습니다.

$ npm install --global gatsby-cli
$ gatsby new my-new-site https://github.com/gatsbyjs/gatsby-starter-default

여기서 첫 번째 줄은 머신에 Gatsby CLI 패키지를 설치합니다. 두 번째 줄은 여기서 흥미로운 부분입니다. gatsby new는 새 사이트를 생성하라는 명령입니다. 'my-new-site'는 생성되는 디렉터리 이름입니다. 그리고 이 디렉토리 안에는 시작할 수 있는 모든 도구가 있습니다. 그리고 마지막에 그 URL? 그것이 우리의 '스타터'입니다. A starter is essentially a theme, or a template for our site. . 여기서는 기본값을 사용하고 있습니다.

주어진 파일 구조는 다음과 같습니다.


Jekyll 설정보다 조금 더 복잡해 보입니다!

이 단계에서 Gatsby가 제공하는 전체 명령 세트를 사용할 수 있습니다.
gatsby develop - 이렇게 하면 모든 변경 사항을 다시 로드하는 로컬 개발 환경이 설정됩니다!gatsby build - 이렇게 하면 선택한 서비스(surge, Netlify 등)에 배포할 프로덕션 빌드, 정적 사이트가 생성됩니다.gatsby serve - 이렇게 하면 구축된 사이트에 대한 테스트 환경이 설정됩니다.
gatsby develop에 초점을 맞추겠습니다. 이것을 실행하면 Localhost:8000에서 서버가 시작됩니다. 내 모습은 이랬다!



이 모든 콘텐츠는 기본 Gatsby 스타터를 사용하여 제공되었습니까? 그렇다면 드릴다운하고 실제로 일부 편집을 수행하는 방법은 무엇입니까? 이전 React 앱과 마찬가지로 src 폴더로 바로 이동하여 구성 요소를 편집할 수 있습니다! 설명을 위해 매우 기본적인 구성 요소를 추가하겠습니다.

React Components에 익숙하지 않은 경우 빠르고 조잡한 설명은 HTML을 반환하는 Javascript 함수일 뿐이라는 것입니다. 그것보다 조금 더 많지만 우리의 목적을 위해 할 것입니다.

따라서 기본 레이아웃은 아래와 같습니다.


src/components 폴더에 새 .js 파일을 생성하여 이 예제 구성 요소를 다음과 같이 빌드합니다.


(이 구성 요소를 빌드하기 위해 React를 가져왔다는 점에 유의하십시오! 모두 React입니다.

그런 다음 새 예제 구성 요소를 내 인덱스로 가져오겠습니다.


꽤 쉬웠어요! 그리고 지금 우리 사이트는 어떤 모습입니까?


좋습니다... 가장 아름답지는 않지만 HTML 콘텐츠를 빌드하고 페이지에 배치하는 것이 얼마나 쉬운지 알 수 있습니다! 그리고 React와 마찬가지로 하위 구성 요소에 소품을 전달하고, 라이브러리를 가져오고, 클래스 기반 구성 요소 또는 기능 구성 요소를 빌드하는 등의 작업을 수행할 수 있습니다.

저는 현재 새 포트폴리오 사이트를 구축하고 있습니다. Gatsby를 사용하여 구축한 작업의 정점은 다음과 같습니다.



나는 끝나지 않았다! 진행중인 작업입니다. 그러나 이것은 React 라이브러리의 모듈식 구성 요소 구조와 그것이 제공하는 유연성 때문에 매우 쉽게 만들 수 있었습니다. 단순한 패러다임이지만 믿을 수 없을 정도로 강력하고 많은 사용자 정의가 가능합니다.

준비가 되면 공용 폴더를 생성하는 gatsby build를 실행하고 선택한 정적 서비스에 배포할 수 있습니다! 정말 간단합니다.

아래의 Gatsby 및 React 문서를 자세히 살펴보고 구축하세요!

Gatsby
Gatsby Tutorial
React
React Components