티스토리 뷰
티스토리의 장점은 뭘까?
1. 작성이 간단하다.
2. 드래그 앤 드롭으로 이미지 삽입이 가능하다
3. 블로그 만들기가 쉽다
그러면 티스토리의 단점은 뭘까?
1. 깃허브 연동이 안된다
2. 뭔가...불편하다. 마크다운을 자주 쓰는 나로서 배치, 수식 사용 등등이..불편하다
3. 커스텀이 힘들다
제일 불편했던 건 아무래도 깃허브 연동이 안된다는 점이다. 개발자로서 열심히 블로그에 글을 써도 잔디가 안심기는건 치명적이었다. 그래서 Github.io로 블로그를 만들어 보려고 한다. 공식문서를 참고해보자
github pages에 잘 나와있으니 일단 한번 따라가보자.
git repository를 만든다
이 때 이름은 무조건 username.github.io로 해야 한다! 정확하게 해야 한다니 꼭 주의하자
git repo를 만들었으면 clone 한다.
index.html을 만든다
정말 별거 없다. 공식 문서에 나와있는 그대로 명령어 따라 치면 된다.
cd username.github.io
echo "Hello World" > index.htmlrepository에 push하면 끝!
https://choieunsong.github.io/로 들어가면 잘 보인다!
그럼 이제 JeKyll을 이용해 예쁘게 블로그를 꾸며보자
Jekyll
jekyll은 GitHub Pages가 제공하는 정적 웹사이트 생성기이다. 쉽게 말해 jekyll이 제공하는 블로그 테마, 레이아웃을 사용해 내가 쓴 글들을 예쁘게 보여주는 프로그램이다.
공식문서는 여기
https://jekyllrb-ko.github.io/docs/
1. 먼저 로컬에 JeKyll을 설치하자
아까 만든 username.github.io 폴더에서 gem으로 jekyll bundler를 설치한다. 나는 맥 유저라서 그런지 write 권한이 없다고 해서 sudo를 붙여줬다
sudo gem install jekyll bundler2. index.html을 제거한다
아까 만든 index.html을 제거한다.
3. jekyll new ./
jekyll new ./username.github.io 폴더에서 jekyll 사이트를 생성해준다.
4. jekyll 사이트를 실행한다
bundler exec jekyll serve
localhost의 4000번 포트로 실행이 된다! 한번 열어보자
음 잘 된다. 이제 원격에서도 똑같이 jekyll을 적용해보자
5. git push해서 username.github.io에 jekyll을 연동하자
간단하다. github에 커밋, 푸쉬해주면 연동 된다. 나는 github.io에 변경 사항이 반영되는 데 1~2분 걸리는 것 같았다. 네트워크마다 반영 시간이 어떨지는 모르겠지만 바로 안된다고 해서 실망하지 말고 조금만 기다려 보자
git add .
git commit -m "feat: jekyll 설치"
git push origin master
이렇게 github.io에 jekyll이 설치된 것을 볼 수 있다!
하지만 이대로는 뭔가 심심하다.
나는 예쁘고 귀염뽀짝한 블로그를 만들고 싶은데. 이대로는 너무 썰렁하지 않은가? jekyll은 무척이나 다양한 free theme을 지원한다.
그 중 테마를 골라 적용해보겠다.
Jekyll 테마 적용
구글에 jekyll theme이라고 치니까 많은 사이트들이 뜬다. 그 중에서 하나를 골라서 적용해보겠다
하지만 나는 결정장애가 있는걸..ㅠㅠㅠ볼수록 뭐가 좋은지 모르겠다. 깔끔하고 블로그의 카테고리, 글들이 잘 보일 수 있는 theme이면 좋겠는데 후보군이 너무 많아 오히려 선택이 힘들었다. 그래서 어떤 블로그에서 추천해 주신 걸로 선택했다ㅎㅎ 이건 내가 참고한 블로그 주소
https://theorydb.github.io/envops/2019/05/02/envops-blog-theme/
이건 jekyll theme들을 제공하는 사이트
https://jekyll-themes.com/free/
https://jamstackthemes.dev/ssg/jekyll/
내가 선택한 건 jekyll-text라는 테마다. 사실 lanyon, kiko-plus를 하고 싶었는데 하는 도중 에러가 나서 삽질만 6시간 하다가 포기하고 이걸로 선택. 선택 기준은 태그를 모아볼 수 있는 것과 깔끔함이다.
https://github.com/kitian616/jekyll-TeXt-theme
골랐으니까 적용해봐야겠지?
사이트로 이동해서 전체 blog를 ZIP으로 다운받는다
그 다음 다운받은 theme 폴더를 전체 선택해 복사한다
username.github.io 폴더에 방금 선택한 테마를 붙여넣는다
복붙 도중 대치하겠습니까? 하고 뜨는 메시지는 전부 대치해주면 된다.
그 다음 로컬에서 빌드하면 잘 뜬다!
bundle install
bundle exec jekyll serve
설정 변경하기
_config.yml에서 내 정보를 입력해 블로그에 뜨도록 수정해준다.
나는 블로그랑 jekyll-text의 공식 문서 보고 따라했다
text_skin: dark # "default" (default), "dark", "forest", "ocean", "chocolate", "orange"
highlight_theme: tomorrow-night # "default" (default), "tomorrow", "tomorrow-night", "tomorrow-night-eighties", "tomorrow-night-blue", "tomorrow-night-bright"
url: "https://choieunsong.github.io" # the base hostname & protocol for your site e.g. https://www.someone.com
baseurl: "/" # does not include hostname
title: Sliver Song' log
description: > # this means to ignore newlines until "Language & timezone"
매일 한줄이라도 쓰자
## => Language and Timezone
##############################
lang: ko # the language of your site, default as "en"
timezone: Asia/Seoul # see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones for the available values
## => Author and Social
##############################
author:
type: person # "person" (default), "organization"
name: choieunsong
url: https://choieunsong.github.io
avatar: # path or url of avatar image (square)
bio: I am an amazing person.
email:
facebook: # "user_name" the last part of your profile url, e.g. https://www.facebook.com/user_name
twitter: # "user_name" the last part of your profile url, e.g. https://twitter.com/user_name
weibo: # "user_id" the last part of your profile url, e.g. https://www.weibo.com/user_id/profile?...
googleplus: # "user_id" the last part of your profile url, e.g. https://plus.google.com/u/0/user_id
telegram: # "user_name" the last part of your profile url, e.g. https://t.me/user_name
medium: # "user_name" the last part of your profile url, e.g. https://medium.com/user_name
zhihu: # "user_name" the last part of your profile url, e.g. https://www.zhihu.com/people/user_name
douban: # "user_name" the last part of your profile url, e.g. https://www.douban.com/people/user_name
linkedin: # "user_name" the last part of your profile url, e.g. https://www.linkedin.com/in/user_name
github: # "user_name" the last part of your profile url, e.g. https://github.com/user_name
npm: # "user_name" the last part of your profile url, e.g. https://www.npmjs.com/~user_name
## => GitHub Repository (if the site is hosted by GitHub)
##############################
repository: choieunsong/choieunsong.github.io
repository_tree: main
## => Paths
##############################
paths:
root: "/archive.html" # title link url, "/" (default)
home: "/archive.html" # home layout url, "/" (default)
archive: # "/archive.html" (default)
rss: # "/feed.xml" (default
다시 로컬에서 빌드해보면 잘 뜬다
이제 git에 푸쉬해주면 원격으로도 적용 된다.
아..힘들었다ㅠㅠ앞으로 github.io 블로그에 글을 올릴 예정이다.
아무도 볼 예정은 없겠지만 글 쓰는데 잔디라도 심어야 하지 않겠나.
다들 개발자라면 github.io 한번쯤 설치해 보시길
안녕!!