TIL | Jekyll로 포트폴리오(github.io) 만들기

TIL(3) - 정적 사이트 생성기 Jekyll을 이용해 포트폴리오를 만들어보려한다.

포트폴리오에 들어가만한 수준의 프로젝트가 있는 것은 아니지만, 여유가 있을 때 미리 만들어두면 좋을 것 같아서 시작하게 되었다.

※ 세세한 변경방법은 따로 시리즈를 추가해볼까 생각 중이다.

포트폴리오를 만들기 전에 사전 작업이 필요하다.

1. Jekyll themes를 고르기
2. Ruby 설치 - 로컬 서버 구동 역할

1. 템플릿 clone & 로컬 서버 구동

▶ 사용하기로 결정한 템플릿 코드 압축 파일을 다운 받고 원하는 곳에 압축을 풀어준다.

※ Gihub repository로 Fork해서 가져오는 방법도 있다.

▶ 폴더에 진입해 VSCode(나 다른 IDE)를 실행하고 Terminal에 다음 코드를 순서대로 입력한다.

cmd의 언어를 유니코드로 변경하는 명령어

chcp 65001

Gem 명령어를 통한 라이브러리 설치

gem install bundler jekyll minima jekyll-feed tzinfo-data rdiscount

bundle 설치

bundle install

서버 구동 명령어

bundle exec jekyll serve

▶ http://127.0.0.1:400 로 접속하면 서버가 구동된 것을 확인할 수 있다.

2. 나만의 포트폴리오로 커스텀하기

각자 선택한 템플릿이 달라 디렉터리 구조가 다르나 일반적으로 커스텀할 것은 아래와 같다.

_config.yml : Jekyll 동작과 관련한 설정을 담고 있는 파일이다.
(수정사항을 반영하려면 서버를 중단하고 다시 빌드해야한다.)

_includes : footer/header/navbar 등에 관한 HTML, css 파일이 저장된 폴더이다.
(자주 사용되는 코드들을 따로 관리하는 곳이다.)

_layouts : 하위 webpage에 대한 템플릿을 모아둔 폴더이다.
(디자인과 직접적으로 관련된 파일들이 저장되어있다.)

※ _includes와 _layouts의 차이가 모호해서 '그냥 이런 파일들이 있구나`라는 느낌정도만 가지고 가면 될 것 같다.

_posts : 글을 작성하고 저장하는 폴더이다. 마크업 언어(주로 마크다운을 사용하고 HTML도 지원)를 사용해 작성한다.

3. 호스팅하기

▶ Github에서 새로운 repository를 생성한다.

▶ Repository name은 이름.github.io로 설정해준다.
(Github 계정당 이름.github.io 주소는 하나밖에 생성할 수 없다.)

▶ _config.yml 파일에서 url 부분을 https://이름.github.io 로 수정하고 서버를 다시 실행한 후 중단한다.

▶ Terminal에서 아래 코드들을 입력해 commit&push 해준다.

git init
git add -A
git commit -m "Create a portfolio"
git branch -M main
git remote add origin https://github.com/user명/이름.github.io.git
git push -u origin main

▶ 각자 설정한 이름.github.io 주소로 접속해 호스팅이 잘 됐는지 확인한다.