Gatsby 및 MDX로 ​​개발자 블로그를 구축하는 방법

당신은 dev.to, hashnode 또는 medium과 같은 사이트에 아이디어를 쉽게 게시 할 수 있지만 이상은 자신의 콘텐츠를 완전히 제어하는 ​​것입니다. 자신의 웹 사이트를 구축하고 자신의 컨텐츠를 제어하기위한 도구 목록이 있습니다. 이 광범위한 튜토리얼에서는 그러한 생태계와 함께 얻을 수있는 종과 휘파람으로 Gatsby를 사용하여 콘텐츠를 빛나게 할 수있는 방법을 다룰 것입니다. 나는 원래 Jekyll을 사용하여 블로그를 게시했지만 Lumen 템플릿을 사용하여 Gatsby로 전환했습니다. 2017 년 5 월경 버전 0 이후 Gatsby를 사용하고 있습니다.

나는 안녕하세요, 세상에서 갈 것입니다! Gatsby는 코드 구문 강조 표시와 그 어두운 모드 선을위한 테마 토글을 가진 코딩 블로그를 통과합니다. 개츠비가 당신을 신속하게 운영 할 수있는 플러그인, 스타터 및 테마의 풍부한 생태계가 있지만 개츠비 프로젝트가 어떻게 작동하는지에 대한 기본 사항에 중점을 둔 개츠비 발표에 진보적 인 공개 접근 방식을 취하고 싶습니다. > 왜 개츠비?

Gatsby는 정적 사이트 생성기이므로 페이지를 요청할 때 동적 인 페이지 생성이 없습니다. Gatsby 사이트의 구축 된 출력은 CDN에서 호스팅하여 전 세계적으로 사용할 수 있고 확장 가능합니다. Gatsby는 Markdown 파일을 사용하여 사이트 프로젝트에서 페이지를 만들 수 있습니다. Gatsby는 Gatsby 파일 시스템에 Markdown 파일을 읽고 Markdown을 HTML로 변환 한 다음 사이트를 작성할 때 정적 페이지를 만듭니다. 최종 결과는 페이지를 요청할 때 대기 시간이 거의없는 매우 빠른 사이트입니다. Markdown 및 Mdx

저는 Markdown에서 2016 년부터 개발 여행을 문서화했습니다. Markdown은 HTML로 변환 할 수있는 일반 텍스트 파일에서 간단한 편집을 활성화하는 방법을 제공합니다. mdx (또는 Markdown JSX)는 Markdown 문서에 JSX를 작성할 수있는 도구입니다.

Gatsby는 게시물에 FrontMatter를 사용하는 특별 표기법이 필요하지 않기 때문에 Markdown 및 MDX로 ​​작업하는 데 사용한 최고의 프레임 워크입니다. 내가 무엇을 필요로합니까?

를 따라 가려면 몇 가지 필요한 사항이 있습니다.

기본 웹 개발 설정 : 노드, 터미널 (배쉬, ZSH 또는 물고기) 텍스트 편집기 반응의 기본적인 이해

이 중 하나가 없으면 빈 github 리포지토리를 만들고 거기에서 개발 환경을 시작할 수있는 stackblitz와 github codespaces가 모두 있습니다.

. 나는 텍스트 편집기로 vs 코드를 사용하고 아래 예제에서 선호하는 패키지 관리자로서 yarn을 사용합니다. NPM을 선호한다면 멋지다. ? github 에서이 자습서에 대한 전체 코드를 찾을 수도 있습니다.

좋아요, 이제 시작할 시간입니다! 안녕하세요, 세상! 이제 개츠비 프로젝트를 회전시킬 차례입니다. 나는 명령 줄에서 이것의 대부분을 시작하기 위해 다음을 시작할 것입니다 :

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

쿨. 이제 다른 곳으로 가기 전에 NPM 모듈을 설치하기 전에 .gitignore 파일을 추가해야합니다.

이제 너무 많은 활성 변경에 대해 나에게 비명을 지르지 않고 Code Git없이 필요한 모든 NPM의 장점을 설치할 수 있습니다. 이제 Gatsby와 함께 일어나서 실행하기 위해 몇 가지 종속성을 설치합시다 : .

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

다음은 프로젝트에 대한 첫 번째 React 구성 요소 (많은)를 추가합니다. 내가 만든 index.js 파일에 다음을 추가하겠습니다.

이제 명령 줄에서 개츠비 개발 명령을 실행할 준비가되었습니다.

이것은 Gatsby Dev Sever를 회전시키고 포트 8000의 브라우저에서 내 프로젝트를 볼 수 있다고 말할 것입니다 (기본 Gatsby 포트). URL은 http : // localhost : 8000/. <span># create .gitignore file in my directory </span><span>touch .gitignore </span><span># add ignore contents with echo </span><span>echo "# Project dependencies </span><span>.cache </span><span>node_modules </span><span> </span><span># Build directory </span><span>public </span><span> </span><span># Other </span><span>.DS_Store </span><span>yarn-error.log" > .gitignore </span>입니다 명령 줄 인터페이스 (CLI)에서 직접 Gatsby Binary 명령을 사용하는 것은 완전히 가능하지만 대부분의 사람들은 Package.json 파일의 스크립트 섹션에 사용 가능한 명령을 다음과 같이 추가합니다.

추가 보너스로 Gatsby 스크립트에 추가 할 수있는 몇 가지 추가 기능이 있습니다. 우리가 매번 같은 포트에서 프로젝트를 실행하지 않으려면 -p 플래그로 변경할 수 있고 그 후에 지정된 포트를 변경할 수 있습니다. 예를 들어, Gatsby는 -p 8945를 개발합니다 프로젝트가 준비되면 브라우저 탭을 열려면 스크립트에 -o를 추가 할 수 있습니다. 나는 서브 스크립트와 똑같이 할 것입니다. 그래서 프로젝트를 구축했을 때 개발과 다른 포트와 다른 포트에 있습니다 : .

그리고 그와 함께,“안녕하세요, 세상!” 환영이 완료 되었으며이 게시물의 나머지 부분을 계속 진행할 수 있습니다! ? 마지막으로 지금까지 변경된 변경 사항을 저지를 것입니다

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

