[Study] React.js + TypeScript로 GitHub Blog 만들기

안녕하세요. 성조입니다.

 

GitHub에서 제공되는 Pages 기능을 활용하여 간단하게 배포해 보는 연습을 해보려 합니다.

이 포스팅에 대해서 댓글로 다양한 방향성 의견을 얘기해 주시는 것은 언제나 환영입니다. 

---

개발 환경

React.js + TypeScript + Vscode + Windows 10 + GitHub

 

 

1. 개인 깃허브 계정으로 접속한다.

https://github.com/

GitHub: Let’s build from here

블로그를 만드는 계정에 로그인 후 새로운 저장소(Repository)를 만들어 준다.

 

 

 

2. Github Blog를 위한 저장소를 생성한다.

2가지 방법을 소개한다.

1. 본인 주소에 들어갔을 때. 우측 상단에 +표시를 누르고, New repository 클릭해서 이동하는 방법이다.

 

2. Repositories를 누르고 New 버튼을 클릭해서 저장소를 생성하는 방법이다.

 

 

다음과 같이 계정이름.github.io를 입력해서 프로젝트를 생성해야 한다.

계정이름.github.io

 

 

Create repository를 클릭해서 생성한다.

 

 

 

아이디와 프로젝트 명이 제대로 작성됐는지 확인한다.

 

 

Clone을 만들어서 프로젝트 구현을 진행한다.

Vscode에서 Git Clone을 활용하여 프로젝트를 생성한다.

terminal을 활용해서 프로젝트를 늘리는 방법도 있다. 하지만 본인은 Vscode를 활용하여 작성하는 것을 선택했다.

 

Github Blog를 작성하기 어려워하는 분들을 위해 지킬(Jekyll)이라는 Ruby 기반의 프레임워크도 존재하므로 참고하면 좋겠다.

 

본인은 지금은 Ruby 보다 JavaScript에 약간의 관심을 가지고 있기 때문에  React.js + TypeScript를 활용한 프로젝트 관리 및 배포를 목표로 진행한다.

 

 

vscode에서 test.html을 간단하게 만들어 본다.

(정석 이름인 index.html로 만드는 것도 약간 권장해 본다.)

이 이렇게 test.html을 간단하게 작성하고 commit을 한다.

제대로 Github blog를 만들 수 있는 프로젝트 명으로 작성했는지 확인용이다.

 

Commit이 완료되고 조금 지나면 다음과 같이 Github Blog라는 문구로 작성된다.

 

 

여기까지 설정하면 제대로 프로젝트가 설정됐다는 의미이다.

 

 

 

 

3. React.js + TypeScript를 활용한 프로젝트 생성

본인은 Vscode를 활용하여 개발할 예정이다.

Vscode에서 프로젝트를 생성하자.

만약 node.js가 설치 안 됐다면 node.js를 설치하고 진행하자.

 

설치 됐다면 다음과 같이 프로젝트 명을 정하고, React.js + TypeScript Project를 생성한다.

npx create-react-app [프로젝트명] --template typescript

 

프로젝트로 이동한다. 본인은 sjblog를 프로젝트 명으로 지정했으므로 cd sjblog를 타이핑해서 이동한다.

cd 프로젝트명

 

생성이 완료됐다면 npm start로 실행되는지 프로젝트가 정상적으로 설치 및 실행되는지 확인할 수 있다.

npm start

 

생성된 프로젝트를 배포하기 위해서는 빌드를 추가적으로 해줘야 한다.

npm run build

모두 진행하면 위와 같은 폴더 형태로 자료들이 생긴다.

 

다음 gh-pages 모듈을 설치한다.

npm install --save-dev gh-pages

 

설치 이후 pakege.json 파일에 들어가서 다음과 같이 수정한다.

[수정 전]

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

[수정 후]

  "homepage": "https://[사용자 이름].github.io/[레포지토리 이름]",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

[본인 예시]

  "homepage": "https://seongjo-seo.github.io/sjblog",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

 

 

모든 값을 입력하고 npm run deploy를 입력하면 빌드되면서 github blog에 배포된다.

npm run deploy

 

빌드 및 배포가 완료되면 Published가 뜨면서 성공한다.

 

다음은 배포 후 화면이다.

정상적으로 배포됐다.

 

 

---

올바르지 못한 내용이나 궁금한 내용이 있다면 언제든지 댓글로 지식을 얘기해 주시면 감사드리겠습니다.

 

부족한 내용일 수 있지만 더 좋은 포스팅 작성할 수 있도록 잘 하겠습니다.

다음 포스팅 때 뵙겠습니다.

 

 

++ 기존에는 React + TypeScript를 통한 개발을 진행하려 했으나 개발 예정인 것이 존재해서 이 포스팅을 기준으로 추가적인 내용이 언급될지는 미지수입니다.

배포하는 경험용 정도로 읽어주셔도 감사드릴 것 같습니다.

 

 

 

참조

https://pages.github.com/

GitHub Pages