깃허브 블로그 만들기 - 깃허브 연동 (2)

게시 2024-03-17

By star1431

4 분 전 읽음

1. 업로드 전 블로그 정보 수정

깃허브 블로그 열기전에 블로그에 대한 정보 수정이 필요합니다.
_config.yml 파일에 블로그 정보들 들어가져 있으니, 여기서 수정하시면 됩니다.

  
lang: ko-KR # 언어 설정 
timezone: Asia/Seoul # 시간대 설정
title: star1431 # 프로필 타이틀
tagline: 코딩은 아주 빡세 # 프로필 타이틀 하단 문구
url: "https://star1431.github.io" # 깃허브 페이지주소

github:
  username: star1431 # 깃허브 아이디
social:
  name: star1431
  email: star1431@naver.com # 이메일주소
  links:
    # - https://twitter.com/username 
    - https://github.com/star1431 # 깃허브 주소
    # - https://www.facebook.com/username
    # - https://www.linkedin.com/in/username


lang	블로그 기본언어 설정하는 옵션입니다. _data/locales/ko-KR.yml 에서 문구 바꿀수있습니다.
timezone	시간대 설정입니다. 한국은 Asia/Seoul
title	왼쪽 프로필사진 하단에 나오는 타이틀 입니다.
tagline	타이틀 하단에 나오는 문구 입니다.
url	깃페이지 바라보는 url 주소 입니다.
social > name	소셜 공통 이름 입니다.
social > email	왼쪽하단 이메일 icon 버튼에 연결되는 이메일주소 입니다.
social > links	왼쪽하단 소셜아이콘들 들어가는 주소입니다.

2. 깃허브 연동하기

_config.yml 파일 수정하셨으면 이제 깃허브에 저장소를 만들고 커밋&푸시를 해야됩니다.

vscode 에서 깃허브 연동

깃허브 연동하기 앞서 저장소에 올릴 폴더 이름을 깃허브아이디.github.io 로 수정 합니다.
(ex: star1431.github.io)
폴더이름 수정 후 vscode 에서 해당 폴더를 열고, 우측하단 계정아이콘 클릭해서 로그인을 합니다.

로그인을 하고나서 ctrl + shift + G 클릭

GitHub에 게시 누르고 허용 클릭하면 vscode 상단에 입력필드 나타나는데, 거기서 Enter 키를 누릅니다.
누르고나서 저장소에 해당 폴더명 그대로 커밋 & 푸시하게 되는데 완료 되면 우측하단에 gitHub에서 열기 버튼이 나타납니다.

열기 클릭 후 이동해보면 저장소에 frist commit 으로 다 올라가져 있을 겁니다.

테마 받을때 .gitignore 에서 이미 노드모듈 등 제외되어 있으니 걱정안하셔도 됩니다.

3. 깃허브 페이지 설정

상단에 설정 (setting) 탭에 가셔서 스크롤 내린 후 Change visibility 클릭해서 저장소 private 상태를 public 으로 변경합니다.

그리고 사이드바 내 pages 탭 클릭후 build 상태를 사진과 같이 GitHub Actions로 변경합니다.
변경 후 Configure 버튼 클릭

아무것도 수정하지 않고 녹색버튼 클릭해서 yml 파일 생성 합니다.
생성 완료 후 https://깃허브아이디.github.io 접속하면 로컬과 동일하게 적용된 모습을 볼 수가 있습니다.