블로그 좋아요, 지금 프로젝트를 많이 진행하고 있지 않으므로 먼저 명령 줄에서 일부 콘텐츠를 추가하겠습니다. 나는 내가 만들고있는 예제 전체에서 이것을 사용할 것입니다 파일 확장자 .mdx가 표시됩니다. 이것은 mdx 파일입니다.

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

전면 물질 블로그에 콘텐츠를 추가하기 전에 Front Matter에 대해 이야기해야합니다. Front Matter는 페이지를 작성할 때 Gatsby가 사용할 수있는 파일에 대한 정보를 저장하는 방법입니다. 지금은 게시물 제목과 날짜를 추가하겠습니다. 또한 일부 내용을 추가하겠습니다. 첫 번째 게시물은 다음과 같습니다

다음은 두 번째 게시물입니다

<: :> 세 번째 게시물 :

이 게시물은 아직 Gatsby에 의해 페이지로 인식되지 않기 때문에 지금은 게시물에 대한 것입니다. Gatsby에게 프로젝트에 추가 할 컨텐츠를 찾을 위치를 알려 주어야합니다. 이렇게하려면 Gatsby에 구성 파일을 추가하겠습니다.

<span># if you're using npm ?
</span><span># $(npm bin)/gatsby develop
</span><span>yarn gatsby develop
</span>

내가 git에 대한 변경 사항을 저지를 봅시다 :

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

개츠비 구성 Gatsby Config는 사용할 수있는 많은 Gatsby 플러그인을 정의하고 구성하는 데 사용되는 것입니다. Gatsby 플러그인 에코 시스템에 대해 조금 더. 지금은 터미널에서 다시 파일을 만들겠습니다 :

이것은 프로젝트의 루트에서 Gatsby-config.js를 생성하여 Gatsby가 이전에 만든 .mdx 파일을 읽도록 구성 할 수 있습니다. 개츠비 플러그인 이제 Gatsby가 생성 한 파일을 소스 및 표시 해야하는 플러그인을 설치하고 구성 할 수 있습니다. 나는 지금 그것들을 모두 설치하고 그들이 무엇을위한 것들을 간단히 자세히 설명하겠습니다 :

package.json을 빠르게 살펴보면 다음의 종속성 버전이 설치되어 있음을 보여줍니다.

주목할만한 점은 개츠비에서는 반응 17로 구성 요소에서 RECT를 가져올 필요가 없다는 것입니다. 그러나 완전성을 위해 혼란을 피하기 위해서는이 예에 포함시킬 것입니다.

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

이제 Gatsby-Plugin-MDX 및 Gatsby-Plugin-MDX를 구성해야합니다. gatsby-config.js 파일에서 다음을 추가하겠습니다

지금까지 변화를 커밋하십시오 :

Gatsby GraphQL 이제 Gatsby GraphQL 클라이언트 인 Graphiql을 사용하여 Gatsby의 파일과 함께 어디에 있는지 확인할 차례입니다. CLI가 프로젝트를 볼 수있는 두 개의 URL 위치를 나타내는 것을 알았을 수도 있습니다.

파일 시스템의 파일을보기 위해 ___graphql (3 밑줄) 경로를 사용하겠습니다. 이것이 약간 위협적인 것처럼 보이면, 그다지 의미가없는 것처럼 보이는 모든 부분을 다루려고 노력할 것입니다. 따라 가면 예제를 GraphIQL 탐색기에 복사하는 것이 좋습니다. Graphiql Explorer를 열면 여러 개의 탐색기 패널이 있습니다. 이것은 프로젝트에서 탐색 할 수있는 모든 데이터이며 Gatsby-config.js 파일에서 구성한 내용에 따라 다릅니다. GraphIQL 쿼리 패널과 결과 옆에 있습니다. 필요한 데이터를 검색하기 위해 GraphQL 쿼리를 작성하는 곳입니다. 쿼리 패널의 맨 아래에 쿼리 변수 섹션도 있으며 나중에 나올 것입니다.

. 가장 오른쪽에는 GraphQL 문서 탐색기가 있습니다. GraphQL의 엄격한 입력으로 인해 데이터에 대한 자체 문서를 생성 할 수 있습니다. 그러나 그것은이 게시물의 범위를 벗어납니다.

GraphQL

로 로컬 파일을 쿼리하십시오 다음, GraphIQL 쿼리 패널에 이전에 추가 한 파일에 대해 쿼리를하겠습니다. 이 쿼리에서 파일의 글꼴 문제에 정의 된 제목과 날짜를 쿼리하고 있습니다.

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

쿼리 패널에 팝하면 큰 재생 버튼을 누르면 결과 패널에서 일부 데이터를 되 찾습니다. 왼쪽 패널의 탐색기를 사용하여 데이터를 선택할 수도 있습니다. 다음은 쿼리를 실행 한 후 얻는 것입니다

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

이것은 쿼리에서 요청한 관련 정보가있는 큰 JSON 객체입니다. 곧 사용하는 방법을 살펴 보겠습니다. 지금은 Gatsby 프로젝트 에서이 데이터를 사용하여 페이지를 만들 수 있음을 의미합니다. 사이트 메타 데이터 Gatsby-config.js 파일에는 사이트 메타 데이터를 지정할 수있는 옵션도 있습니다. 사이트 메타 데이터는 사이트 제목 및 설명과 같은 일반적인 데이터를 재사용하고 싶을 때입니다. 이것은 검색 엔진 최적화 (SEO)를 위해 사이트에 메타 태그를 추가하려고 할 때 도로 아래로 더 유용 할 것입니다. (나중에 다시 한 번 더.) 지금은 Gatsby-config.js의 사이트에 대한 몇 가지 기본 정보를 SitemetAdata 객체와 함께 정의 할 것입니다. i

는 모듈에서 직접 Metada를 정의 할 수 있습니다.

사이트 메타 데이터 객체가 약간 커질 수 있으며, 자체 객체에 그것을 유지하는 것이 조금 더 간단해질 수 있으므로 대신 별도로 정의 할 것입니다 :

.

그런 다음 Gatsby 구성 파일에 SiteMetadata 객체를 추가합니다.

이제 나는 Graphiql Explorer로 다시 뛰어 넘어 다음 쿼리로 해당 사이트 메타 데이터를 쿼리 할 수 ​​있습니다.

