Github 블로그 만들기 + Jekyll (1)

대학원 풀타임으로 전환하면서 여기저기 했던 포스팅을 깃허브에 정리하고 싶어졌다. (정리병 심한 편)

티스토리도 물론 좋지만 개인적인 내용을 좀 더 담고, 깃허브에는 진행하고 있는 프로젝트 위주로 정리를 해보고자 한다 ! 

포트폴리오 만드려니까 생각보다 시간이 많이 필요해서 미리미리 준비하는 느낌으로다가,,

 

검색을 해보니까 지킬을 사용하면 테마가 있어서 좀 더 보기 편할 것 같아서 사용하기로 했다 ! (깨끗한 거 좋아함)

RESOURCES 메뉴를 누르면 템플릿 사이트에 많은 템플릿이 존재한다. 일단 시간 남을 때 하나 골라두자

테마 고르는데 엄청난 고민이 들어가기 때문에🥲 원래 공부하기 전에 준비가 중요한 법

 

Github 블로그 만들기

1. 본인의 계정 (Github)에 새로운 Repository를 만든다. 

보통 README는 만들어두면 편합니다.

 

2. Repository 이름을 설정한다. '본인계정이름.github.io'

 

3. clone (Code에서 HTTPS 주소 복사)

git clone "복사한 주소"  #git clone https://github.com/skaqnrudckfcjd/skaqnrudckfcjd.github.io.git

 

4. 웹페이지 확인

브라우저 주소창에 'username.github.io'를 입력해줍니다. -> skaqnrudckfcjd.github.io

쨘

 

 

그러면 이제 아까 말한 jekyll에서 고른 테마를 적용해봅시다~!

 

jekyll 이용하기

1. 로컬에 Jekyll 설치

gem install jekyll bundler

시작부터 오류 발생

iterm에는 관리자 권한이 없나..? 싶었지만 귀찮아서 그냥 sudo로 진행 (보안하는 입장에서,,하면 안되는 일이지만 ;_;)

-> ⭐️ sudo로 해도 나중에 지킬테마가 반영이 안되는 오류 발생 ⭐️

다음 블로그에서 해결방법

https://popcorn16.tistory.com/56

맥(macOS)에 jekyll 설치 및 실행하기

 

2. Jekyll 생성

jekyll new ./

아까 클론한 내 github.io 폴더에서 실행하면 된다.

주의할 점은 폴더내에 다른 파일이 없어야한다 ! 

 

3. bundle install

bundle install

4. 로컬서버에 띄우기

bundle exec jekyll serve

Server address:  http://127.0.0.1:4000/

를 입력해주면 !

 

5. 원격에 push

git add .
git commit -m "commit message"
git push

 

그 다음 github.io를 새로고침하면 !

내 gihub.io 주소에 jekyll이 적용된 걸 볼 수 있습니다. 😝

타다~

 

 

Jekyll 테마 적용하기 

게시글 맨 처음에 말한 ! 열심히 고른 테마를 적용해봅시다. 

 

1. 테마 git으로 이동 후 코드 다운로드

 

2. 다운받은 폴더 내 모든 파일을 github.io에 붙혀넣기

겹치는 건 대치해줍니다.

 

3. 내 블로그로 설정하기!!!

1) _congif.yml 열기

우선 title, author, email, description, portfolio_image를 바꿔주소

127.0.0.1:4000에서 바뀐 부분을 확인해줍니다. 

이제 어느 부분을 수정해야될 지 감이 오니 하나씩 바꿔줍니다. 

title: AI for Security
author: HYUNKYUNG
email: greena@korea.ac.kr
description: > # this means to ignore newlines until "show_exerpts:"
  AI와 보안을 공부하고 있습니다 🙈
show_excerpts: true # set to true to show excerpts on the homepage

# Minima date format
# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
sass:
  sass_dir: _sass
plainwhite:
  name: HYUNKYUNG
  tagline: Developer
  date_format: "%b %-d, %Y"
  sitemap: true # set to true to generate sitemap.xml content
  search: true # set to true to enable searchbar
  dark_mode: false # set to true to add dark mode toggle
  portfolio_image: "assets/blogimage.jpg" # the path from the base directory of the site to the image to display (no / at the start)

기본 HOME 드디어 완성..

 

기타

POST 추가

markdown 형식으로 글을 써서 추가해주면 됩니다. -> notion에서 작성하고 markdown으로 다운 받아서 넣을 수 있나? ( 해보자 )

 

github.io에 반영

: 굉장히 느리다.. 로컬에선 바로바로 확인이 되지만 실제로 반영되는데 시간이 걸린다.