본문 바로가기

개발/Etc.

[GitHub Pages 1] 깃허브 블로그 만들기

반응형

네이버, 티스토리, 벨로그 등 여러가지 블로그들을 경험하고 운영해왔지만 개발자라면 역시 관심을 가질 수 밖에 없는 GitHub Blog,
정확히는 GitHub Pages를 경험하고 싶어졌다.
다른 블로그들과는 다르게 개설하는 것 부터 어려움의 연속이기 때문에 첫 게시글로 그 어려움을 순차적으로 공유해보려고 한다.

환경 : Windows 10 Pro

1. Git 설치

GitHub Blog는 기본으로 GitHub의 Repository를 이용하기 때문에
운영을 위해 필수로 설치해야 하는 것 중 하나다.

1) https://git-scm.com/download 접속

  • 링크 접속 후 각자의 환경에 맞는 OS를 클릭 (필자의 경우 Windows)
  • 20240405_111300

2) Git Installer 다운로드

  • 최신버전 다운로드
  • 20240405_111836

3) 설치 및 확인

  • 설치는 변경 없이 기본으로 Next 버튼과 OK버튼만 활용해서 끝내버렸다.
  • 버전을 명령어로 정상적으로 출력되는지 확인
  • 20240405_112054
git -v

2. GitHub 가입 및 Repository 설정

1) GitHub 가입

  • https://github.com 에서 일반적인 가입 절차를 따르면 되는데 아래 이미지의 username이 블로그의 주소가 된다. (가입 후 변경 가능)
  • 20240405_163711

2) Repository 설정

  • GitHub에 로그인 후 대시보드에서 New 버튼을 클릭
  • 20240405_110457
  • Repository name은 [username].github.io로 입력하고 Add a README file을 체크
  • 20240405_110905

3. Repository 복제 및 테스트 페이지 제작

1) 개발 환경으로 Repository 소스 복제하기

  • 생성한 Repository 화면에서 Code 버튼을 클릭 후 주소를 복사
  • 20240405_112332
  • 명령 프롬프트(cmd)를 열어서 복제할 위치로 이동 (필자의 경우 C:\workspace)
cd C:\workspace

 

  • Repository 소스 복제
  • 20240405_112458
git clone [복사한 Repository 주소]

 

  • 복제가 완료되면 Repository의 이으로 폴더가 만들어진다.
  • 20240405_112725

2) 테스트 페이지 제작

  • 내려받은 소스 경로에 index.html 파일 생성
  • 20240405_140225
  • index.html 내용 수정 (이해를 돕기위한 내용이므로 간단하게 텍스트만 입력해도 좋다)
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
   		런:디벨:런
  </body>
</html>

 

4. 수정사항 반영

1) Repository에 소스 업로드하기 (push)

  • git 명령어를 사용해서 GitHub Repository에 소스를 push한다.
  • 20240405_140740
git add --all
git commit -m "테스트 페이지 제작"
git push origin main

2) 정상 확인

  • 자신의 블로그 주소로 접속해서 정상 반영 확인
  • 20240405_140923

 

 

다른 블로그였다면 가입하고 테마를 선택하고 관리 기능을 사용해서 글을 쓰면 끝인데 모두 수동으로 해줘야하는게 어지만 뿌듯한 마음이 든다.
다음 포스팅에서는 jekyll을 활용한 테마를 적용하는 방법을 작성해봐야겠다.

반응형