Github 블로그 만들기(3)

Github 블로그 포스팅하기 여기까지 따라왔으면 기본적인 블로그의 형태가 완성되었을 것이다. 하지만 아직까지 기본 카테고리에 내가 올리지 않은 다양한 포스트들이 올라와 있을 것이다. 지금부터 카테고리를 정리하고, 포스팅하는 방법을 알아보자. 포스팅 포스팅 하는 방법은 아주 간단하다. 폴더를 살펴보면 _pages 폴더가 있다. 이 안에 기본 폴더들이 있는데, 해당 폴더들이 각각 가장 큰 카테고리가 된다. 안에 생성된 폴더들은 서브 카테고리가 되고, .md로 작성된 파일이 포스트가 된다. 우리는 원하는대로 폴더를 만들어 카테고리를 구분하고, .md 스크립트를 추가해 포스팅을 하면 된다. 이때 각 폴더에는 index.md파일이 무조건 들어있어야 한다.(이 파일이 없으면 해당 카테고리 인식을 못한다.) 이제 포스팅을 위해 .md파일을 살펴보면 기본적으로 아래 사진과 같은 설정을 할 수 있다. title은 해당 포스트의 제목이 된다. tags를 통해 해당 포스트의 태그를 추가할 수 있으며, 검색 시 유용한 역할을 한다. date는 포스트를 작성하고 있는 날자가 되며, 해당 날자는 미래가 될 수 없다. thumbnail은 assets/img에 있는 이미지를 사용하여 포스트에 대표되는 이미지를 적용할 수 있다. 기본적인 셋팅이 완료되면, 바로 밑에 내용을 작성하면 된다. (맞다! 해당 내용을 작성하기 전, 인코딩은 무조건 utf-8로 설정하고 수정해야 한다!) 포스트 내용 중 머리글로 많이 쓰이는 헤더 부분은 # 을 통해 표현할 수 있다. 또한 헤더와 내용을 나누는 직선으로 ---를 사용하여 구분할 수 있다. # 헤드 내용 --- 내용을 작성하다가 강조하고 싶은 부분은 억음을 통해 표현할 수 있다. 이미지 삽입의 경우 ![](/assets/img/블로그 만들기/OOO.png) 를 통해 해당 경로에 있는 이미지를 넣을 수 있다. 하이퍼링크는 [내용](링크하고 싶은 주소)를 통해 표시할 수 있다. 방문자 수 이정도만 하면 얼추 느낌있는 간단한 포스팅을 할 수 있다. 이제 완성된 포스트를 올리기만 하면 된다!! 라고 생각했지만 아직 설정 안해준 것이 하나 남아있었다. 각각의 포스트를 살펴보면 방문자 수를 나타내는 눈 모양 표시가 있다. 이 표시는 해당 테마에서 goatcounter를 통해 구현한 방문자 수이다. 이 방문자 수가 제대로 작동하려면 수정해야 할 것이 좀 있다. 먼저 아래 링크를 통해 goatcounter에 가입을 해야한다. https://www.goatcounter.com/signup 계정 생성을 통해 만들어진 my_code는 https://[my-code].goatcounter.com 내 goatcounter의 주소가 된다. 계정을 생성했으면 _config.yml 파일의 goatcounter_code를 내 주소로 바꾸자. 이제 내 goatcounter의 주소로 들어가보자. 우측 상단을 살펴보면 setting을 찾을 수 있다. Setting에서 Allow adding visitor~~~를 체크해 주면 내 포스트의 방문자 수 확인이 활성화 된다. 마무리 지금까지 내 블로그의 글을 따라왔으면 Github 블로그를 운영할 준비가 완료 되었을 것이다. 처음 블로그를 만들 때는 막막하고, 어디서부터 접근해야 할지 잘 몰랐었지만, 뚝딱뚝딱 헤딩하다 보니 이렇게 번듯한 블로그가 완성되었다. 아직은 깃허브 블로그 만들기 글밖에 안올린 애기 블로거지만, 앞으로 코딩 테스트 공부, 프로젝트, 자격증, 대외활동 등 다양한 포스트를 올릴 것이다. 내가 작성한 작은 글들이 많은 사람들에게 도움이 되었으면 좋겠다!:D

알아두면 좋은 지식 · 2024-07-02

Github 블로그 만들기(2)

