YUMIN KIM

준비물

깃허브 계정
깃

블로그 레포 생성하기

본인 레포지토리에 들어가 NEW 버튼을 누릅니다.

그러면, 아래와 같이 Create a new repository 라는 문구와 함께 레포지토리를 생성할 수 있는 화면에 들어오게 됩니다.

Repository name: 말 그대로, 레포지토리 이름을 정하는 겁니다. username.github.io 형태로 써줍니다.
Public/Private : 사람들에게 공개할 것이냐 말 것이냐는 건데, 블로그를 생성하는 목적은 대부분 다른 사람에게 보여주기 위해서이므로, public에 체크합니다.
Add a README file: 레포에 대한 간단한 소개를 담을 수 있는 Markdown 파일입니다. README file을 추가해서 이 레포가 대충 어떤 건지 소개를 적을 수 있도록 합니다.
Add .gitignore : 로컬과 원격 사이에서 파일을 주고 받을 때, .gitignore에 명시되어 있는 파일이나 디렉터리는 git에 추가가 되지 않게 합니다. 다른 개발 과정에서 필요한 것이므로 그냥 나둡니다.
Choose a license :license는 말 그대로 글에 저작권을 두고 사용범위를 지정하는 건데, 그냥 나둡니다.

Create repository 버튼을 눌러줍니다.

그러면 아래와 같이 레포지토리가 생성됩니다.

이 상태에서 바로 블로그에 들어갈 수도 있습니다.

https:username.github.io 로 들어가면 생성된 홈페이지를 확인할 수 있습니다.

[##_Image

kage@Sys4m/btr9pYeIWMA/M9wFRtUkAgmTpe3a2z7fy1/img.png

CDM

1.3

{“originWidth”:1910,”originHeight”:739,”style”:”alignCenter”,”width”:651,”height”:252,”caption”:”유일한 정적파일인 readme를 그대로 읽어온 걸 확인할 수 있습니다.”}_##]

근데 뭐 아무것도 없죠?

일단 첫 시작을 알리기위해서 html파일을 넣어서 웹 화면에 띄울 계획입니다.

일단 레포에 파일을 올리기 위해서 레포지토리를 원격에서 로컬로 가져오는 과정이 필요합니다.

먼저 git bash 터미널을 띄우고,

초록색깔 code 버튼을 눌러서 git으로 끝나느 https 주소를 복사해주고 터미널에 아래와 같이 명령어를 쳐줍니다.

git clone ~~~.git

이러면 이제 로컬에 레포가 폴더로 생성된 것을 확인할 수 있습니다.

이제 우리는 본격적으로 포스트들을 올리기 전에 대문용 index.html를 하나 만들겁니다.

index.html 을 생성하면 되는데, 위에는 readme.md가 대문으로 올라가지만, index.html을 생성하게 되면, 서버는 파일명이 index인 정적파일을 가장 먼저 찾아서 보여주게 됩니다.

index.html은 아래와 같이 간단하게 만들어줍니다. 물론 파일은 username.github.io안에 들어가 있어야 합니다.

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blog by Github Pages</title>
  </head>
  <body>
    <div>
      <h1>Hello, Pages!</h1>
    </div>
  </body>
</html>

물론 더 쉽게 아래처럼 해도 됩니다.

echo "Hello, Pages!" > index.html

다만,

쉘 언어를 모른다면 직접 html을 작성하는 것처럼 직관적인 방법을 쓰는게 좋습니다.

github에 push 하기

자 이제 index.html을 github로 보냅니다.

git add . //.은 현재 디렉터리에서 생긴 모든 변화를 git에 추가

git commit -m "initial commit" // 메시지는 아무거나 상관없습니다

git push // github에 변경사항들이 올라가게 됩니다 
또는 git push origin main

그리고 github를 확인하면

이렇게 index.html이 올라간 걸 확인할 수 있습니다. (.vscode의 유무는 무시해도 괜찮습니다.)

그러고 이제 다시 주소를 쳐서 깃허브 블로그에 들어가면

이렇게 바로 index.html의 내용이 뜨는 것을 확인할 수 있습니다.

초기 홈페이지 띄우는 걸 해봤으니 다음에는 바로 블로그 형태로 만들어보겠습니다.