Gatsby-config.js 파일을 변경하는 경우 개발 서버를 중지하고 다시 시작하는 것은 항상 좋은 생각입니다. >, Yarn Invelove), 그런 다음 GraphiqL Explorer에서 페이지를 새로 고침하고 쿼리를 다시 실행하여 데이터를 다시 가져옵니다.

사이트 메타 데이터 후크를 만듭니다 이제 Gatsby 파일 시스템에 사이트 메타 데이터가 있었으므로 Gatsby STATIC Query Hook UsestaticQuery와 함께 사용하고 싶은 곳 어디에서나 쿼리 할 수 ​​있습니다. SRC/Pages/Index.js 파일에 다음을 추가 한 후 Dev 서버를 죽이고 다시 시작하겠습니다.

일부 표기법에 대한 빠른 참고 사항 : const {site : {siteemetAdata},}는 사이트 쿼리의 데이터를 빠르게 얻는 방법입니다. 이것은 파괴 구조라고합니다. 이제 Dev 서버를 다시 시작한 후 브라우저 콘솔로 이동할 수 있습니다 ( Control Shift <span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span> in windows/linux,

command

옵션

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

j )는 콘솔 출력에서 ​​SitemetAdata 객체를 참조하십시오.

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

다음 콘솔 출력을 얻습니다

누락 된 404 페이지에 대한 콘솔 경고에 대해 걱정하지 마십시오 (Net :: err_aborted 404 (찾을 수 없음)). 나중에 만들겠습니다.

매번이 쿼리를 쓰지 않으려면 구성 요소에서 사용하고 싶습니다. 나는 이것을 자신의 고리로 추상화 할 것입니다 :

<span>import <span>React</span> from "react";
</span>
<span>export default function <span>IndexPage</span>() {
</span>  <span>return <span><span><h1</span>></span>Hello, World!<span><span></h1</span>></span>;
</span><span>}
</span>

이제 새로 생성 된 SRC/hooks/use-site-metadata.js 파일에 후크를 추가하여 사이트 메타 데이터를 주문할 수 있습니다. 당신은이 쿼리가 graphiql 탐색기의 쿼리와 동일하지 않다는 것을 알았을 것입니다 :

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

이것은 쿼리의 이름을 지정하는 것입니다. 프로젝트에서 많은 쿼리를 사용할 것이기 때문에 의미있는 이름을 부여하는 것이 합리적입니다.

이제 새 후크를 src/pages/index.js 파일에 구현하겠습니다 :

그것은 장점이 훨씬 적으며 Site_metadata_Query에서 원하는 항목을 선택하고 선택할 수 있습니다. 지금까지 변경된 변경 사항을 통과시킬 때입니다

테마 ui

스타일링 이 프로젝트를 스타일링하려면 Theme UI를 사용하여 Dark Mode와 같은 레이아웃 및 기능을 구현하는 속도로 인해 Theme UI를 사용할 것입니다. 테마 UI를 사용하는 방법에 대한 가이드는 아니지만, 내가하고있는 일과 관련된 것과 그 이유를 자세히 설명 할 것입니다.

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

. 테마 UI에 추가해야 할 몇 가지 추가 종속성이 있습니다.

설치된 경우 Gatsby-Plugin-Theme-UI를 Gatsby-config.js 플러그인 배열에 추가해야합니다.

이제 Dev 서버를 중지하고 다시 시작하면 약간 다른 사이트가 있습니다! 모두 정확하게 푸른 사람이되었습니다. 이것은 Gatsby-Plugin-The-Teme-UI가 그 일을하고 있으며 그 색상은 기본입니다.

테마 UI 용 Gatsby 플러그인은 많은 구성 옵션을 제공하며, 그 중 일부는 필요할 때 더 자세히 다룰 것입니다. 지금은 폴더를 만들고 테마 UI의 테마 개체를 정의 할 것입니다.

src/gatsby-plugin-teme-ui/index.js 파일에서, 나는 몇 개의 테마 UI 사전 설정을 추가하고, 테마 개체를 정의하고, 스위스 사전 설정에 테마로 퍼져 나갈 것입니다. 테마 색상과 스타일에 Dark Mode의 경우 Deep Theme UI Preset을 사용하여 Dark의 모드 객체로 퍼뜨리고 있습니다. (곧 이것에 대한 자세한 내용.) 지금은 이것이 나를위한 많은 테마를 돌볼 것임을 아십시오 :

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

이제 Dev 서버를 다시 시작하면 스위스 테마가 적용되는 경우 좀 더 허용되는 것처럼 보일 것입니다. 쓰기시 테마 UI는 때때로 로컬 호스트 페이지를 새로 고치지 않으므로 브라우저 페이지를 새로 고침해야합니다. 지금까지 변경 사항을 git :

일부 반응 구성 요소를 추가 할 시간! 레이아웃 구성 요소

개츠비에는 특정 레이아웃이 없어 개발자에게 책임을 부여합니다. 이 경우 전체 사이트에 대한 레이아웃을 만들고 있습니다. 개츠비 프로젝트에 사용하기 위해 많은 레이아웃을 통합 할 수 있지만이 예에서는 하나만 사용합니다. 이제 나는 모든 것이 레이아웃 구성 요소에 의해 감싸도록 현재 가지고있는 것을 리팩터 할 것입니다. 현재 SRC/Pages/Index.js에있는 내용은 헤더 구성 요소에 사용할 수 있으므로 레이아웃 및 헤더에 대한 파일 몇 개를 만들겠습니다.

이제 제목과 설명을 src/pages/index.js에서 새로 생성 된 src/components/header.js 구성 요소로 이동하려면 헤더 구성 요소에 사용 된 useItemetAdata가 사용되는 대신 레이아웃 구성 요소의 헤더에 필요한 useimetAdata 소품을 전달합니다. (곧 더 자세히 설명하십시오.) 먼저, SRC/Components/Header.js에 사는 헤더 구성 요소는 다음과 같습니다.

