React 블로그 구축 및 배포 10분 이내

안녕하세요.그거 알아요?그는 유행하는 자바스크립트react-redux 라이브러리의 창립자이자 핵심 React 팀의 구성원이다.
본고에서 우리는 10분도 안 되는 시간 내에React,Gatsby와 그 서버 측의 렌더링/graphQL 기능을 사용하여 그의 사이트overreacted.io를 바탕으로 블로그를 만들고 배치할 것이다!

우리의 목표:

선결 조건

시스템에 설치되지 않은 경우node, nodejs.org에 나와 있는 적절한 설치 지침을 따릅니다.

시작합시다!

우리가 해야 할 첫 번째 일은 설치gatsby-cli:

npm i -g gatsby-cli

지금 우리는 이 프로젝트를 시작할 수 있다

gatsby new blazing-fast-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme

이 명령은 프로젝트 템플릿을 복제하고 개발 환경을 준비합니다.
완료되면 애플리케이션을 시작할 수 있습니다.

cd blazing-fast-blog ; gatsby develop

우리의 페이지는 몇 초 안에 시작하고 실행해야 한다.
실행 중인지 확인 - http://localhost:8000
시작 후 여기에서 실행되는 GraphQL 데이터 브라우저 ->http://localhost:8000/___graphql도 빠르게 볼 수 있습니다.
현재는 우리와 무관하지만 개발 과정에서 매우 편리하다. (물론 사이트의 개발 버전에만 적용된다.)
신속한 조정이 필요합니다.

열기gatsby-config.json

이것은 파일입니다. 우리는 우리의 게이츠비 사이트를 설정할 수 있습니다. - 플러그인을 추가하고 설정하거나 사이트 메타데이터를 정의할 수 있습니다.
이제 섹션 title, author 및 description 을 조정할 수 있습니다.
조정 완료siteMetadata 후 열기siteMetadata여기에서 기본 테마 색을 덮을 수 있습니다.src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js 파일 컨텐트 대체:

import merge from "deepmerge"
import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/colors"

const darkBackground = `#282B35`
const darkPrimary = `#F9A6C4`
const lightBackground = `#FFFFFF`
const lightPrimary = `#D23669`

export default merge(defaultThemeColors, {
 primary: lightPrimary,
 lightBackground: lightBackground,
 modes: {
 dark: {
 background: darkBackground,
 primary: darkPrimary,
 },
 },
})

변경 사항을 저장합니다.현재, 탐색 http://localhost:8000 및 overreacted.io 비교
몇 분 일 괜찮죠?우리는 사이트의 진일보한 맞춤형 제작과 개발을 위해 좋은 기초를 다졌다.
편집src/gatsby-theme-blog/components/gatsby-plugin-theme-ui/colors.js 파일을 통해 우리는 개츠비의 주제 음영 개념을 사용했지만 개츠비의 상세한 정보를 알기 전에 우리 사이트를 배치합시다!

배치

사용colors.js - CI/CD 파이핑, SSL, 사용자 정의 도메인, 관리, GitHub와의 통합을 무료로 제공합니다.모든 것이 자동으로 발생합니다. - 저한테는 그들의 무료 계획은 도둑입니다!

사이트의 새로운 버전을 발표하는 과정은 어떤 것입니까?

웹 사이트 편집/새 콘텐츠 만들기

GitHub 저장소로 제출 및 전송

Netlify 검사 신규 제출, 페이지 구축, 테스트 실행 및 원활한 새 버전 배포

우리의 사이트를 배치하는 데 필요한 첫 번째 일은 우리의 GitHub 계정에 새로운 저장소를 만드는 것이다.

이동github.com, 로그인 및 새 저장소 만들기

새 GitHub 저장소를 만든 후 터미널에서 프로젝트 폴더로 이동합니다.
그런 다음 새로 만든 GitHub 저장소로 변경 사항을 전송하고 적절한 사용자 이름과 REPO\u 이름을 사용합니다.

git add . 
git commit -m "Initial structure"
git remote add origin https://github.com/${YOUR_USERNAME}/${REPO_NAME}.git 
git push -u origin master

이제 네비게이션Netlify.com으로 가서 등록하고 로그인할 때입니다.
로그인 후 탐색 Netlify -> Profile
클릭SitesGitHub 선택 및 권한 부여

권한이 부여되면 저장소 목록을 표시해야 합니다.

새 저장소가 보이지 않으면 New site from Git 을 클릭하고 Netlify 저장소에 대한 액세스 권한을 부여합니다.
이 작업이 완료되면 목록에서 저장소를 선택합니다.
다음 단계에서 클릭 Configure the Netlify app on GitHub
이게 다야!1분 후에 당신의 사이트가 시작되고 실행될 것입니다.여기에서 해당 URL을 볼 수 있습니다.

완료 및 배포!

사용자 정의 도메인이 있는 경우 Netlify 시작 두 번째 단계의 지침에 따라 도메인을 사용할 수 있습니다.

결론

이 문장에서 몇 분 후에 우리는 과도한 반응을 창조했다.io는 블로그를 좋아해서 Netlify에 배치합니다.우리는 블로그 맞춤형 제작에 튼튼한 기반을 다졌고 블로그를 유지하는 동시에 React, GraphQL,Gatsby를 배울 수 있습니다.
만약 당신이 이 게시물을 좋아하거나 개츠비와 사이트의 맞춤형/추가 기능에 관한 글을 더 많이 쓰게 하려면 댓글과 좋아요에서 알려주세요.
읽어주셔서 감사합니다!