Github pages + Hugo 로 블로그 만들기

210727 수정

 

서론 (생략가능)

블로그에 있는 포스트들을 보면 알겠지만 나는 정말정말 초보 개발자이다.

포트폴리오 준비를 시작하면서 깃헙 페이지로 블로그를 만들 수 있다는 얘기를 듣고 만들어보기로 했다.

얘기를 해준 팀원의 말로는 jekyll, hugo, hexo를 주로 사용해서 블로그를 만든다고 했는데

일단 뭐든 처음 하는 것이니 이름이 마음에 드는 hugo를 사용하기로 했다. (아직 누가 더 좋고 나쁘고를 느낄 수 있는 수준이 아님)

 

다른걸 안만들어봐서 모르겠지만 hugo를 만들면서 오래 헤맸고... git을 모르는 사람은 git부터 알아보고 오길 바람..

사람들 설명에서 조금 빠져있는??? 나는 왕초보라서 모르는 그런 기본적으로 깔고가는 전제가 있어서 나같은 초보들에게 도움을 주고자.. 그리고 이 기억이 사라지기 전에 정리하고자 글을 작성한다.

 

 

준비과정 한 번에 해두자

1. git을 설치한다.

2. hugo를 설치한다.

  -> 검색하면 금방 나온다. C\Hug\bin\에 설치, 환경변수 설정

3. git repository를 만들어두자!

  - git repository는 두 개 필요하다.

  : 프로젝트이름으로 된 repo,

  : 자신의아이디.github.io 로 된 repo 두 개를 만든다.

   (ex blog, cuna.github.io 로 된 repo 두 개를 만들어 둔다.)

  - 그리고 master 브랜치가 없어서 애를 먹고.. master 브랜치를 두 개 만들었다.

 

이제 시작해보자 - cmd나 git을 사용.. 나는 git bash로 했음

 

1. 프로젝트를 만들 위치로 이동한다.. 나는 c:user:내이름 폴더에서 했다 (cd c/user/내이름 하라는 말)

 

2.

$hugo new site 프로젝트이름 //(ex hugo new site blog)

   그러면 와 생겼따~! 하는 말들이 나타난다. 해당 위치에 탐색기를 통해 가보면 폴더안에 이것저것 들어있는 모습을 볼 수 있다. contents, layouts 등..

 

3.

$git init

git init을 하라고 아무도 안해놔서 나는 한참 헤맸다. 바보같이 init도 안하고 git 쓸 생각을 하다니? 진짜 개초보..

 

4. 테마를 가져올 것이다.

$git submodule add theme의깃헙주소

를 입력한다 (ex $git submodule add https://github.io/example/theme.git themes/exam  )

테마는 사이트에서 찾아볼 수 있음

 

5. 성공하면 themes에 테마이름으로 된 폴더가 있음

 

6. 거기서 config.toml을 가져와 밖 프로젝트 폴더의 config.toml에 덮어쓰거나 할 수 있음

   ->이건 테마 원작자가 github의 readme에 보통 써두니까 찾아보자 -> 이건 cmd로 하는게 아니야

 

7. 새로 파일을 만들어보자

$hugo new post/test.md

라고 입력하면 contents안에 post 폴더에 test.md 파일이 생겨난다

 

8.

$hugo server -D

를 하면 아직 연결되지 않은상태에서 페이지가 어떻게 뜨는 지 확인할 수 있다.

(-D는 draft인 애들도 보여준다는 뜻이다.. 그래서 -D를 했을 때 보이는게 정작 git을 연결하고 안보이는 경우도 있더라..) 블로그가 어떻게 뜨는지 확인하고 싶다면 그냥 hugo server를 해라..

밑에 localhost:1313으로 접속하라는 링크가 뜰것이다. ctrl+C는 나중에 하고 먼저 접속해보고 확인해라

 

9. 이제 repo와 연결할것이다.

$git init 

$git remote add origin blog의깃주소
//첫번째 repo인 blog의 깃주소를 입력함. 그냥 주소창 링크가 아니고 download해서나오는 그 링크

$git submodule add -b master cuna.github.io의깃주소 public

$git init 

   $git remote add origin blog의깃주소 <- 첫번째 repo인 blog의 깃주소를 입력함. 그냥 주소창 링크가 아니고 download해서나오는 그 링크

   $git submodule add -b master cuna.github.io의깃주소 public 을 입력

 

 

연결이 되면 이제 빌드할 차례

 

빌드할 때는 draft가 true인 애들을 찾아서 지워야한다. (탐색기에서 해라) 나는 archetypes에서 찾았었다. content/post에 있는 test.md에도 있는지 확인하라

 

지운다음 $hugo -t 테마이름 을 입력하면 테마에 맞춰서 빌드가 된다...

이제 푸시해주면 블로그가 생성됨

$cd public

$git add .

$git commit -m "commit메시지"

$git push origin master

$cd ..

$git add .

$git commit -m "commit메시지"

$git push origin master

요렇게만 해주면 이제 example.github.io를 열었을 때 블로그가 나타난다 짜잔