테마 UI 레이아웃 요소를 사용하여 몇 가지 기본 스타일을 추가했습니다. 이것은 이전과 조금 다르게 보입니다 : Box, Link, Heading… 무엇? 이들은 레이아웃, 형태 요소 등에 사용할 수있는 테마 UI 구성 요소입니다. as = {gatsbyLink} 링크 소품이 링크 구성 요소에 추가 된 것을 알 수 있습니다. 이것은 테마 UI의 AS Prop을 사용하고 테마 UI 스타일을 사용하여 전달되는 구성 요소를 사용합니다. Paul Scanlon의 훌륭한 게시물이 테마 UI에서 어떻게 수행되는지 더 자세히 설명합니다. 테마 UI에 대한 포괄적 인 설명을 위해 같은 저자의 "테마 이해"도 있습니다. 테마 UI의 SX 및 변형 소품도 있습니다. SX를 사용하면 추가 스타일을 구성 요소로 전달할 수 있습니다. JSX Style = {{}} props와 동일하게 생각하십시오. 변형 소품을 사용하면 미리 정의 된 스타일 그룹이 테마에서 사용되는 구성 요소에 적용될 수 있습니다. 이제 SRC/구성 요소/Layout.js에 위치한 레이아웃 구성 요소의 경우 지금

여기서 aust 그런 다음 아이들을위한 메인 포장지를 만들고 있습니다 Children Prop은 레이아웃 구성 요소가 캡슐화하는 것을 반환하는 것입니다. 여기에는 레이아웃을 적용하려는 내용이 포함됩니다. 예를 들면 :

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

이것은 레이아웃 구성 요소의 모든 것을 반환합니다. 위의 예에서, 현재 레이아웃 구성 요소로 감싸는 헤더와 H1이 될 것입니다. 예를 들어, 인덱스 페이지 (src/pages.index.js)로 돌아가 다음을 추가하겠습니다.

결과는 레이아웃 구성 요소에 제공된 헤더이며 H1은 래핑됩니다. 색인 페이지 게시물 쿼리

이제 처음에 작성한 게시물을 가져 와서 클릭 가능한 링크 목록으로 인덱스 페이지에 표시 할 때입니다. 게시물 정보를 얻으려면 몇 가지 여분의 비트로 GraphQL을 사용하여 로컬 파일 쿼리에 관한 섹션에서 작성한 쿼리를 재현합니다.

노드와 슬러그의 ID를 추가했습니다. 이것은 .mdx 파일의 파일 경로입니다 발췌문은 Gatsby 기능을 사용하여 게시물 본체에서 처음 250자를 얻고 다른 내장 Gatsby 기능으로 날짜에 일부 형식을 추가합니다. 그런 다음 날짜 하강 순서로 게시물을 주문하는 방법으로 다음을 추가했습니다. 이것은 게시물 전면 물질의 날짜에 정렬됩니다.

Graphiql Explorer에 추가하면이 결과가 나에게 제공됩니다 :

이제 src/pages/index.js 파일에서 해당 쿼리를 사용하여 인덱스 페이지에서 사용하기 위해 해당 데이터를 가져올 수 있습니다. IndexPage 함수에서는 GraphQL 쿼리를 통해 구성 요소에 제공된 소품에서 데이터를 파괴합니다.

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

이것은 이전에 상세한 구성 요소를 사용합니다. 발췌, 프론트 매터 및 슬러그는 data.allmdx.nodes에서 파괴되고 있습니다.

링크를 클릭하면 Gatsby.js Development 404 페이지로 이동합니다. 아직 .mxd 파일에 대한 페이지를 만들지 않았기 때문입니다. 그게 다음입니다. 계속 진행하기 전에 지금까지 한 일을 커밋 할 것입니다 :

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

Gatsby 파일 시스템 경로 API 사용 MDX Gatsby 파일 시스템 경로 API를 사용하여 이전에 작성한 게시물의 파일 경로를 가져 오게됩니다. 파일 시스템 경로 API는 내 그래프 QL 데이터에서 프로그래밍 방식으로 페이지를 작성하는 방법입니다. 이 접근법에는 Gatsby가 빌드 시간에 파일 시스템 데이터를 생성 할 때 타겟팅 될 페이지에 대한 특수 파일 표기법이 있습니다. 파일은 노드와 슬러그를 나타냅니다. 먼저 파일을 만들고 데이터가 어디에서 오는지 자세히 설명합니다.

파일 ​​에서이 템플릿에 포함하려는 데이터에 대한 그래프 QL 쿼리를 정의합니다.

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

이제 코드가 많으므로 헤어질 것입니다. 주로 GraphQL 쿼리와 관련이 있습니다

쿼리의 시작은 post_by_slug ($ slug : string)로 슬러그를 사용하고 메인 노드는 mdx이므로 filename {mdx.slug} .js. 해당 쿼리를 가져 와서 내 그래픽 탐색기에 붙여 넣고 재생 버튼을 누르면 다음과 같이받습니다.

는 그래프 리플 탐색기에 $ 슬러그에 대해 정의 된 변수가 없기 때문입니다. 쿼리 패널의 하단을 보면 쿼리 변수 섹션이 있음을 알 수 있습니다. 이것을 클릭하면 확장됩니다. 여기에는 슬러그에 변수를 추가해야합니다. 파일 중 하나의 경로와 함께 Curly Braces에서 정의 할 것입니다.

쿼리를 다시 실행하면 해당 파일의 모든 데이터가 표시됩니다. 가독성에 대한 신체 출력에 대해 언급했습니다

파일 시스템 경로 API가 수행하는 일은 개별 파일 경로를 src/pages/{mdx.slug} .js의 페이지 쿼리로 전달하고 ({data})의 해당 쿼리에서 페이지로 데이터를 반환하는 것입니다. 소품이 페이지로 전달됩니다 이 파일에서, 당신은 내가 반환되는 데이터에서 신체를 파괴 한 다음, 프론트 마터에서 제목을 2 단계 파괴로 파괴 한 것을 알 수 있습니다 :

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

.

대안적인 방법은 다음과 같습니다

파괴를 사용하면 장점이 훨씬 덜합니다 마지막으로 주목해야 할 것은 게시물의 본문을 감싸는 mdxrenderer입니다. 이것은 전면 물질 블록 다음에 .mdx 파일에 포함 된 모든 것입니다. 댓글을 달린 Graphiql 쿼리에서 컴파일 된 MDX는 mdxrenderer에 래핑해야 할 것입니다 :

지금 변경 사항을 커밋하겠습니다

