개발 블로그를 만들기에 앞서 깃블로그 github.io와 velog 중에서 굉장히 많은 고민을 했습니다.
깔끔하고 예쁘고 단순하기로는 벨로그도 좋지만 왜인지 깃허브 블로그가 너무 땡기더라구요 :)
코드를 작성하기 때문에 굉장히 번거로운 느낌이 들지만...
경험해보는 것도 나쁘진 않을 것 같아서였습니다...?
그럼 시작할게요.
⚠️ 많은 시행착오 주의...
깃허브 레파지토리(저장소) 만들기
제 블로그를 찾아 방문할 정도면 깃허브 회원가입 정도는 되어있으리라 봅니다.
깃허브 레파지토리란 저장소라고 해서 작게는 코드 조각부터 크게는 프로젝트 단위로 저장하는 폴더라고 생각하시면 돼요.
레파지토리, 리포지토리 등 발음에 따라 여러 방법으로 불리우는데 저는 편하게 저장소라고 하겠습니다 :)
로그인을 한 후 깃허브에서 우측 상단의 프로필을 누르시고 your repositories를 눌러주세요.
영어로 된 사이트고, 뭐가 많아도 걱정하지 마세요.
저장소 만드는 방법은 정말 간단하답니다.
owner - 저장소 주인 계정repository name - 저장소의 이름. 공식 가이드에서 저장소 이름은 계정명.github.io로 설정하는 것을 권장합니다.description - 저장소 설명public and private - 저장소 공개 범위
이 정도로만 세팅하면 되겠습니다.
add a README file에도 체크해주세요.
여기서 리드미 파일이란, 파일이나 프로젝트에 대한 정보를 포함하는 파일로 알고 계시면 되겠습니다.
마지막으로 Create repository 를 클릭해서 저장소를 생성해주세요.
간단하게 생성이 완료 되었습니다.
이제 생성이 완료된 저장소를 clone 해볼게요.
깃 클론 git clone
말 그대로 클론(복제)입니다.
깃허브 사이트를 이용해서 만든 저장소를 내 로컬인 본인의 PC에다가 옮기는 것이죠.
옮긴 다음 이렇게 저렇게 작업하고, 테스트해서 최종 결과물을 남들이 볼 수 있는 웹 사이트로 올릴 수 있도록
로컬에서 작업하는 환경을 구축하는 겁니다.
저장소 우측 상단의 code를 누르고 HTTPS URL을 복사해주세요.
옆의 버튼을 누르면 쉽게 복사가 가능합니다.
그 다음 맥북을 사용하시는 분은 터미널, 윈도우를 사용하시는 분은 명령 프롬프트(windows 11 기준으로는 윈도우 터미널)을 열어주세요.
저는 커스터마이징을 해서 화면이 다를 수 있습니다 :)
다음에 커스터마이징 포스팅도 올릴게요.
이제 터미널을 통해서 저장소를 복제할건데요, 먼저 클론하기를 원하는 폴더로 이동해야 해요.
터미널의 경우 UI를 제공하고 있지 않아서 명령어를 통해서만 조작이 가능합니다.
마우스나 키보드로 아이콘을 누르는 등의 작업을 할 수가 없어요.
예를 들어, 바탕화면에서 마우스로 문서 폴더를 열고 메모장을 읽는 것도 모두 명령어를 통해서 이동하고, 파일을 열어야 해요.
가볍게 설명할테니 잘 따라와주세요!
참고로 코드 조각 안에서 슬래쉬 두 개//는 주석입니다.
명령어를 칠 때 주석은 제외하고 쳐주세요.
예를 들면 아래 첫 줄의 명령어는 cd ~만 치면 됩니다.
cd ~ // 사용자의 홈 디렉토리로 이동
cd Documents // 현재 위치(홈 디렉토리)에서 다음 위치(Documents)로 이동
cd는 위치를 이동할 수 있는 명령어입니다.
이 명령어를 통해 깃허브 블로그라는 프로젝트를 관리할 폴더로 이동해주세요.
저의 경우엔 Documents/\_study/github.io로 선택했습니다. 폴더는 어디가 되든, 이름이 무엇이든 자유예요!
마지막 폴더 이름도 꼭 github.io가 될 필요는 없습니다 :)
클론할 위치로 이동을 완료했다면 아래 명령어를 쳐주세요.
git clone https://github.com/youngdev57/youngdev57.github.io.git // 복사한 저장소 클론 주소
git clone 후에 복사한 주소를 입력하고 치면 복제가 진행됩니다.
클론 작업이 끝나면,
만든 저장소의 깃프로젝트가 자동으로 생성되어 있네요!
잘하셨습니다.
안에는 아까 저장소 생성 때 체크를 해서 만들어진 README.md 파일이 있습니다.
index.html 파일은 없을 거예요. .. 제가 캡쳐를 이후에 해서...
로컬(내 PC)과 깃허브의 연동은 성공적으로 끝났습니다.
이제 해당 폴더는 저장소에게 감시 받게 되고, 파일이 변경되는 것을 감지할 수 있어요.
index.html 파일 생성
지금 저장소에는 현재 리드미 파일 빼고 아무것도 없기 때문에 이제 눈으로 볼 수 있는 웹 페이지를 만들어야 합니다.
지금 만들 index.html 파일은 깃 블로그의 기준이 될 페이지라고 가볍게 생각하시면 되겠습니다.
아까 배운 cd 명령어를 통해 방금 생성된 저장소 폴더로 들어가서
바로 아래 명령어를 쳐주세요.
echo "Hello World" > index.html
echo는 문자열을 출력해주는 명령어라고 생각하시면 됩니다.
여기서 출력된 문자를 \> 기호로 index.html 이라는 파일에 데이터로 넣겠다는 뜻입니다.
그리고 나서는 push를 해줄건데요.
푸시는 변경된 파일이나 코드를 저장소에 밀어넣어서, 변경 사항을 업데이트 해주는 작업이랍니다.
git add --all
git commit -m "Initial commit"
git push -u origin main
모든 변경 사항을 업데이트하고 메세지를 남긴 작업입니다.
자세한 설명으로는 git 기초에 대해서 참고하시면 좋을 듯 해요 :)
자 이제, 새로고침하면 index.html 파일을 저장소에서도 확인할 수 있네요.
커밋 메세지도 아주 잘 들어갔습니다.
해당 파일이 있단 뜻은, 직접 웹 사이트에 들어가서 볼 수 있다는 뜻이니 이제 저희가 설정한 주소로 접속해볼까요?
오타는 꼼꼼히 체크하자.
보통은 잘 들어가질 텐데요.
저는 에러가 났네요 :) ...
저장소 이름을 잘 보니 youngdev57.github.io 가 아닌 youngdev.57github.io 입니다. ㅠㅠㅠ
57 뒤에 점.을 붙여야 하는데, 앞에다가 붙였네요.
다시 만들고 나서, 위의 작업을 그대로 실행하니...
조금 휑하지만 만들어졌습니다.
아까 적은 hello world도 잘 들어가있네요.
이게 블로그라고...? 싶지만,
테마 적용까지 하면 그럴싸한 블로그가 탄생할거예요.
오늘 한 작업은 아주 간단한 작업이지만 아무래도 처음 접하는 사람들에게는
생각보다 번거로울 순 있어요. 모두모두 고생하셨습니다.
원래는 테마 적용까지 해보려고 했는데, 글이 생각보다 길어지네요. 😃
이어서 돌아오겠습니다!
