GatsbyJS 웹 사이트 구축을위한 6 가지 팁

지금까지 2 개의 개인 웹 사이트를 구축했습니다. 첫 번째는 4 년 전 웹 개발의 기초를 스스로 가르친 방법이었습니다. 단순한 부트 스트랩 웹 사이트 였고 표현할 수 없었습니다 . 별도의 Ghost 블로그 웹 사이트도 있었지만 사용자 정의하려고 할 때 엉망이었습니다. 수년간의 기술을 공고히 한 후 빠르고 사용자 정의가 가능하며 유지 관리가 쉬운 더 나은 대안을 찾았습니다. 그 후 Gatsby를 발견 하고 두 번째 개인 웹 사이트를 구축했습니다 . 전체 경험은 정말 놀랍습니다.

Gatsby 사용법을 배우는 과정에서 Wes BosKent C. Dodds의 Gatsby 사이트를 참고했습니다. 그들이 Gatsby를 핵심으로 활용하는 방법을 보는 것은 놀랍습니다.

다음은 Gatsby 프로젝트를 시작하거나 개선하려는 경우 유용하다고 생각되는 몇 가지 팁입니다.

1. React Helmet을 사용한 SEO

재사용 가능한 SEO 구성 요소를 구축하고 다른 페이지의 소품으로 기본 메타 데이터를 재정의 할 수 있습니다. 기본 HTML 헤더, Facebook OpenGraph 및 일반 페이지를 나타내는 Twitter 메타 데이터가있는 기본 SEO 구성 요소가 있습니다. 그런 다음 블로그 게시물 페이지의 Markdown frontmatter 데이터로 재정 의하여 개별적으로 인덱싱하고 공유 할 수 있습니다.

2. 레이아웃을 gatsby-browser 및 gatsby-ssr로 래핑합니다.

모든 페이지에 적용하려는 일반 페이지 디자인이있는 경우 레이아웃 구성 요소를 만들고 다음 gatsby-browsergatsby-ssr같은 파일에 추가 할 수 있습니다 .

exports.wrapPageElement = ({ element, props }) => (
   <Layout {...props}>{element}</Layout>
);

3. Gatsby API의 초강력 활용

Gatsby API의 힘을 이해하는 데 상당한 시간이 걸렸습니다. 가장 일반적인 사용 사례는 일부 구축 프로세스를 자동화하는 것입니다. 예를 들어, createPagesAPI의 모든 마크 다운 파일을 쿼리 하고 createPage작업을 호출 하여 경로, 템플릿으로 페이지를 빌드하고 원하는 컨텍스트 데이터를 추가 할 수 있습니다. 이것이 내가 모든 블로그 게시물을 생성 한 방법입니다. 기본적으로 다양한 페이지 템플릿을 사용하여 팟 캐스트, 워크샵, 서평 또는 원하는 페이지를 만들 수 있습니다.

onCreateNode추가 GraphQL 노드 필드를 추가하는 또 다른 유용한 API입니다. 예를 들어 editLinkGitHub에 게시물 편집 링크 인 필드를 추가했으며 블로그 게시물 템플릿 페이지 내에서 쿼리 할 수 ​​있습니다.

여기에서 모든 API를 탐색하고 직접 사용 사례를 찾을 수 있습니다.

4. Gatsby Image 플러그인 사용

처음에는 img모든 이미지에 태그를 사용했습니다 . 응답 성 측면에서 좋은 솔루션이 아닙니다. 또한 크기가 다른 이미지를 만들고 picture태그 와 함께 사용하는 것도 시간이 많이 걸립니다 .

이것이 gatsby-image제자리에있는 곳입니다. 앞서 언급 한 모든 프로세스를 수행하고 지연로드도 제공합니다. 블러 링 및 SVG 추적 효과 중에서 선택하여 점진적인 로딩 사용자 경험을 추가 할 수도 있습니다. 이미지를 제공하는 다른 CMS 플러그인에서도 작동합니다.

5. CMS를 통합 할 필요가 없습니다.

이것은 분명히 웹 사이트의 특성에 달려 있습니다. 다른 사람이 콘텐츠를 관리하는 경우 Contentful, Wordpress 또는 Drupal과 같은 CMS와 통합하는 것이 가장 좋습니다.

단순히 자신의 웹 사이트를 구축하고 관리하는 경우 CMS가 필요하지 않습니다. 로컬 파일에서 소싱하는 것은 gatsby-source-filesystem. 예를 들어, 저는 MDX에서 로컬로 블로그 게시물을 작성하고 있습니다. 게시 및 편집은 모두 내 저장소에 커밋을 푸시하여 수행됩니다. 이렇게하면 콘텐츠를 제공하기 위해 다른 서비스에 의존하지 않고도 모든 권한을 가질 수 있습니다.

6. Netlify에서 호스팅하는 경우 증분 빌드 활성화

Gatsby 웹 사이트를 Netlify에 배포하는 것은 모든 페이지를 하나씩 생성해야하기 때문에 많은 시간이 걸릴 수 있습니다. 이미지가 많으면 빌드 시간이 더 길어집니다.

Netlify에서 증분 빌드를 설정하려면 이 가이드 를 따르는 것이 좋습니다 . Gatsby 캐시 플러그인을 사용하여 빌드간에 캐시를 유지하고 변경된 파일 만 다시 빌드 할 수 있습니다. 이렇게하면 웹 사이트의 빌드 시간이 크게 향상됩니다.

읽어 주셔서 감사합니다!

내 웹 사이트의 저장소를 확인하여 이러한 팁이 실제로 작동하는지 확인하고 유용하게 사용할 수 있기를 바랍니다. 질문이 있으시면 기꺼이 도와 드리겠습니다.

Suggested posts

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 자습서가 가르치지 않는 5 가지 주요 교훈

React 개발자가 알아야 할 필수 개념과 교훈이 많이 있지만 대부분의 튜토리얼에서는 다루지 않습니다. 나는 당신이 알아야 할 가장 중요한 주제 중 일부를 직접 골랐지만, 자세히 다루기 위해 시간을 할애 한 기사는 거의 없습니다.

Express.js 시작하기

Express.js 시작하기

Express는 웹 및 모바일 앱을 만드는 경험을 즐겁게 만드는 기능 세트가 포함 된 Node.js 프레임 워크입니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.