root 래퍼 개념

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

이제 인덱스 페이지의 링크 중 하나를 클릭하면 원하는 .mdx 페이지로 이동하지만 색인 페이지와 약간 다르게 보입니다. 는 아직 레이아웃을 감싸지 않기 때문입니다. 이곳에서 Gatsby Browser API를 사용하여 WrappageElement 기능을 사용하여 모든 페이지 요소를 래핑 할 수 있습니다. Gatsby SSR에서 동일한 기능을 사용하는 것이 좋습니다. 두 파일로 동일한 코드를 복제하지 않으려면 사용하려는 실제 코드가있는 세 번째 파일을 작성하여 언급 한 두 개의 개츠비* 파일로 가져옵니다. 먼저, 필요한 파일을 만들 것입니다 :

루트 래퍼 파일은 WappageElement 함수를 사용하는 곳입니다.

그런 다음 Gatsby-Browser.js와 Gatsby-SSR.JS 파일에서 다음을 추가하겠습니다.

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

WrappageElement 함수에 필요한 변경 사항이 있으면 하나의 파일 root-wrapper.js. 변경 사항이 적용되는 것을 확인하려면 DEV 서버를 다시 중지하고 다시 시작할 시간! 레이아웃 구성 요소가 사이트의 모든 페이지 요소를 래핑하는 데 사용되기 때문에 더 이상 인덱스 페이지에 보관할 필요가 없으므로 SRC/Pages/Index.js에서 제거하겠습니다.

계속 진행하기 전에 지금까지 변경을 저지 드리겠습니다

404 페이지 404 페이지를 만들 시간!

src/pages/404.js 파일에서 메시지를 추가하고 다음을 추가합니다 :

이제 404 페이지로 직접 탐색하여 확인할 수 있습니다. http : // localhost : 8000/404. Gatsby 개발을 사용하여 개발할 때 Gatsby는 Custom 404 페이지를 무시하는 기본 404 페이지를 계속 사용할 것입니다. 이것을 커밋하고 다음 부분으로 넘어갑니다

다크 테마 토글

Dark Mode는 블로그 코딩의 필수 기능입니다. (농담으로 반으로, 당신이 확실하지 않은 경우!) 테마 UI 색상 모드 hook usecolormode를 사용하고 이전에 테마 객체에서 정의한 두 모드 사이에서 간단한 토글을 수행 할 것입니다. 다음은 SRC/Components/Header.js :

에 추가되는 내용입니다

하지만 멋지지 않으므로 테마 UI 플렉스 구성 요소로 컨테이너를 감싸고 버튼을 오른쪽으로 바꿉니다.

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

다음 섹션으로 이동하기 전에 git 커밋 :

코드 블록 코드 블록은 현재 약간의 모습으로 보이므로 많은 편리한 댄디 테마 UI 패키지 중 하나로 일부 구문 강조 표시를 추가하겠습니다. 내가 이것에 사용하고있는 것은 프리즘입니다.

패키지를 설치하고 Gatsby-Plugin-Theme-UI 폴더에 components.js : 에 구성 요소를 만들어야합니다.

해당 파일에서 프리즘 스타일을 적용 할 위치를 정의해야합니다.이 파일은 모두 사전 및 코드 태그입니다.

정의 된 경우, 내가 사용하고 싶은 프리즘 테마를 테마 객체에서 정의해야합니다.

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

변경 사항이 적용되는 것을보기 위해서는 DEV 서버의 또 다른 정지 및 시작이 필요합니다!

변경 사항을 커밋하고 다음 섹션으로 이동하십시오

mdx

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

에 구성 요소를 추가하십시오 이 다음 비트는 선택 사항입니다. Markdown JSX는 React (JSX) 구성 요소가 Markdown에 포함될 수 있도록 허용합니다. 이를 보여주기 위해 애니메이션주기에서 일부 색상을 애니메이션 할 수있는 Rainbowtext 구성 요소를 추가하겠습니다. 애니메이션에 필요한 추가 의존성이 있습니다 : @extent/React의 키 프레임. 지금 설치하겠습니다 :

이것은 Dev 서버가 실행 중이면 폐기 될 것입니다. 지금은 중지하겠습니다. src/components/rainbow-text.js 파일 에서이 구성 요소를 추가하겠습니다 :

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

이것은 선택 사항이므로 여기서 무슨 일이 일어나고 있는지 자세히 설명하지 않을 것입니다. 호버에 대한 좋은 CSS 효과라는 것을 알고 있습니다.

해당 구성 요소를 사용하여 사용하려는 .mdx 파일로 가져올 수 있습니다.이 예에서는 Content/2021/03/Third-Post/Index.mdx에 추가하고 있습니다. 구성 요소를 추가 한 파일의 차이는 다음과 같습니다.

Dev 서버를 다시 시작한 후, 해당 구성 요소가 추가 된 게시물로 이동할 수 있으며 wheeeeeeeee 에 랩핑되는 텍스트를 가리킬 때 해당 애니메이션이 효과를 볼 수 있습니다. . 당신은 아마도 그 수입품을 찡그릴 것입니다 : ../../../. 계속해서! 그러나 이전에 자세히 설명한 루트 래퍼 컨셉을 사용하고 MDXProvider를 사용하는 방법이 있습니다. - 전달한 구성 요소를 MDX를 제공하십시오.

루트 래퍼 (root-wrapper.js)로 돌아가서 MDXProvider로 페이지 요소를 랩핑하고 RainbowText 구성 요소를 MDXProvider로 전달할 수 있습니다 : .

이제 .mdx 파일에서 가져 오기를 제거 할 수 있습니다.

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

Dev 서버를 중지하고 다시 시작한 후에도이 게시물로 이동하여 여전히 레인보우 텍스트가 작동하는 것을 볼 수 있습니다. MDXProvider에 구성 요소를 직접 추가하는 데있어 추가 장점은 사용하려면 구성 요소를 .mdx 문서로 가져올 필요가 없다는 것입니다. 모든 MDX 문서에 대해 제공자를 통해 사용할 수 있습니다 지금 커밋하겠습니다 :

마크 다운 이미지 내 블로그 게시물에 이미지를 추가하려면 MDX 파일에 이미지를 포함시킬 수 있습니다.

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

