같은 학원에 다니는 동기 동생 블로그를 보다가 깃허브 블로그를 만들었길래 바~~ 로 따라서 만들어 봤다. 나두 멋있게 포트폴리오 만들고 싶어...
[깃헙 블로그란]
정식 명칭은 Github page라고 한다. Github 저장소에 저장된 html, css, js 등 정적 웹 문서들을 Github에서 무료로 웹에서 볼 수 있도록 호스팅 서비스를 제공해 주는 것이라고 정의되어 있다. 이걸로 이제 내가 잘 꾸며서 포트폴리오처럼 제출하는 게 최종 목표~
[개설 과정]
Github 블로그는 Github Page, Jekyll(지킬), Ruby(루비)가 필수로 필요하다. Jekyll이 Ruby로 만들어졌기 때문에 Github page -> Ruby -> Jekyll 순으로 진행 해 보려고 한다.
[Repository 만들기]
새 리파지토리를 만들어준다. Repository 이름은 username.github.io 형태로 만들어 준다. Readme.file 까지 야무지게 체크 해주고 create를 눌러준다.
이렇게 새 리파지토리가 생성 된 것을 확인할 수 있다.
[Github page 확인]
리파지토리가 생성 되었다면 해당 리파지토리로 들어와서 Setting -> pages -> Visit site를 눌러 사이트가 잘 생성되었나 확인한다.
주소도 내가 만든 깃허브 이름으로 잘 적용 된 것을 볼 수 있다.
[Github Desktop과 VSCode 설치]
두 개를 설치한다.
[Repository Clone]
Github Desktop을 실행하여 Clone repository를 진행한다.
방금 만든 Repository를 클릭하고 Choose를 클릭하여 원하는 곳을 선택한다.
Clone 클릭 후 내가 지정해 주었던 Local path에 해당 파일이 잘 들어온 것을 확인할 수 있다.
[VSCode 실행]
clone 까지 끝이 났다면 이렇게 Current repository와 Current branch 가 바뀐 것을 확인할 수 있다. VSCode를 클릭해 열어보자~
VSCode가 열리면 이렇게 아까 만들어 놓았던 README파일이 들어있다. 잘되었나 확인 해야하니까 리파지토리에 index.html을 생성하고 아무 말이나 써본다.
<html>
<body>
첫페이지쓰~~~
</body>
</html>
그러면 Github Desktop에 이렇게 changes 에 방금 생성한 index 파일이 들어있고 오른쪽에는 작성한 내용이, 밑에는 Commit to main 버튼이 보일 것이다.
Commit to main을 누르고 Push origin을 눌러주면 끝!
자신의 리파지토리 이름을 크롬에 찍어보면 쨘- index 페이지에 적어 둔 내용이 잘 나온다.
'git' 카테고리의 다른 글
Git 자주 발생하는 오류 정리 feat. 깃허브 403 에러 (0) | 2023.08.05 |
---|---|
[Git] 소스트리(Sourcetree)로 Back 과 Front를 함께 관리하기 (2) (0) | 2023.08.04 |
[Git] 소스트리(Sourcetree)로 Back 과 Front를 함께 관리하기 (1) (0) | 2023.08.03 |
나만의 Git hub blog 만들기 aka. github.io - Jekyll Theme 적용 (0) | 2023.07.19 |
나만의 Git hub blog 만들기 aka. github.io - Ruby & Jekyll (0) | 2023.07.18 |