Github 블로그 꾸미기 이전 포스트에서 열심히 github 블로그를 만들고 실행시키는 것까지 성공했다! 하지만 jekyll에서 기본적으로 제공하는 형식은 너무 밋밋하고, 가독성도 떨어진다. 이제부터 내 블로그에 좀 더 개성을 추가하고, 가독성을 높이기 위해 테마를 적용해 보자!! 테마 정하기 블로그를 꾸미려면 먼저 내 블로그에 적용하고 싶은 테마를 찾아야 한다. jekyll theme 사이트에 들어가서 직접 찾아도 되고, 국룰 테마를 적용해도 된다.(여러 블로그에서 다양하게 추천을 많이 해준다.) 나는 여러 테마들을 살펴보고, 다양한 github 블로그들을 뒤적거린 결과 이 테마가 가장 마음에 들었다. https://github.com/byanko55/jekyll-theme-satellite?ref=jekyll-themes.com 좌측에 카테고리별 정리가 깔끔하고, 프로필 사진도 넣을 수 있으며, 다크모드, 로딩뷰, 검색 기능 등 여러 디테일적인 요소가 포함되어 있다. 가장 결정적인 부분은 깔끔하면서 화려하다!(허허허 취향 반영~) 테마 적용하기 테마 적용하는 방법은 아주 간단하다. 자기가 원하는 테마의 github 링크로 들어가서 zip파일을 다운받은 후 내 폴더에 복붙하면 된다. 이때 겹치는 파일들이 있는데, 대치해 주면 된다. 이제 다시 로컬 서버에 띄워보자. bundle exec jekyll serve 오잉? 오류가 발생했다. Could not find gem 'jekyll-sitemap (~> 1.3)' in locally installed gems. Run 'bundle install' to install missing gems. 아하! bundle을 설치하라는 메시지이다. 설명대로 설치해 주자. bundle install 다시 실행시켜 보면 태마가 잘 적용된걸 확인할 수 있다. 테마 수정하기 테마까지 적용했으니 기본 포스트들이 올라와 있는 블로그를 완전히 내 정보로 바꿔보자. 복붙했던 폴더를 살펴보면 _config.yml 파일을 확인할 수 있다. 이 파일을 통해 블로그 이름, 설명, 로고, Social link 등을 수정할 수 있다. 이때 이미지 같은 경우 우너하는 이미지를 assets/img 폴더에 넣어야 이미지를 넣을 수 있다. "/assets/img/OOO.png" 음… 사이드바에 방문자수가 나왔으면 좋겠다. 깃허브 방문자 수처럼 전체 방문자 수와 그날 방문자 수가 나오면 좋을 것 같다. 이를 한번 추가해보자! _includes폴더에 가보면 sidebar.html을 찾을 수 있다. sidebar의 가장 밑에 추가하고 싶으니 contact-lis의 밑 부분에 추가를 해보자. 추가하는 방법은 간단하다. Hits사이트에 가서 target url을 수정하고, 원하는 색과 아이콘을 골라 적용하면 된다. https://hits.seeyoufarm.com/ 만들어진 HTML LINK를 복사하여 sidebar.html에 잘 복붙하자.(기본적인 html 사용법은 간단하니 조금만 가지고 놀다보면 잘 할 수 있을 것이다.) 여기까지 하면 기본적인 테마 수정은 끝이난다~!~!! (물론 더 열심히 꾸미면 많은 기능을 넣을 수 있지만…이정도만 해도 충분한 것 같다!) 마무리 지금까지 간단한 테마 적용을 알아봤다. 블로그를 만들고, 테마까지 수정했으니 이제 포스팅만 하면 된다! 마지막으로 다음 포스트에서 포스팅 방법을 알아보자!

알아두면 좋은 지식 · 2024-07-02

Github 블로그 만들기(1)