./mdx-logo.png는 content/2021/03/06/hello-world 폴더에 추가 된 파일이며 상대 파일로 참조하고 있습니다. 그래도 그게는 아닙니다. Hello World Post로 이동하면 표시되는 이미지가 고장납니다. Gatsby-Plugin-MDX에 플러그인으로 Gatsby-Remark-Images를 추가해야하므로 이미지 파일로 무엇을 해야하는지 알고 있습니다.

그런 다음 Gatsby-config.js에서 플러그인을 구성해야합니다

추가 Gatsby-Source-Filesystem 객체는 Gatsby에게 처리 할 이미지를 어디서 찾을 수 있는지 알려줍니다. <:> 지금 커밋하십시오 :

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

seo

SEO는 검색 엔진으로 인터넷에 내 컨텐츠를 찾으려면 매우 중요하므로 여기에서 내 블로그에 관련 메타 태그를 추가해야합니다. 필요한 모든 관련 태그를 정의하는 과정이 될 수 있으므로 시간을 절약하기 위해 필요한 모든 메타 태그를 생성하기 위해 Gatsby에서 사용하기 위해 React SEO 구성 요소를 만들었습니다. 나는 원사에 작용하는 데 필요한 종속성과 함께 구성 요소를 추가 할 것입니다.

<span># create .gitignore file in my directory
</span><span>touch .gitignore
</span><span># add ignore contents with echo
</span><span>echo "# Project dependencies
</span><span>.cache
</span><span>node_modules
</span><span>
</span><span># Build directory
</span><span>public
</span><span>
</span><span># Other
</span><span>.DS_Store
</span><span>yarn-error.log" > .gitignore
</span>

Gatsby-Plugin-React-Helmet을 Gatsby-config.js 플러그인 배열에 추가해야합니다.

그러면 메타 태그가 필요한 사이트 전체에 SEO 구성 요소를 사용하는 경우입니다. 구성 요소는 상당히 소수의 소품이 필요하며, 그 중 다수는 사이트 전체에서 한 번 정의되므로 추가하기에 가장 좋은 장소는 SiteMetAdata 객체에 있습니다. 그런 다음 useitemetadata hook로 필요한 것을 꺼낼 수 있습니다.

나는 siteemetadata 객체에 몇 가지 속성을 추가 할 것입니다 :

를 따라 가면 필요에 따라 변경할 수 있습니다. SiteUrl은 현재 더미 URL 일 수 있습니다. 이는 Open Graph 프로토콜에 사용하는 데 필요한 이미지를 가리키는 데 도움이되며 Twitter, Facebook, LinkedIn 및 Reddit에서 작성한 게시물을 공유 할 때 표시되는 이미지입니다. 예를 들어. 이제 해당 추가 속성이 SetemetAdata 객체에 있으므로 쿼리 할 수 ​​있어야합니다. 현재 useitemetadata hook에는 제목과 설명 만 가지고 있으므로 지금은 나머지를 추가하겠습니다.

모든 페이지에 SEO 구성 요소를 추가하겠습니다. 먼저 SRC/Pages/{Mdx.slug} .js 페이지에서 게시물 페이지를 수행합니다. 이것은 가장 관여하는 것 중 하나이므로 차이점을 버리고 무슨 일이 일어나고 있는지 자세히 설명하겠습니다.

<span>yarn add gatsby react react-dom
</span><span># -p is to create parent directories too if needed
</span><span>mkdir -p src/pages
</span><span># create the index (home) page
</span><span>touch src/pages/index.js
</span>

siteUrl, 슬러그 및 발췌문은 표준 링크 (SEO에서 매우 중요함)에 필요하며 발췌는 메타 설명을위한 것입니다. 나는 siteemetadata 후크를 사용하여 구성 요소에 필요한 나머지 정보를 얻을 수 있습니다. 제목과 titletemplate는 브라우저 탭에서 보는 것을 보충하는 데 사용됩니다.

기사 부울은 구성 요소를위한 것이므로 빵 부스러기 목록을 JSONLD 형식으로 만들 수 있습니다. 나머지 소품은 저자 및 게시 날짜를 식별하는 데 도움이됩니다. ? 많은 것이 었습니다. 나는 그것이 의미가 있었으면 좋겠다! 이 게시물의 범위에 대해서는 그대로 두겠습니다. 그러나이 주제에 대해 더 많이 파는 것이 더 많습니다. a 많이

! 를 의미합니다. 고맙게도 src/pages/index.js 페이지는 조금 간단합니다! 나는 의도적으로 두 예제에서 이미지를 제외시켰다. 이 구성 요소에서 사용할 수있는 오픈 그래프 이미지를 만들고 싶다면 서버리스 기능으로이를 수행하는 방법에 대해서는 "Gatsby 및 Vercel을 사용한 그래프 이미지 열기"를 확인하십시오. ? 이제 사이트를 구축 할 수 있으며 (거의 생산 준비) 구축되면 메타 태그의 페이지 소스를 확인할 수 있습니다. 일단 빌드가 완료되면 원사를 사용하여 LocalHost : 9000에서 로컬로 건축 된 사이트를 제공 할 수 있습니다. 브라우저에서는 키보드 바로 가기 ctrl

u 로 페이지 소스를 볼 수 있습니다. 여기에서 메타 데이터에 사용되는 더미 URL이 될 표준 메타 태그를 확인할 수 있습니다. 알았어! 이것을 git에 칭찬하고 계속 움직입니다

github

에 밀어 넣으십시오 각 섹션의 끝에서 왜 GIT 커밋을했는지 궁금 할 것입니다. 프로젝트를 지금 Github까지 밀어 내기 때문입니다.

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

내 github 계정에 로그인하고 오른쪽 상단의 아바타 이미지 옆에있는 플러스 아이콘을 선택하고 새 저장소를 선택합니다. 리포지토리 이름에서 프로젝트 이름 My-Gatsby-Blog를 추가하지만 나머지 기본값을 남겨두고 저장소 작성을 클릭합니다. 다음 화면은 로컬 프로젝트를 Github로 푸시하는 데 필요한 터미널 명령을 제공합니다.

일단 모든 사람들을 터미널에 넣고

를 눌렀다가

를 입력하고 github 페이지를 새로 고치려면 새 프로젝트를보십시오!

