@allamgr/portafolio 라이브러리를 사용하여 React로 JSON 파일에서 개인 웹사이트를 구축하고 GitHub 페이지에 게시하시겠습니까?

안녕하세요, 개발자/디자이너를 대상으로 하는 여기 Dev에 대한 제 첫 번째 기사가 될 것입니다. 이 기사가 도움이 되었기를 바라며 공유하거나 의견을 남기고 싶다면.

제목에서 말했듯이 이것은 개인 GitHub 페이지에서 React로 구축된 개인 포트폴리오 웹 사이트를 갖고 싶어하는 사람들을 위한 튜토리얼이 될 것입니다.


이 블로그의 목적:

React로 개인 포트폴리오를 만들고 @allamgr/portafolio

gh-pages를 사용하여 GitHub 페이지에 게시합니다.

1단계 - React 앱 생성 및 @allamgr/portafolio 추가

참고: 사용자 이름을 Github 사용자 이름으로 바꾸세요.

원하는 디렉토리로 cd하고 명령줄에서 다음을 실행합니다.

$ npx create-react-app username.github.io

그런 다음 생성된 앱으로 cd합니다.

$ cd username.github.io

그런 다음 @allamgr/portafolio 라이브러리를 설치합니다.

# using npm
$ npm install --save @allamgr/portafolio

# or using yarn
$ yarn add @allamgr/portafolio

그런 다음 GitHub 페이지에 웹 사이트를 게시하는 데 필요한 대로 gh-pages를 설치합니다.

# using npm
$ npm install --save gh-pages

# or using yarn
$ yarn add gh-pages

그런 다음 package.json 섹션 아래에 다음 스크립트를 포함하도록 scripts 파일을 편집합니다.

"scripts": {
    ...,
    "push": "gh-pages -b gh-pages -d build"
}

2단계 - 필요한 정보가 포함된 JSON 파일을 생성하고 포트폴리오를 렌더링합니다.

다음 형식으로 cv.json 폴더 아래에 src라는 JSON 파일을 만들고 필요에 따라 정보를 변경합니다.

{
   "personalInfo": {
      "name": "👨‍💻 Name",
      "position": "Position",
      "brief": "Brief.",
      "email": "firstpartemail",
      "emailDomain": "domain.com",
      "location": "Azgard",
      "gender": "Male",
      "github": "username",
      "linkedin": "username",
      "twitter": "username"
   },
   "educationInfo": {
      "data": [
         {
            "school": {
               "name": "Name",
               "logoUrl": "https://logo.url/image.png",
               "acronym": "ACRONYM",
               "location": "Azrgard",
               "url": "https://azgard.edu.space"
            },
            "degree": "Thor Technology Assistant",
            "startYear": 2013,
            "endYear": 2017
         }
      ]
   },
   "workExperience": {
      "data": [
         {
            "company": {
               "name": "Advengers",
               "logoUrl": "https://advengers.image/image.png",
               "url": "https://www.advengers.end"
            },
            "title": "Time Traveller",
            "startYear": 2019,
            "startMonth": 12,
            "current": true,
            "description": "Working hard to get a seat in the table"
         }
      ]
   },
   "skillsAndTech": {
      "technologies": [
         {
            "name": "Javascript",
            "level": "advanced"
         },
         {
            "name": "CSS",
            "level": "advanced"
         },
         {
            "name": "React",
            "level": "advanced"
         },
         {
            "name": "Node.js",
            "level": "advanced"
         },
         {
            "name": "SQL",
            "level": "intermediate"
         },
         {
            "name": "MySQL",
            "level": "I"
         },
         {
            "name": "Typescript",
            "level": "I"
         }
      ]
   },
   "portfolio": {
      "projects": [
         {
            "name": "Save Hulk",
            "desc": "Create a suit for protect the people from hulk",
            "stack": [
               "react",
               "redux",
               "sass",
               "azure"
            ],
            "startYear": 2019,
            "endYear": 2020
         }
      ]
   }
}

이 경우 VSCode에서 코드 편집기를 열고 App.js 및 App.css에서 기존 코드를 삭제합니다.
App.css 파일로 이동하여 다음 콘텐츠를 설정합니다.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

a {
  text-decoration: none;
}

App.js 파일로 이동하여 다음 내용을 입력합니다.

참고: 이 자습서에서는 사용 가능한 유일한 기본 템플릿인 TemplateLean를 사용합니다.

import './App.css';
import { TemplateLean } from '@allamgr/portafolio'
import jsonData from './cv.json';

function App() {

  let json = JSON.stringify(jsonData);
  return (
    <div className="App container">
      <TemplateLean json={json}/>
    </div>
  );
}

export default App;

앱을 실행하고 모든 것이 잘 작동하는지 확인합니다.

# using npm
$ npm run start

# or using yarn
$ yarn start

예상 결과 예:

3단계 - GitHub 리포지토리 생성

The following info was taked from https://pages.github.com/

create repository 페이지로 이동하여 username.github.io라는 새 공개 리포지토리를 생성합니다. 여기서 username은 GitHub의 사용자 이름(또는 조직 이름)입니다.

저장소의 첫 번째 부분이 사용자 이름과 정확히 일치하지 않으면 작동하지 않으므로 올바르게 지정해야 합니다.

오류를 방지하려면 README, 라이선스 또는 .gitignore 파일로 새 리포지토리를 초기화하지 마십시오. 프로젝트가 GitHub에 푸시된 후 이러한 파일을 추가할 수 있습니다.

아래 이미지를 참조하십시오.

4단계 - git을 초기화하고 원격 원본을 로컬 저장소에 추가합니다.

Git Bash를 엽니다.

현재 작업 디렉토리를 로컬 프로젝트로 변경합니다.

로컬 디렉토리를 Git 저장소로 초기화하거나 이미 초기화된 경우 main 분기로 체크아웃합니다.

# run if git is not initialized
$ git init -b main
# run if git is already initialized
$ git checkout -b main

새 로컬 저장소에 파일을 추가합니다. 이것은 첫 번째 커밋을 위해 준비합니다.

로컬 저장소에 준비한 파일을 커밋합니다.

$ git commit -m "First commit"

GitHub 리포지토리의 빠른 설정 페이지 상단에서 클릭하여 원격 리포지토리 URL을 복사합니다.

명령 프롬프트에서 로컬 저장소를 푸시할 원격 저장소의 URL을 추가합니다.

$ git remote add origin  <REMOTE_URL> 
# Sets the new remote
$ git remote -v
# Verifies the new remote URL

로컬 저장소의 변경 사항을 GitHub에 푸시합니다.

$ git push origin main
# Pushes the changes in your local repository up to the remote repository you specified as the origin

5단계 - 포트폴리오 구축 및 게시

포트폴리오를 구축하려면 다음 명령을 실행하십시오.

# using npm
$ npm run build

# or using yarn
$ yarn build

포트폴리오를 게시하려면 다음 명령을 실행하십시오.

# using npm
$ npm run push

# or using yarn
$ yarn push

GitHub 페이지 설정으로 이동하여 소스 분기로 gh-pages를 선택합니다.
새 설정을 저장합니다.

축하합니다

5단계만 거치면 개인 포트폴리오 웹사이트를 만들 수 있습니다.

GitHub 페이지 작동 방식에 대한 자세한 내용은 this link을 참조하십시오.
allamgr/portafolio에 대한 자세한 내용은 this link을 참조하십시오.

시간 내주셔서 감사합니다. 이 튜토리얼이 도움이 되었기를 바랍니다.

Buy me a pizza

원본 게시일: allamgr.hashnode.dev