GitHub 페이지에 Gatsby 사이트 배포

Gatsby 화려하고 사용하기 쉬운 프레임워크 뒤에 있는 놀라운 팀 덕분에 지금은 대세입니다. 정적 웹 사이트를 구축하는 경우 Gatsby를 사용해야 하는 이유에 대해서는 자세히 설명하지 않겠습니다. 라고 하는 글이 엄청나게 많습니다.

여기에 이유에 대한 훌륭한 기사가 있습니다 - Why you should use GatsbyJS to build static sites

이것이 나의 가장 큰 이유입니다.

놀라운 개발 경험

미리 구운 최적화

생성된 사이트가 매우 빠름

GraphQL에 대한 기본 지원

어디서나 Gatsby 사이트 배포

Gatsby는 정적 파일을 생성하므로 어디에나 배포할 수 있습니다.
그러나 가장 쉽고 빠른 옵션은 사이트를 GitHub Pages 에 배포하는 것입니다.

GitHub 페이지

GitHub Pages를 사용하여 정적 웹사이트를 무료로 호스팅할 수 있습니다. GitHub 페이지에서 호스팅되는 두 가지 유형의 웹 사이트를 가질 수 있습니다.

개인 웹 사이트 - Repo 이름은 username.github.io이어야 하며 사이트는 https://username.github.io에서 액세스할 수 있습니다.

프로젝트 웹 사이트 - Repo 이름은 무엇이든 될 수 있으며 사이트는 https://username.github.io/repo-name에서 액세스할 수 있습니다.

루트 디렉토리에서 index.html를 사용하여 정적 사이트를 저장소로 푸시하기만 하면 됩니다.

자세한 정보는 여기 - GitHub Pages

GitHub 페이지에 Gatsby 사이트 배포

Gatsby는 명령gatsby build을 실행할 때 정적 사이트를 생성합니다.

여기서 주의할 점은 GitHub 페이지에서는 사이트 파일이 루트 디렉터리에 있을 것으로 예상하지만 Gatsby는 public 라는 디렉터리에 사이트 파일을 생성한다는 점입니다. 따라서 소스 코드와 공개 파일을 동일한 리포지토리에 호스팅할 수 없습니다.

gh-pages은 정적 사이트를 어디서나 GitHub 저장소로 푸시하는 데 도움이 되는 정말 좋은 패키지입니다.

단계

yarn add gh-pages --dev

프로젝트 루트에 새 dirscripts을 만들고 deploy-github.js dir

에 파일scripts을 만듭니다.

이 코드를 deploy-github.js에 추가하십시오.

const ghpages = require('gh-pages')

// replace with your repo url
ghpages.publish(
  'public',
  {
    branch: 'master',
    repo: 'https://github.com/flexdinesh/flexdinesh.github.io.git',
  },
  () => {
    console.log('Deploy Complete!')
  }
)

deploy:github에 새 npm 스크립트package.json를 추가합니다.

"deploy:github": "npm run build && node ./scripts/deploy-github"

스크립트를 실행하면 정적 사이트가 몇 초 안에 시작되어 실행됩니다.

참고: 명령을 실행하면 게시하기 전에 명령줄에 GitHub 자격 증명을 입력하라는 메시지가 표시됩니다.

더 많은 자료가 필요하시면 제 개인 홈페이지Dinesh Pandiyan - Portfolio의 소스코드를 보시면 됩니다.Netlify와 Github 페이지 모두에 배포됩니다.

좋은 Gatsby 스타터 템플릿을 찾고 있다면 미리 구운 웹 설정으로 상용구를 유지 관리합니다 - Gatsby Boilerplate . 나는 새로운 Gatsby 사이트로 시작하고 싶다면 보통 이 리포지토리를 포크합니다.

행복한 개츠비잉! 🔥