Jekyll 기반의 GitHub Page 생성(2-5)Post목차설정.25:36.깃페이지만들기(Git블로그)

시리즈 목차 '여러절로구성되어있습니다.'부분

 

파일위치 _includes

파일명 table-of-contents-algorithm.html

 

 

-----

 

 

**CSS파일만들기

마우스오버시 색상 변하게/ 폰트/ 맨앞에 이모티콘/

그외 블로그 전체의 CSS내용은 ... 복붙

파일위치 assets/css/custom.css

 

(영상11:30) 이 CSS파일을 gulp를 통해 압축minified시켜야 다운받는시간을 절약할 수 있다.

( assets/css/custom.css 이 파일을 gulp를 통해 압축시켜서 built/아래로 넣는것이 우리의 목표. )

node.js 다운받는데... 영상에서는 12버전에 컴파일오류가 있어 11버전사용했다는데...

...지금은 2021.07 ........ 안정적인 14.17.3 또는 현재 최신 16.5.0버전이다....... ;;

이전릴리스- 11.15.0 찾았다. node-v11.15.0-x64.msi 다운.  

설치위치  C:\Program Files\nodejs\ (기본)

 

루트아래 있는 gulpfile.js 내용을 지우고, 복붙. (걸프를 이용하기위한 설정파일)

IDE툴 재접속하기 (node.js 재설치해서 환경변수가 바뀌었으니까)

 

루트아래 있는 package.json 내용을 지우고, 복붙

 

터미널 blogmaker3(해당위치)에서 아래 명령어 입력.

npm install

>node_modules 파일 생성됨을 확인할 수 있다. (필요한 모듈 설치완료).

 

 

( assets/css/custom.css 이 파일을 gulp를 통해 압축시켜서 built/아래로 넣는것이 우리의 목표. )

 

 

(영상20:20)

터미널 blogmaker3(해당위치)에서 아래 명령어 입력.

gulp css

gulpfile.js의 22줄 gulp.task('css', gunction부분이 작동을 해야하는데.... 에러 ㅠㅠㅠㅠㅠㅠ

에러..

에러해결시도1) node_modules폴더 지우고 다시 npm install명령어부터 했으나... 똑같이 안됨; 

에러해결시도2) npm install gulp -g 명령어. (해당영상의 댓글참조. 고석준님) gulp를 직접 다운 받겠다는 명령어 인데 -g는 global 의 약어로 시스템 아무데서나 gulp명령어를 사용하겠다는 뜻입니다. 물론 개별적인 프로젝트에서는 -g를 썻다해도 로컬설치가 따로 필요하기 합니다.

vscode재접속 - `gulp css`명령어입력하니 됐다!!!!!됐쓰!

에러해결ㅋ.ㅋ 아 씐나~

 

목차만 나오고 CSS적용되어보이진 않는다. (그래도 정상이라고하니 ㅋ.ㅋ 3초는 신나할 수 있음)

>영상 2-6에서 (3:00차에  CSS적용하는부분 나옴)

 

_layouts/default.html 여기에 내용추가

<!-- Custom.css -->
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}assets/built/custom.css" />

마우스 오버시 빨간색으로 변하는 부분만적용 됨.

-----폰트어썸 미적용, 웹폰트 미적용 상태

 

REFERENCE
https://moon9342.github.io/jekyll-struct

Jekyll 기반의 GitHub Page 생성(2) - 블로그 수정 & Publishing