Gatsby 블로그를 구축하고 호스팅하는 방법

Gatsby: Orbiter로 블로그 구축 및 호스팅을 위한 초보자 가이드

React를 기반으로 구축된 선도적인 정적 사이트 생성기인 Gatsby는 동적 웹사이트를 만드는 과정을 단순화합니다. 2015년 오픈 소스 프로젝트로 출시된 이 프로젝트는 2023년 Netlify에 인수되어 이제 개발자들에게 인기 있는 선택이 되었습니다. Netlify는 강력한 호스팅을 제공하지만 Orbiter는 Gatsby 사이트를 위해 특별히 설계된 더 간단하고 사용자 친화적인 대안을 제공합니다. 이 튜토리얼은 Orbiter에서 기본 Gatsby 블로그를 구축하고 배포하는 과정을 안내합니다.

시작하기: 전제 조건 및 프로젝트 설정

시작하기 전에 다음 사항을 확인하세요.

1. 무료 Orbiter 계정(가입은 간단합니다).
2. Node.js v18 이상(아직 설치하지 않은 경우 쉽게 다운로드 가능)
3. 코드 편집기(VSCode, Zed 또는 선호하는 선택).

터미널을 열고 프로젝트 디렉토리로 이동하세요.

<code class="language-bash">cd my-projects-folder</code>

사용 편의성을 위해 사전 제작된 Gatsby 블로그 템플릿을 활용하겠습니다. 터미널에서 다음 명령을 실행하세요:

<code class="language-bash">npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog</code>

이렇게 하면 프로젝트가 초기화되고 필요한 종속성이 설치됩니다. 그러면 터미널에 다음과 유사한 추가 지침이 표시됩니다.

<code>  cd gatsby-starter-blog
  gatsby develop</code>

다음 지침을 따르세요. 먼저 디렉터리를 변경하세요.

<code class="language-bash">cd gatsby-starter-blog</code>

그런 다음 로컬 개발 서버를 시작합니다.

<code class="language-bash">gatsby develop</code>

http://localhost:8000에서 블로그에 액세스하세요. 자리 표시자 게시물이 포함된 샘플 블로그를 볼 수 있습니다.

블로그 맞춤설정

코드 편집기에서 프로젝트를 열고 gatsby-config.js을 찾으세요. 이 파일에는 사이트 메타데이터가 포함되어 있습니다. 블로그 세부정보를 반영하도록 siteMetadata 섹션을 수정하세요. 예를 들면 다음과 같습니다.

<code class="language-javascript">siteMetadata: {
  title: `My Gatsby Blog`,
  author: {
    name: `Your Name`,
    summary: `Your brief bio`,
  },
  description: `A description of your blog`,
  siteUrl: ``, // Leave blank initially, or use your future Orbiter URL
  social: {
    twitter: `yourTwitterHandle`,
  },
},</code>

변경사항을 저장하세요. 브라우저가 자동으로 업데이트됩니다. 기본 작성자 이미지(src/images/profile-pic.png)를 자신의 이미지로 바꾸세요.

다음으로 content/blog 폴더로 이동하세요. 불필요한 자리 표시자 게시물을 삭제하고 하나만 남겨 둡니다. Gatsby는 각 게시물이 my-first-post 파일과 관련 자산index.md을 포함하는 폴더(예:

)인 폴더 구조를 사용한다는 점을 기억하세요.

나머지 index.md 파일을 편집하여 콘텐츠를 추가하세요. Markdown 구문(또는 WYSIWYG 편집기)을 사용하세요. 게시물 제목과 설명을 조정하려면 머리말(상단의 YAML 섹션)을 업데이트하세요.

저장 후 변경사항은 http://localhost:8000에 반영됩니다.

Orbiter에 블로그 배포

만족스러우면 사이트를 구축하세요.

<code class="language-bash">npm run build</code>

이렇게 하면 public 폴더에 필요한 파일이 생성됩니다.

Orbiter 계정에 로그인하고 "사이트 업로드"를 클릭하세요. public 폴더를 선택하세요. 사이트의 하위 도메인을 선택하고 "만들기"를 클릭하세요. 귀하의 블로그가 곧 활성화됩니다!

사이트를 업데이트하려면 재구축(npm run build)한 다음 Orbiter에서 기어 아이콘을 클릭하고 "사이트 업데이트"를 선택한 다음 업데이트된 public 폴더를 업로드하세요.

결론

Gatsby는 특히 블로그의 정적 사이트 생성을 단순화합니다. Orbiter를 사용하면 배포가 매우 쉬워집니다. 오늘부터 Gatsby 블로그 구축을 시작하세요! 내 예시 사이트는 [귀하의 Orbiter URL]에서 확인할 수 있습니다. 이 자리 표시자를 실제 사이트 URL로 바꾸십시오.

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