## 포트폴리오 프로젝트 시작
포트폴리오 사이트를 재정비하면서 기존에 쓰던 php를 버리고 깃허브를 사용해 보기 위해 다시 html로 돌아왔다. GUI에 익숙한 디자이너 입장에서 깃허브는 너무나 불친절한 사이트이지만 엄청나게 편리하다는 극찬에 한번 도전해 보기로 했다. 여러번 반복했지만 여전히 복잡한 깃을 사용하면서 내 스스로 사용방법을 잊지 않기 위해 글로 남겨본다. 이게 누군가에겐 또 도움이 될 수 있을지도 모르겠다. 일단 최대한 내 기준으로 남겨본다.
일단 도움을 준 퍼블리셔가 다른 브랜치를 생성해서 내 포트폴리오 사이트를 정리해주었다. 그래서 브랜치를 병합해 사용했다.
# 선행할 것
- VScode 설치
- node.js 설치
- https://github.com/ 회원가입 및 로그인 -> 새로운 레파지토리를 생성(Public)
- Git 설치 https://git-scm.com/downloads
- gulp 설치(깃 연결 후)
# Git
1. 현재 사용하고 있는 환경에 작업할 폴더를 생성
2. 마우스 우클릭 Git Bash 실행
3. git init 등 최초 설정 및 기본 제공 명령어 작성
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/(내주소).git
git push -u origin main4. git clone (내 주소).git 입력해서 내 프로젝트를 다운받기
(이미 만들어 놓은 레파지토리 안의 데이터를 불러오는 작업)
git remote add origin https://github.com/no1jhk/jhk.git
5. 터미널 상태에서 code .을 입력 -> 자동으로 vscode 가 실행됨
# VSCode
1. 플러그인 설치
- Live Server
- Git Graph
- Auto Rename Tag
- EJS Language Support
- ESLint
2. 데이터 불러오기
- 퍼블리셔가 만든 브랜치에 내가 받을 자료가 있기 때문에 프로그램 하단에 main 상태로 된 브랜치를 DJ(퍼블리셔)로 바꿔준다
- 공유 아이콘 클릭 후 상단 점3개 (...) 버튼-> pull 클릭 -> DJ 브랜치에 있는 데이터를 아까 생성한 폴더로 끌어온다. (이게 브랜치의 개념...- > 다시 메인 브랜치로 돌리면 폴더 안에 데이터가 기존 것으로 바뀌어 있다. readme 등 )
- 소스를 수정했다면 어떤 수정이었는지 간단한 메세지와 함께 Commit 버튼 - > Sync Changes
3. glup 설치
- ctrl + ` 누르면 하단에 터미널 입력창 생김
- 창 우측에 화살표 버튼 클릭 -> 기본값이 powerShell 인데 Git Bash로 변경해주기
- (ctrl + shift + p 누르고 default 로 들어가 기본값을 git bash로 수정가능 + 메뉴에서 고치는게 더 편하다.)
- 걸프 설치
- - npm i
- - npm i -g gulp (글로벌? 최초 한번만 하면 되는듯)
- - gulp bs (브라우저 싱크 - 이 명령어를 입력하면 작업된 사이트를 크롬에서 확인할 수 있다.)
생성된 root 폴더 내 dev_html 안에서 작업하기
dev_html 에서 작업하면 알아서 최상단 root에 파일 생성됨 이게 라이브되는 것.
※ 수정은 반드시 dev_html에서 해야함, root에 만들어진 파일은 수정해봐야 반영 안됨
code-workspace 파일을 클릭하면 자동으로 VSCode 프로그램이 열림.
반응형
댓글