<span># create the project directory
</span><span>mkdir my-gatsby-blog
</span><span># change into the directory
</span><span>cd my-gatsby-blog
</span><span># initialise a package.json file
</span><span>yarn init -y
</span><span># initialise the git repo
</span><span>git init
</span>

배포 이 아기를 웹에 넣을 시간! 이를 수행하는 방법에는 여러 가지가 있습니다. Gatsby는 플랫 파일 구조로 구축되므로 인터넷에 액세스 할 수있는 파일 서버에서 Gatsby 사이트를 호스팅 할 수 있습니다. CDN에서 호스팅을 제공하는 많은 서비스가 있습니다. NetLify, Vercel 및 Render와 같은 서비스는 CLI, Github 통합 또는 NetLify의 경우 직선적 인 드래그 앤 드롭을 통해 내장 사이트를 CDN으로 푸시 할 수 있습니다!

vercel Vercel과 함께 배포하려면 인증하려면 github, gitlab 또는 bitbucket 계정이 필요합니다. 그런 다음 Vercel Cli : 를 설치하라는 메시지가 표시됩니다 이미 설치되어 있으므로 이제 CLI 명령을 실행하는 경우입니다. 그런 다음 새 프로젝트를 설정하고 배포하라는 메시지가 표시됩니다. 를 입력하여 모든 질문에 대한 기본값에 답할 것입니다. <.> 그게 다야. 그런 다음 Vercel의 사이트 빌드를 볼 수있는 배포 URL이 제공됩니다. Vercel 대시 보드에서 도메인을 구성하고 원하는 경우 Vercel에서 도메인을 구입할 수 있습니다. 나는 개인적으로 namecheap.com을 사용하지만 옵션입니다.

netlify CLI를 통해 NetLify로 배포하는 것은 Vercel과 거의 동일하지만 드래그 앤 드롭 제작을 할 것입니다.

. 인증을 위해서는 github, gitlab, bitbucket 또는 이메일 계정 중 하나가 필요합니다. 인증 및 로그인 한 후 메뉴 표시 줄에서 사이트를 선택할 수 있으며 Drop Area가 Git에 연결하지 않고 새 사이트를 배포하려는 것이 있습니까? 사이트 출력 폴더를 여기에서 드래그 및 떨어 뜨립니다. 내 파일 탐색기에서 프로젝트의 루트로 탐색하고 공개 폴더를 드롭 영역으로 끌어다 놓을 것입니다. netlify는 파일을 빌드하여 검사를 위해 생성 된 URL에 배포합니다. Vercel과 거의 동일하게 NetLify는 도메인을 구매하고 배치 할 수 있습니다.

렌더 렌더링에는 CLI 또는 드롭 옵션이 없으며 대신 GitHub 통합을 사용합니다. 인증하려면 github, gitlab 또는 Google 계정이 필요합니다. 인증 및 로그인하면 서비스 섹션에 있습니다. 여기에서 새 정적 사이트를 선택한 다음 이전에 GitHub에 밀어 넣은 프로젝트의 GitHub URL을 입력 할 수 있습니다. 다음 페이지에서 다음 페이지에서 다음 설정을하겠습니다.
이름 : my-gatsby-blog 분기 : 기본값 빌드 명령 : 원사 빌드 게시 디렉토리 : ./public 그런 다음 정적 사이트 만들기를 클릭하십시오 렌더링을 기다린 다음 프로젝트 이름 아래 링크를 클릭하여 사이트가 라이브를 확인하십시오. 렌더 렌더는 사이트에 대한 고유 한 사용자 정의 도메인을 설정할 수있는 옵션도 있습니다!

옵션 Gatsby 플러그인

추가 기능을 추가하기 위해 선택할 수있는 많은 개츠비 플러그인이 많이 있습니다. 더 추가하고 싶다면 이것들을 당신에게 맡길 것입니다. 예를 들면 :
YouTube 동영상, 트윗, Strava Runs, CoodePens 및 Codesandbox를 포함 시키시겠습니까? Gatsby-Plugin-MDX-embed를 확인하십시오 Google/Bing 검색 콘솔을 사용하고 있습니까? 그런 다음 Gatsby-Plugin-Sitemap을 사용하여 사이트 맵을 생성해야합니다 귀하의 사이트를 오프라인으로 PWA로 사용할 수 있습니까? Gatsby-Plugin-Offline을 추가하십시오 사이트의 브라우저 탭에 Favicon을 원하십니까? Gatsby-Plugin-Manifest를 확인하십시오

분석

사이트가 얼마나 인기있는 지 알고 싶다면 분석 옵션이 있습니다. 나는 내 프로젝트에서 잠시 Google 웹 로그 분석 사용을 중단했으며 이제는 더 많은 개인 정보에 초점을 맞춘 대안을 선호합니다. 내가 추천하는 것은 Fathom Analytics입니다. (첫 달 구독에서 10 달러 할인 된 경우 제휴사 링크가 있습니다.) 또 다른 대안은 그럴듯하다.Gatsby 사이트에서 Fathom Analytics를 구현하려면 사이트 헤드에 추가 스크립트 태그를 추가해야합니다. 그게 무슨 뜻입니까? 글쎄, 먼저 Fathom 대시 보드에 사이트를 만들고 https://app.usefathom.com/#/settings/sites로 이동하여 목록 하단으로 스크롤하여 새 사이트를 추가해야합니다 (새 사이트를 추가하십시오. My-Gatsby-Blog), 그런 다음 사이트 코드 얻기를 클릭하십시오. 그런 다음 사이트 코드와 함께 팝업 모달을받습니다. Gatsby 프로젝트의 헤드에 추가 할 대본에는 필요합니다. 스크립트의 모습은 다음과 같습니다

root-wrapper.js의 차이는 다음과 같습니다

랩!

<span>import <span>{ RainbowText }</span> from './components/rainbow';
</span>## <span>A Markdown Heading
</span><span><span><span><RainbowText</span>></span>Wheeeeeeee<span><span></RainbowText</span>></span>
</span>

그게 나에게서 다릅니다. 끝까지 만들어 주셔서 감사합니다. ? 나는 당신이 Gatsby 프로젝트를 처음부터 시작하는 것에 대한이 광범위한 가이드에서 필요한 것을 얻었 으면 좋겠다!

