React 블로그 구축 및 배포 10분 이내
7348 단어 reactwebdevbeginnersjavascript
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 저장소로 변경 사항을 전송하고 적절한 사용자 이름과 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

클릭
Sites
GitHub 선택 및 권한 부여
권한이 부여되면 저장소 목록을 표시해야 합니다.

새 저장소가 보이지 않으면
New site from Git
을 클릭하고 Netlify 저장소에 대한 액세스 권한을 부여합니다.이 작업이 완료되면 목록에서 저장소를 선택합니다.
다음 단계에서 클릭
Configure the Netlify app on GitHub

이게 다야!1분 후에 당신의 사이트가 시작되고 실행될 것입니다.여기에서 해당 URL을 볼 수 있습니다.

완료 및 배포!

사용자 정의 도메인이 있는 경우 Netlify 시작 두 번째 단계의 지침에 따라 도메인을 사용할 수 있습니다.
결론
이 문장에서 몇 분 후에 우리는 과도한 반응을 창조했다.io는 블로그를 좋아해서 Netlify에 배치합니다.우리는 블로그 맞춤형 제작에 튼튼한 기반을 다졌고 블로그를 유지하는 동시에 React, GraphQL,Gatsby를 배울 수 있습니다.
만약 당신이 이 게시물을 좋아하거나 개츠비와 사이트의 맞춤형/추가 기능에 관한 글을 더 많이 쓰게 하려면 댓글과 좋아요에서 알려주세요.
읽어주셔서 감사합니다!
Reference
이 문제에 관하여(React 블로그 구축 및 배포 10분 이내), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pjeziorowski/react-graphql-blog-done-deployed-in-10-minutes-19ff텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)