잡담 벌써 한학기만 더 다니면 졸업이다. 슬슬 취업하려면 자기소개서도 작성하고 코딩테스트도 봐야한다. 내 지난 대학생활을 돌아보니 열심히 전공 공부하고 활동을 많이 한 것 같지만 정작 제대로 남아있는 기록이 없다… 심지어 코딩테스트는 공부도 안해서 고딩 때 정올 나갔던 실력 그대로다… (그대로면 다행이지 더 퇴화된 느낌이다) 많이 늦은 감이 있지만, 블로그를 만들어서 앞으로의 공부를 정리해보자! 늦었다 생각할 때가 가장 빠른법!! 막상 블로그를 쓰려고 하니 어디서부터 뭘 접근해야할지 모르겠다. 네이버 블로그, tistory, github, velog 등 종류도 엄청 많다. 일단 블로그 종류를 선택해아 한다. 친구들은 사용하기 편한 tistory, velog를 많이 쓰지만, 역시 개발자라면 github 블로그가 최고지! 잔디도 심을 수 있다는 장점이 있다! 이왕 Github 블로그를 만드는 김에 내 첫 포스팅은 Github 블로그 만들기가 좋을 것 같다. Github 블로그 만들기 아래 내용들은 내가 Github 블로그를 만들 때 겪었던 수행착오들이다. 꼭 이 순서를 따를 필요는 없고, 이미 설치되어 있는 것들은 패스해도 된다. 우선 깃허브에 들어가 USERNAME.github.io 레포지토리를 만들어야 한다. 이게 웬걸, 이미 5년전에 만들어 놓았었다. 잘 만들어 놓았으니 내 컴퓨터에 clone해 오자. 이제 Github 블로그를 만들 때 사용하는 jekyll를 설치해보자. jekyll는 정적 사이트 생성기로 Github 블로그 만들 때 아주 유용하다.(여러 테마도 가져와 쓸 수 있다!) jekyll를 설치하기 전! 미리 설치해야할 것들이 좀 있다. 내가 Macbook을 산지 얼마 안되어 내 MAC은 아무것도 없는 완전 기본 상태이다. 그래서 MAC용 패키지 관리 어플리케이션인 brew를 설치해야한다. 이걸 설치해야 터미널 명령으로 프로그램 설치가 가능하다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 이 명령어를 터미널에 입력하면 알아서 설치가 된다. 설치 완료 후 brew -v로 버전 확인을 할 수 있다. 버전이 뜨면 성공적으로 다운로드가 된 것이고, 만약 zsh: command not found: brew 이런 메시지가 뜨면 환경변수 설정을 추가로 해주어야 한다. zshrc에 homebrew path를 추가하자. echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc 이 명령어를 통해 경로를 추가하고, 아래 명령어를 통해 반영하자. source ~/.zshrc 얼른 jekyll를 설치해서 블로그를 만들고 싶다… 이 상태로 ruby의 패키지 매니저인 gem을 사용해서 gem install jekyll bundler를 하고싶지만, ERROR: While executing gem ... (Gem::FilePermissionError) You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory. 이런 오류가 뜬다. macOS는 기본적으로 ruby가 설치되어 있는데 왜 이런 오류가 뜨는걸까? 아마 기본적으로 설치되어 있는 system ruby를 이용하고 있기 때문에 권한이 없어 그런 것 같다. sudo를 통해 설치할 수 있지만, rbenv를 통해 최신 ruby를 받아 해결해보자. 먼저 rbenv를 설치한다. brew install rbenv ruby-build rbenv version을 치면 system Ruby를 쓰고있다는 것을 알 수 있다. rbenv install -l을 통해 사용 가능한 ruby 버전을 살펴보자.(나는 3.3.3이 최신 버전이었다.) 이제 ruby의 최신 버전을 다운로드하자. rbenv install 3.3.3 자 이제 설치를 했으니 rbenv version을 통해 다시 확인해보자. 어랏? 아직도 system Ruby를 사용중이다. rbenv global 3.3.3을 통해 바꿔주어야 한다. 다시 확인해보면 제대로 적용된 것을 알 수 있다. 마지막으로 rbenv도 PATH 추가를 해야한다. 터미널에 vim ~/.zshrc를 입력하여 환경변수 설정해주는 곳으로 들어가보면 아까 넣어준 애도 보일 것이다. 그 밑에 이걸 추가해주자. [[ -d ~/.rbenv ]] && export PATH=${HOME}/.rbenv/bin:${PATH} && eval "$(rbenv init -)" ~/.rbenv 디렉토리가 존재하는지 확인하고, rbenv의 bin 디렉토리를 현재 PATH에 추가해 주는 역할을 한다. 그리고 rbenv를 초기화하여 쉘에서 명령을 인식하도록 설정한다. 이렇게 하면 터미널에서 rbenv를 직접 사용할 수 있다. 이제 source ~/.zshrc를 통해 적용하면 된다. 엄청 돌고 돌았지만 드디어!!! jekyll를 설치해보자~!~!! gem install jekyll bundler 성공적으로 설치가 된다! 이제 clone해온 내 github.io 폴더에 가서 jekyll를 작동시켜보자! 우선 필요없는 파일들은 전부 없애준다.(index.html) 터미널에서 해당 폴더로 이동 후 jekyll new ./를 하면 jekyll가 만들어진다. 이후 번들도 설치해야한다. bundle install 여기까지 진행했으면 jekyll를 로컬서버에 띄울 수 있다. bundle exec jekyll serve 우왕!! 잘 작동한다!!! http://127.0.0.1:4000 들어가보니 잘 작동한다! 너무 감격스럽다ㅠㅜㅠㅜ 이제 github에 push하자~!~!! 좀 기다렸다가 내 주소 https://tsatoa.github.io/에 들어가니 로컬에서 작동한 것과 똑같이 잘 보인다. 마무리 지금까지 첫 블로그를 만들어보았다. 이대로 설정을 좀 해주고, 바로 사용할 수 있지만, 나는 좀 더 깔쌈한 블로그로 꾸미고 싶다. 기본적으로 생성된 블로그는 너무 허전하고, 테마도 마음에 안든다. 뜯어 고쳐!! 다음 포스팅에서는 테마 적용을 해보자~!~!!

알아두면 좋은 지식 · 2024-06-27

TSATOA

Contact

알아두면 좋은 지식