. 당신이 연락을 취하고 인사하고 싶다면, 나를 얻을 수있는 가장 좋은 곳은 트위터에 있습니다.

Gatsby MDX 블로그 <span># create the project directory </span><span>mkdir my-gatsby-blog </span><span># change into the directory </span><span>cd my-gatsby-blog </span><span># initialise a package.json file </span><span>yarn init -y </span><span># initialise the git repo </span><span>git init </span>에 대한 자주 묻는 질문 (FAQ) Gatsby MDX 블로그 게시물에 이미지를 추가 할 수 있습니까?
Gatsby MDX 블로그 게시물에 이미지 추가는 시각적 호소력을 향상시키고 콘텐츠를보다 매력적으로 만들 수 있습니다. 이렇게하려면 이미지 파일을 MDX 파일로 가져와야합니다. 먼저 이미지 파일을 Gatsby 프로젝트의 'SRC'디렉토리에 배치하십시오. 그런 다음 MDX 파일에서 구문을 사용하여 이미지를 가져옵니다. 가져 오면 'ImageName'을 구성 요소로 사용하여 MDX 콘텐츠의 이미지를 사용할 수 있습니다. > Gatsby MDX를 사용하면 블로그 게시물의 레이아웃을 사용자 정의 할 수 있습니다. 'SRC'디렉토리에서 레이아웃 구성 요소를 만들 수 있습니다. 이 구성 요소에는 헤더, 바닥 글 또는 사이드 바와 같은 요소가 포함될 수 있습니다. 레이아웃 구성 요소를 생성 한 후에는 MDX 콘텐츠를 포장 할 수 있습니다. 이렇게하려면 MDX 파일에서 레이아웃 구성 요소를 가져온 다음 컨텐츠를 다음과 같이 감싸십시오. 여기 MDX 콘텐츠 . 블로그 게시물?
Gatsby MDX는 블로그 게시물에 코드 스 니펫을 포함시키는 것을 지원합니다. 코드 스 니펫을 추가하려면 '사전'및 '코드'태그를 사용할 수 있습니다. 코드 스 니펫을 다음과 같은 태그로 랩핑하십시오. 다음과 같은 첫 번째 백 티크 세트 후에 추가하여 구문 강조 표시에 대한 코드 스 니펫 언어를 지정할 수도 있습니다. 목차는 블로그 게시물을 더욱 탐색 할 수있게 할 수 있습니다. Gatsby MDX는 목차 만들기를 지원합니다. GraphQL 쿼리에서 'TableOfContents'필드를 사용하여 목차를 생성 할 수 있습니다. 이 필드는 목차에 중첩 된 목록을 작성하는 데 사용할 수있는 다양한 제목과 해당 깊이를 반환합니다. Gatsby MDX 블로그에 SEO를 추가 할 수있는 방법은 무엇입니까?

SEO는 블로그의 가시성을 높이는 데 중요합니다. Gatsby MDX를 사용하면 블로그 게시물에 SEO를 추가 할 수 있습니다. 'Gatsby-Plugin-React-Helmet'을 사용하여 블로그 게시물의 문서 헤드를 관리 할 수 ​​있습니다. 이 플러그인은 SEO에 중요한 제목, 설명 및 메타 태그와 같은 요소를 추가 할 수 있습니다.

Gatsby MDX 블로그에 Pagination을 추가 할 수있는 방법

Pagination은 사용자 경험을 향상시킬 수 있습니다. 게시물을 쉽게 탐색 할 수 있도록 블로그의 Gatsby MDX는 Pagination을 지원합니다. ‘개츠비가 좋은 불쾌감’플러그인을 사용하여 페이지를 입은 페이지를 만들 수 있습니다. 이 플러그인은 페이지에 대한 페이지 진화소 인덱스와 페이지에 들어간 컨텍스트를 생성합니다.

Gatsby MDX 블로그 게시물에 댓글을 추가하는 방법은 무엇입니까?
댓글 섹션을 추가하면 블로그의 참여가 증가 할 수 있습니다. Gatsby MDX를 사용하면 블로그 게시물에 댓글을 추가 할 수 있습니다. Disqus 또는 CommentO와 같은 타사 서비스를 사용할 수 있습니다. 이 서비스는 댓글을 활성화하기 위해 레이아웃 구성 요소에 포함시킬 수있는 스크립트를 제공합니다.
Gatsby MDX 블로그 게시물에 소셜 공유 버튼을 추가하려면 어떻게해야합니까?
소셜 공유 버튼은 도달 범위를 증가시킬 수 있습니다. 블로그 게시물의. Gatsby MDX를 사용하면 소셜 공유 버튼을 추가 할 수 있습니다. 'Gatsby-Plugin-React-Share'와 같은 플러그인을 사용하여 소셜 공유 버튼을 추가 할 수 있습니다. 이 플러그인은 Facebook, Twitter 및 LinkedIn과 같은 다양한 소셜 미디어 플랫폼을 지원합니다.

Gatsby MDX 블로그에 검색 기능을 추가하려면 어떻게해야합니까?

검색 기능은 사용자의 사용자 경험을 향상시킬 수 있습니다. 특정 게시물을보다 쉽게 ​​찾을 수 있도록 블로그. Gatsby MDX는 검색 기능 추가를 지원합니다. ‘Gatsby-Plugin-elasticlunr search’와 같은 플러그인을 사용하여 검색 기능을 추가 할 수 있습니다. 이 플러그인은 키워드를 사용하여 검색 할 수있는 게시물 인덱스를 만듭니다.

Gatsby MDX 블로그에 뉴스 레터 구독 양식을 추가하려면 어떻게해야합니까?

뉴스 레터 구독 양식을 구축하는 데 도움이 될 수 있습니다. 이메일 목록과 독자를 업데이트하십시오. Gatsby MDX를 사용하면 뉴스 레터 구독 양식을 추가 할 수 있습니다. MailChimp 또는 SendInblue와 같은 서비스를 사용할 수 있습니다. 이 서비스는 뉴스 레터 구독을 활성화하기 위해 레이아웃 구성 요소에 포함시킬 수있는 양식을 제공합니다.

위 내용은 Gatsby 및 MDX로 ​​개발자 블로그를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!