기타/GIT

[Github] Github 페이지를 만들기 With Jekyll

창수씨 2022. 9. 20. 01:29
반응형

  가끔 검색하면 보이는 블로그들이 사실 티스토리나 다른 블로그 사이트가 아니었다. github.io로 끝나는 github 페이지 였는데, 공짜로 정적 페이지를 호스팅 할수 있다는 말을 듣고 참을 수 없어서 시도해 보았는데 쉽지 않다. 심지어 지금도 못하고 있음. 내가 궁금한건 남들은 그냥 자연스럽게 한것 같은 느낌도 들고 그렇다. 삽질의 기록이다. 언젠간 잘 만들었으면 좋겠다.

단계
1. Github Repository 생성
2. Jekyll을 이용해서 정적 웹페이지 생성
3. Github에 Jekyll로 만든 페이지 올리기

 

1. Github Repository 생성

아무렇게나 만들었다. 하지만 public으로 만들어야 한다.

이건 사실 jekyll 올린 부분인데 여튼 저렇게 만들었다는 뜻임

 

 2. Jekyll을 생성하여 정적 웹페이지 생성

https://jekyllrb-ko.github.io/

 

Jekyll • Simple, blog-aware, static sites

Transform your plain text into static websites and blogs

jekyllrb.com

  Jekyll을 만든사람이 Jekyll을 이용해서 만든 Jekyll 설명페이지. 여기서 docs에 들어가서 빠른 시작을 따라가면 바로 로컬에 정적 웹페이지를 볼수 있다. 근데 5번에서 오류가 날것이다. 나는 났었는데 이건 루비 Gem 버전이랑 관련된 문제 같은데 

gem install webrick
bundle add webrick

하면 해결됨.

근데 CSS랑 JS부분이 적용이 안되는 문제가 있었는데 이건 이렇게 해결했다.

_config.yml

baseurl: "git-page"
url: "https://내 깃페이지주소.github.io/"

이렇게 해주니 나오니 1분 정도 뒤 부터 페이지에서 잘 적용 되기 시작했다. 휴

결국 완성된 페이지

https://panickery.github.io/git-page/

 

Jekyll x Bulma - A free Jekyll theme by Nativv Studios

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenera

panickery.github.io

공짜라니 너무 좋자나. 사용된 테마는 Jekyll x Bulma 였다. 사진이 바뀌는게 예뻐서 사용했는데, 나중에 배경도 바꾸고 프로필도 바꿔야지.

 

PS. 세팅 파일을 변경하거나 수정하는 방법은 유튜브를 참고했다. 

https://www.youtube.com/watch?v=T1itpPvFWHI&list=PLLAZ4kZ9dFpOPV5C5Ay0pHaa0RJFhcmcB&ab_channel=MikeDane 

쉬운영어를 써주고, 자막도 유튜브에서 자동 생성해줘서 볼만했다. 한 20강 있는데 한강에 5분에서 7분? 1.2배속 하면 괜찮음

반응형